Angular Material
Material Design, nome chinês: Material Design Language, é uma nova linguagem de design lançada pelo Google, que o Google diz ter sido projetada para oferecer uma aparência e sensação mais consistente e ampla para celulares, tablets, desktops e "outras plataformas".
Segundo o Google, o Design de Materiais é baseado em "toque real, inspirado no estudo do papel e da tinta", e é capaz de permitir que os usuários "compreendam as pistas visuais usadas para substituir o mundo real" "sem ir contra os princípios da mecânica". Além disso, os princípios básicos de luz, superfície e movimento são fundamentais para representar como os objetos se movem, interagem e existem no espaço em relação uns aos outros. Efeitos realistas de luz e sombra mostram as emendas entre os blocos, dividem espaços e marcam partes em movimento. Para uma introdução mais detalhada, por favor visite o site oficial do MaterialO login do hiperlink está visível.。
Angular Material é um conjunto de frameworks de UI Angular2+ perfeitamente implementados pela equipe Angular com base na especificação Material, endereço oficial do site:O login do hiperlink está visível.
Este artigo utiliza o componente MatSnackBar da Angular Material para encapsular uma caixa de alerta, vamos primeiro analisar as renderizações:
Passo 1: Instalação
Passo 2: Configure a animação
Depois que o pacote de animação estiver instalado, importe o BrowserAnimationsModule para seu aplicativo para habilitar o suporte à animação.
app.module.ts importação da seguinte forma:
Passo 3: Importar o tema
Incluir temas é necessário para aplicar todos os estilos principais e de tema à sua aplicação.
Para começar com temas pré-construídos, inclua um dos temas pré-construídos do Angular Material globalmente na sua aplicação. Se você estiver usando a CLI Angular, pode configurá-lapara styles.scss：
Se vocêNão utilizadoAngular CLI, então<link>pode passarSeus elementos contêm index.html temáticos pré-construídos.
Passo 4: Comece a encapsular a caixa de alerta
Insira o diretório /app/services pelo comando cmd cd, e você pode modificar o diretório de acordo com seu próprio projeto e executar o comando Create Service:
O código ts é o seguinte:
Passo 5: Configure a caixa de prompt no estilo CSS
No projetostyles.scssNo final do arquivo, adicione o seguinte estilo, que pode ser modificado conforme sua situação real! O código é o seguinte:
Passo 6: Use a caixa de alerta
Eu pego a interface de login como exemplo e a importo para login.module.tsServiço de alertaeMatSnackBarModuleMódulos componentes, conforme segue:
Usado em login.component.ts componente, o código é o seguinte:
Documentação da API dos componentes MatSnackBar:O login do hiperlink está visível.
(Fim)
|
Publicado em 22/11/2018 15:00:49
|
|
|
|
