Material Angular - Widgets
Angular Material fornece uma rica biblioteca de widgets de IU. Isso permite que os usuários tenham capacidade de interação avançada com o aplicativo.
A tabela a seguir lista alguns Widgets importantes com suas descrições -
Sr. Não | Widget e descrição |
---|---|
1 | Botões o md-button, uma diretiva angular, é uma diretiva de botão com ondulações de tinta opcionais (e estão ativadas por padrão). E sehref ou ng-href atributo é fornecido, então esta diretiva atua como um elemento âncora. |
2 | CheckBoxes o md-checkbox, uma diretiva angular, é usado como um controle de caixa de seleção. |
3 | Conteúdo o md-content, uma diretiva angular, é um elemento de contêiner e é usado para conteúdo rolável. olayout-padding atributo pode ser adicionado para ter conteúdo preenchido. |
4 | DatePicker o md-datepicker, uma diretiva angular, é um controle de entrada para selecionar uma data. Ele também suporta ngMessages para validação de entrada. |
5 | Diálogos o md-dialog, uma diretiva angular, é um elemento de contêiner e é usado para exibir uma caixa de diálogo. Seu elementomd-dialog-content contém o conteúdo do diálogo e o md-dialog-actions é responsável pelas ações de diálogo. o mdDialog, um serviço Angular, abre uma caixa de diálogo sobre o aplicativo para manter os usuários informados e ajudá-los a tomar decisões. |
6 | Divisor o md-divider, uma diretiva angular, é um elemento de regra e é usado para exibir uma regra leve e fina para agrupar e dividir o conteúdo em listas e layouts de página. |
7 | Lista o md-list, uma diretiva Angular, é um componente de contêiner que contém md-list-itemelementos como filhos. A diretiva md-list-item é um componente de contêiner para itens de linha do contêiner md-list. Classes CSSmd-2-line e md-3-line pode ser adicionado a md-list-item para aumentar a altura da linha com 22px e 40px, respectivamente. |
8 | Cardápio o md-menu, uma diretiva Angular, é um componente para exibir opções de adição dentro do contexto da ação executada. omd-menutem dois elementos filhos. O primeiro elemento é otrigger elemente é usado para abrir o menu. O segundo elemento é omd-menu-contentpara representar o conteúdo do menu quando o menu é aberto. O md-menu-content geralmente carrega os itens de menu como md-menu-item. |
9 | Barra de menu o md-menu-bar, é um componente de contêiner para conter vários menus. A barra de menus ajuda a criar um efeito de menu fornecido pelo sistema operacional. |
10 | Barras de Progresso o md-progress-circular e md-progress-linear são diretivas de progresso angular e são usadas para mostrar a mensagem de conteúdo de carregamento no aplicativo. |
11 | Botões do rádio o md-radio-group e md-radio-buttonAs diretivas angulares são usadas para mostrar os botões de opção no aplicativo. O md-radio-group é o contêiner de agrupamento para os elementos do botão de rádio md. |
12 | Selecione% s o md-select, uma diretiva Angular é usada para mostrar a caixa de seleção, limitada pelo modelo ng. |
13 | Barras de ferramentas fabulosas o md-fab-toolbar, uma diretiva Angular, é usada para mostrar uma barra de ferramentas de elementos ou botões para acesso rápido às ações comuns. |
14 | Sliders o md-slider, uma diretiva angular é usada para mostrar um componente de intervalo. Possui dois modos -
|
15 | Abas o md-tabs e md-tabAs diretivas angulares são usadas para mostrar as guias no aplicativo. md-tabs é o contêiner de agrupamento para elementos md-tab. |
16 | Barras de Ferramentas o md-toolbar, uma diretiva Angular é usada para mostrar uma barra de ferramentas que normalmente é uma área acima do conteúdo para mostrar o título e os botões relevantes. |
17 | Dicas de ferramentas O Angular Material fornece vários métodos especiais para mostrar dicas de ferramentas discretas aos usuários. Angular Material fornece maneiras de atribuir direções para eles e a diretiva md-tooltip é usada para mostrar dicas de ferramentas. Uma dica de ferramenta é ativada sempre que o usuário focaliza, passa o mouse sobre ou toca o componente pai. |
18 | Salgadinhos o md-chips, uma diretiva angular, é usado como um componente especial chamado Chip e pode ser usado para representar um pequeno conjunto de informações, por exemplo, um contato, tags etc. O modelo personalizado pode ser usado para processar o conteúdo de um chip. Isso pode ser obtido especificando-se um elemento md-chip-template tendo o conteúdo personalizado como filho de chips md. |
19 | Fichas de contato o md-contact-chips, uma diretiva angular, é um controle de entrada construído em chips MD e usa o md-autocompleteelemento. O componente do chip de contato aceita uma expressão de consulta que retorna uma lista de contatos possíveis. Um usuário pode selecionar um deles e adicioná-lo à lista de chips disponíveis. |