NavigationRailTrilho de navegação
O trilho de navegação fornece acesso a diferentes páginas principais para tablets e computadores desktop.
Importe os componentes conforme necessário:
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
Importe os tipos TypeScript dos componentes conforme necessário:
import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js';
Exemplo de uso: (o style="position: relative" no exemplo é apenas para fins de demonstração; remova este estilo ao usar.)
Recent
Images
Library
<mdui-navigation-rail value="recent" style="position: relative">
<mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" value="images">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined" value="library">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
Observações:
Este componente usa position: fixed por padrão e adiciona automaticamente padding-left ou padding-right ao body para evitar que o conteúdo da página seja ocultado pelo componente.
No entanto, nos dois casos a seguir, ele usará position: absolute por padrão:
- Quando o atributo
contained do componente <mdui-navigation-rail> é true. Assim, padding-left ou padding-right será adicionado ao elemento pai.
- Quando o componente está dentro de
<mdui-layout></mdui-layout>. Assim, nenhum padding-left ou padding-right será adicionado.
Por padrão, o trilho de navegação é exibido no lado esquerdo ou direito da página, em relação à janela atual. Se você deseja colocar o trilho de navegação dentro de um contêiner especificado, adicione o atributo contained ao componente <mdui-navigation-rail>. Assim, o trilho será exibido em relação ao seu elemento pai (você precisa adicionar o estilo position: relative ao elemento pai).
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Conteúdo da página</div>
</div>
</div>
Fonte
Defina o atributo placement como right no componente <mdui-navigation-rail> para exibir o trilho de navegação no lado direito.
<div style="position: relative">
<mdui-navigation-rail placement="right" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Conteúdo da página</div>
</div>
</div>
Fonte
Use o atributo divider ao componente <mdui-navigation-rail> para adicionar uma linha divisória no trilho de navegação, a fim de distinguir do conteúdo da página.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Conteúdo da página</div>
</div>
</div>
Fonte
Dentro do componente <mdui-navigation-rail>, você pode adicionar elementos pelos slots top e bottom para adicionar elementos no topo e no rodapé.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
<mdui-fab lowered icon="edit--outlined" slot="top"></mdui-fab>
<mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 600px;overflow: auto">
<div style="height: 1000px">Conteúdo da página</div>
</div>
</div>
Fonte
Defina o atributo alignment do componente <mdui-navigation-rail> para modificar o alinhamento vertical dos itens de navegação.
Recent
Images
Library
start
center
end
<div class="example-alignment" style="position: relative">
<mdui-navigation-rail alignment="start" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 360px;overflow: auto">
<mdui-segmented-button-group value="start" selects="single">
<mdui-segmented-button value="start">start</mdui-segmented-button>
<mdui-segmented-button value="center">center</mdui-segmented-button>
<mdui-segmented-button value="end">end</mdui-segmented-button>
</mdui-segmented-button-group>
</div>
</div>
<script>
const example = document.querySelector(".example-alignment");
const navigationRail = example.querySelector("mdui-navigation-rail");
const segmentedButtonGroup = example.querySelector("mdui-segmented-button-group");
segmentedButtonGroup.addEventListener("change", (event) => {
navigationRail.alignment = event.target.value;
});
</script>
Fonte
No componente <mdui-navigation-rail-item>, use o atributo icon para definir o ícone do item de navegação no estado inativo e o atributo active-icon para definir o ícone no estado ativo. Você também pode usar os slots icon e active-icon para definir os elementos de ícone dos estados inativo e ativo.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item>
Library
<mdui-icon slot="icon" name="library_music--outlined"></mdui-icon>
<mdui-icon slot="active-icon" name="library_music--filled"></mdui-icon>
</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Conteúdo da página</div>
</div>
</div>
Fonte
O componente <mdui-navigation-rail-item> pode ser usado apenas com ícone, sem texto.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined"></mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Conteúdo da página</div>
</div>
</div>
Fonte
Defina o atributo href no componente <mdui-navigation-rail-item> para transformar o item de navegação em um link. Assim, você também pode usar os atributos relacionados a links: download, target, rel.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item
href="https://www.mdui.org"
target="_blank"
icon="watch_later--outlined"
>Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Conteúdo da página</div>
</div>
</div>
Fonte
No componente <mdui-navigation-rail-item>, você pode adicionar um badge pelo slot badge.
Recent
99+
Images
Library
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">
Recent
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Conteúdo da página</div>
</div>
</div>
Fonte| Atributo | Propriedade | Reflect | Tipo | Padrão |
|---|
icon | icon | | string | - |
Nome do ícone Material Icons para o estado inativo. Também pode ser definido via slot="icon".
|
active-icon | activeIcon | | string | - |
Nome do ícone Material Icons para o estado ativo. Também pode ser definido via slot="active-icon".
|
value | value | | string | - |
O valor do item de navegação.
|
href | href | | string | - |
A URL de destino do link.
Ao definir esta propriedade, o componente será renderizado internamente como um elemento <a> e poderá usar atributos de link.
|
download | download | | string | - |
O nome do arquivo para download.
Nota: Esta propriedade só é válida quando o atributo href está definido.
|
target | target | | '_blank' | '_parent' | '_self' | '_top' | - |
Define como o link será aberto. Os valores possíveis são:
_blank: Abre o link em uma nova janela_parent: Abre o link no frame pai_self: Padrão. Abre o link no frame atual_top: Abre o link na janela inteira
Nota: Esta propriedade só é válida quando o atributo href está definido.
|
rel | rel | | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - |
A relação entre o documento atual e o documento vinculado. Os valores possíveis são:
alternate: Versão alternativa do documento atualauthor: Autor do documento atual ou artigobookmark: Link permanente para a seção ancestral mais próximaexternal: O documento referenciado não está no mesmo site do documento atualhelp: Link para documentação de ajuda relacionadalicense: O conteúdo principal do documento atual está coberto pela licença de direitos autorais do arquivo referenciadome: O documento atual representa o proprietário do conteúdo vinculadonext: O documento atual faz parte de uma série, e o documento referenciado é o próximo da sérienofollow: O autor ou editor do documento atual não endossa o arquivo referenciadonoreferrer: Não inclui o cabeçalho Referer. Tem efeito semelhante ao noopeneropener: Se o hiperlink criar um contexto de navegação de nível superior (ou seja, o valor do atributo target for _blank), cria um contexto de navegação auxiliarprev: O documento atual faz parte de uma série, e o documento referenciado é o anterior da sériesearch: Fornece um link para um recurso que pode ser usado para pesquisar o arquivo atual e suas páginas relacionadastag: Fornece uma tag (identificada pelo endereço fornecido) aplicável ao documento atual
Nota: Disponível apenas quando o atributo href é especificado.
|
autofocus | autofocus | | boolean | false |
Define se o elemento deve receber foco automaticamente após o carregamento da página.
|
tabindex | tabIndex | | number | - |
A ordem do elemento ao navegar com a tecla Tab.
|
| Nome | Parâmetros | Retorno |
|---|
click | | void |
Simula um clique do mouse no elemento.
|
focus | options: FocusOptions (Opcional)
| void |
Define o foco no elemento atual.
Você pode passar um objeto como argumento, com as seguintes propriedades:
preventScroll: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como true.
|
blur | | void |
Remove o foco do elemento atual.
|
| Nome |
|---|
focus |
Disparado ao receber foco.
|
blur |
Disparado ao perder o foco.
|
| Atributo | Propriedade | Reflect | Tipo | Padrão |
|---|
value | value | | string | - |
O valor do <mdui-navigation-rail-item> atualmente selecionado.
|
placement | placement | | 'left' | 'right' | 'left' |
Posição da barra de navegação. Os valores possíveis são:
left: Esquerda.right: Direita.
|
alignment | alignment | | 'start' | 'center' | 'end' | 'start' |
Alinhamento dos elementos <mdui-navigation-rail-item>. Os valores possíveis são:
start: Alinhado ao topo.center: Alinhado ao centro.end: Alinhado à base.
|
contained | contained | | boolean | false |
Por padrão, a barra de navegação é exibida em relação ao elemento body. Quando esta propriedade é definida como true, a barra de navegação será exibida em relação ao seu elemento pai.
Nota: Ao definir esta propriedade, deve-se definir manualmente o estilo position: relative; no elemento pai.
|
divider | divider | | boolean | false |
Define se uma linha divisória deve ser adicionada entre a barra de navegação e o conteúdo da página.
|
order | order | | number | - |
A ordem de layout deste componente dentro do <mdui-layout>, em ordem crescente. O valor padrão é 0.
|
| Nome |
|---|
change |
Disparado quando o valor muda.
|
| Nome |
|---|
| (padrão) |
Componentes <mdui-navigation-rail-item>.
|
top |
Elementos no topo.
|
bottom |
Elementos na base.
|
| Nome |
|---|
top |
Contêiner dos elementos do topo.
|
bottom |
Contêiner dos elementos da base.
|
items |
Contêiner dos componentes <mdui-navigation-rail-item>.
|
Capítulo anterior
NavigationDrawer Gaveta de navegação
Próximo capítulo
Radio Radio
