Os componentes UI / UX no Angular são conhecidos como Materiais angulares. Elesajudar os aplicativos angulares a executar eficientemente . No entanto, se você ainda não os conhece, aqui está um artigo para ajudá-lo a aprender os materiais angulares em detalhes. Além disso, tpara obter um conhecimento profundo do Angular, considere se inscrever no ' de Edureka.
Neste artigo, abordarei os seguintes tópicos:
- Introdução aos Materiais Angulares
- Instalação Angular de Material
- Componentes de material angulares
- Angular Material CDK
Introdução aos Materiais Angulares
Materiais foram apresentados como uma linguagem de design desenvolvida pelo Google em 2014. Design material é uma ferramentapara frameworks front-end, o que ajuda você com visual , movimento , e interação Projeto. Ele também ajuda você a se adaptar em diferentes dispositivos e diferentes tamanhos de tela. Primeiro, foi marcado para AngularJS para tornar esses aplicativos mais atraente e executar Mais rápido . Então, o Google reescreveu completamente o código do zero e removeu o JS, ou seja, , e nomeou-o em setembro de 2016. Mais tarde, o Google marcou o Material Design como Angular, que usa , e a batizamos de materiais angulares.
Materiais Angulares ou componentes de interface de usuário (UI) ajudam a projetar seu aplicativo em um estruturada maneira. Eles atraem usuários e o tornam mais fácil de acessar os elementos ou componentes presentes em seu aplicativo. Eles também ajudam a projetar seus aplicativos de uma maneira atraente, com estilos e formas . Esses componentes ajudam a tornar seu aplicativo mais consistente , velozes , versátil e até mesmo design responsivo sites.
Instalação Angular de Material
Agora, vamos começar com um rápido tutorial sobre como instalar materiais angulares. Em primeiro lugar, certifique-se de que o Angular está instalado em seu sistema. Se você não está familiarizado com o Angular, consulte o link em . Depois de ter tudo configurado, você pode adicionar Angular Materials ao seu projeto usando o seguinte comando:
de adicionar @ angular / material
Primeiro, ele solicitará que você escolha um nome de tema predefinido ou um tema personalizado.
Você precisa escolher o tema pré-construído “Indigo / Pink”, que é o tema padrão para estilizar seu aplicativo. Você também pode escolher o tema “Personalizado” para que possa personalizar seus arquivos de tema que incluem todos os estilos comuns.
Em seguida, ele solicitará que você configure HammerJS . HammerJS é uma biblioteca popular, usada principalmente em aplicativos Angular. Ele adiciona suporte para gestos de toque como deslizar, mover, apertar, girar e muitos mais, especialmente em aplicativos móveis.
Você pode escolher “Sim” ou “Não”. O HammerJS pode ser útil quando você usa seu aplicativo em celulares. Como os celulares oferecem telas sensíveis ao toque, esses gestos são mais úteis e podem parecer modernos em seu aplicativo móvel.
Depois de escolher sua escolha, em seguida, ele solicitará que você configure Animações do navegador para material angular.
Você precisa escolher “Sim” para que possa usar animações em seu aplicativo. Animações angulares tornam seu aplicativo mais divertido e fácil de usar. Isso pode melhorar seu aplicativo e a experiência do usuário, o que atrai a atenção dos usuários.
Posteriormente, isso instalará o Angular Materials em sua aplicação.
Componentes de material angulares
Como mencionado anteriormente, os componentes de materiais angulares nada mais são do que UI / UX Componentes de design. Eles contêm uma variedade de componentes como controles de formulário, navegação, botões e indicadores, pop-ups e muitos mais. Esses componentes ajudam a implementar padrões de acordo com as especificações do Material Design.
Seguindo em frente, vamos ver alguns exemplos de como implementar esses componentes em seu aplicativo angular.
Navegação
Primeiro, discutirei os componentes de Navegação.
- Barra de ferramentas
Você precisa digitar o seguinte código no app.component.html para usar o componente Barra de ferramentas em seu aplicativo.
Tutorial de material angular é um contêiner de material Angular usado para cabeçalhos e títulos. A cor do recipiente pode ser alterado usando o cor propriedade.Por padrão, as barras de ferramentas usam uma cor de fundo neutra com base no tema atual, ou seja, claro ou escuro.Você pode escolher três temas padrão, que são: ‘Primário’ , 'sotaque' , ou 'advertir' .Para usar esta barra de ferramentas, você precisa primeiro importá-la no app.module.ts arquivo de materiais Angular usando o seguinte comando:
importar {MatToolbarModule} de '@ angular / material'Posteriormente, você também precisará adicionar este módulo no importações: [] seção localizada no app.module.ts Arquivo.
importações: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Para Mat-Toolbar, você precisa adicionar “ MatToolbarModule ”.
Agora, vamos entregar seu projeto usando o seguinte comando:
de servir -o
Isso abrirá seu projeto no navegador padrão do seu sistema, conforme mostrado abaixo:
Se você deseja alterar a cor da barra de ferramentas de acordo com sua escolha, você pode fazer isso com a ajuda da folha de estilo CSS. Deixe-me mostrar-lhe um exemplo.
Primeiro, você precisa apagar cor propriedade de recipiente e, em seguida, digite o seguinte CSS código no app.component.css Arquivo.
mat-toolbar {background-color: / * color-of-your-choice * / color: / * text-color * /}Agora, sirva seu projeto para ver o resultado.
- Cardápio
A seguir, discutirei o componente Menu. Você precisa digitar o seguinte código em seu app.component.html Arquivo.
Tutorial de material angular Ajuda das configurações do menuVamos adicionar um estilo ao Cardápio botão. Você precisa digitar o seguinte código em seu app.component.css Arquivo.
.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}classe = ”espaço” é usado para adicionar espaçamento entre “Nome da barra de ferramentas” e “Opção de menu”.
Caso você não esteja familiarizado com a folha de estilo CSS, consulte nosso blog em para obter mais detalhes.
Assim como a Barra de Ferramentas, para usar e contêineres, você precisa seguir o mesmo procedimento acima, para importar MatMenuModule e MatButtonModule a partir de material angular e adicioná-los em importações: [] seção localizada em app.module.ts Arquivo.
Sirva seu projeto agora para exibir a saída.
Controles de formulário
Agora, discutirei os componentes do Form Control.
- Campo do Formulário
Como o nome sugere, Form-Field é usado para entradas fornecidas pelo usuário. É mais comumente usado para o registro de um usuário, em um aplicativo ou site.
Você precisa digitar o seguinte código no app.component.html arquivo para usar o componente Form-Field em seu aplicativo.
Controles de formulário
Nome
Como de costume, você precisa importar MatFormFieldModule e MatInputModule e adicioná-los em importações: [] seção localizada no app.module.ts Arquivo. O código acima é geralmente usado para inserir nomes como “Nome”, “Sobrenome”, etc. Você pode até usar Validadores e tornar um campo obrigatório. Por exemplo, você pode usá-lo para o campo E-mail. Você pode ocultar ou reexibir o texto das senhas. Para sua referência, verifique o código abaixo:
Digite seu e-mail {{getErrorMessage ()}} Digite sua senha {{ocultar? 'visibilidade_off': 'visibilidade'}}Na tua app.component.css arquivo, você precisa adicionar o seguinte código:
.example-container {padding-left: 50px}Agora, em seu app.component.ts arquivo, você precisa importar FormControl e Validadores a partir de @ angular / forms diretório.
import {FormControl, Validators} de '@ angular / forms'Você precisa até mesmo adicionar o texto para exibir um erro dentro da classe a seguir.
export class AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Você deve inserir um valor': this.email.hasError ('email')? 'Não é um e-mail válido': ''} hide = true}Referindo-se ao procedimento acima, você precisa digitar o seguinte código em seu app.module.ts arquivo para importar os módulos necessários.
import {FormsModule, ReactiveFormsModule} de '@ angular / forms' import {MatIconModule} de '@ angular / material'Mais tarde, você precisa adicionar esses módulos em importações: [] seção.
- Botao de radio
Os botões de rádio são geralmente usados para escolher uma opção entre as diferentes opções. Você pode verificar o código a seguir para referência.
Para app.component.html Arquivo,
Gênero
Masculino feminino
Para app.component.css Arquivo,
mat-radio-button {Padding-left: 50px}Agora, você precisa importar MatRadioModule e adicione-o em importações: [] seção localizada no app.module.ts Arquivo.
Mais tarde, você precisa servir seu projeto para exibir a saída.
Seguindo em frente, discutirei o CDK de Material Angular.
Angular Material CDK
CDK, também conhecido como Component Dev Kit , é uma biblioteca de comportamentos predefinidos em Angular Material, que é um conjunto de ferramentas que implementam padrões de interação e recursos do aplicativo . Não tem nenhum estilo específico para o Material Design. Vamos ver um exemplo de CDK.
- Campo de texto
O componente Campo de texto fornece utilitários para trabalhar com campos de entrada de texto. Você pode usar componentes CDK no campo de texto para redimensionar as entradas. Vamos ver um exemplo de como implementá-lo.
Para app.component.html Arquivo,
Angular Material CDK
Tamanho da fonte 10 px 12 px 14 px 16 px 18 px 20 px Tamanho automático da área de texto
Para o app.component.ts arquivo, você precisa importar os componentes necessários primeiro.
import {CdkTextareaAutosize} de '@ angular / cdk / text-field' import {NgZone, ViewChild} de '@ angular / core' import {take} de 'rxjs / Operadores'Agora, você precisa digitar o seguinte código dentro da classe.
java convert double para int
export class AppComponent {construtor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Em seguida, você precisa importar MatSelectModule e adicione-o em importações: [] seção localizada no app.module.ts Arquivo.
Finalmente, você precisa servir seu projeto para exibir a saída.
Esta não é a conclusão e existem vários outros componentes em materiais angulares. Você pode consultá-los no website oficial de Material Angular.
Com isso, gostaria de encerrar meu blog. Espero que você tenha entendido os fundamentos do Angular Material.Se você tiver quaisquer dúvidas ou perguntas sobre este artigo, não hesite em postá-las na seção de comentários abaixo.
Se você gostaria de saber tudo o que acabou de aprender neste blog e mais sobre Angular e direcione sua carreira para um desenvolvedor angular proficiente, então considere se inscrever em nosso ' .
Tem alguma questão para nós? Mencione isso na seção de comentários deste blog “Angular Material” e entraremos em contato com você o mais breve possível.