Materiale angolare
Material Design, nome cinese: Material Design Language, è un nuovo linguaggio di design lanciato da Google, che Google definisce essere progettato per offrire un "look and feel" più coerente e ampio per telefoni cellulari, tablet, desktop e "altre piattaforme".
Secondo Google, Material Design si basa su "tocco reale, ispirato allo studio di carta e inchiostro", ed è in grado di permettere agli utenti di "comprendere i segnali visivi usati per sostituire il mondo reale" "senza andare contro i principi della meccanica". Inoltre, i principi fondamentali di luce, superficie e movimento sono fondamentali per rappresentare come gli oggetti si muovono, interagiscono ed esistono nello spazio in relazione l'uno all'altro. Effetti realistici di luce e ombra mostrano le giunture tra i blocchi, dividono gli spazi e segnano le parti in movimento. Per un'introduzione più dettagliata, si prega di visitare il sito ufficiale di MaterialIl login del link ipertestuale è visibile.。
Angular Material è un insieme di framework UI Angular2+ perfettamente implementati dal team Angular basandosi sulla specifica Material, indirizzo ufficiale del sito web:Il login del link ipertestuale è visibile.
Questo articolo utilizza il componente MatSnackBar di Angular Material per racchiudere una finestra di allerta, diamo prima un'occhiata ai rendering:
Passo 1: Installazione
Passo 2: Configura l'animazione
Una volta installato il pacchetto animazione, importa il BrowserAnimationsModule nella tua applicazione per abilitare il supporto alle animazioni.
app.module.ts importazioni come segue:
Passo 3: Importa il tema
Includere i temi è necessario per applicare tutti gli stili di base e tema alla tua applicazione.
Per iniziare con i temi predefiniti, includi uno dei temi predefiniti di Angular Material a livello globale nella tua applicazione. Se usi la CLI Angular, puoi configurarlaa styles.scss：
Se tuNon utilizzatoCLI angolare, allora<link>può passareI tuoi elementi contengono index.html tematiche predefinite.
Passo 4: Inizia a incapsulare la scatola degli allerti
Inserisci la directory /app/services tramite il comando cmd cd, e puoi modificare la directory secondo il tuo progetto ed eseguire il comando Create Service:
Il codice ts è il seguente:
Passo 5: Configura la finestra di prompt in stile CSS
Nel progettostyles.scssIn fondo al file, aggiungi il seguente stile, che può essere modificato in base alla tua situazione reale! Il codice è il seguente:
Passo 6: Usa la casella di allarme
Prendo l'interfaccia di accesso come esempio e la importo in login.module.tsServizio di allertaeModulo MatSnackBarTModuli componenti, come segue:
Utilizzato in login.component.ts componente, il codice è il seguente:
Documentazione API dei componenti MatSnackBar:Il login del link ipertestuale è visibile.
(Fine)
|
Pubblicato su 22/11/2018 15:00:49
|
|
|
|
