NavigationRailNavigation Rail
El componente Navigation Rail ofrece una forma cómoda de acceder a distintas páginas principales en tabletas y equipos de escritorio.
Importa los componentes cuando los necesites:
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
Importa los tipos TypeScript cuando los necesites:
import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js';
Uso: (Nota: el style="position: relative" en el ejemplo es solo para demostración; elimina este estilo en uso real.)
Recientes
Imágenes
Biblioteca
<mdui-navigation-rail value="recent" style="position: relative">
<mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Recientes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" value="images">Imágenes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined" value="library">Biblioteca</mdui-navigation-rail-item>
</mdui-navigation-rail>
Notas importantes:
Este componente usa position: fixed por defecto y añade automáticamente padding-left o padding-right al body para evitar que el contenido de la página quede oculto por el componente.
Sin embargo, en los dos casos siguientes, se usará position: absolute por defecto:
- Cuando el atributo
contained del componente <mdui-navigation-rail> es true. En este caso, se añade padding-left o padding-right al elemento padre.
- Cuando está dentro del componente
<mdui-layout></mdui-layout>. En este caso, no se añade padding-left ni padding-right.
Por defecto, el Navigation Rail se muestra en la parte izquierda o derecha de la página, tomando la ventana como referencia. Si quieres colocar el Navigation Rail dentro de un contenedor específico, puedes añadir el atributo contained al componente <mdui-navigation-rail>. En este caso, el Navigation Rail se mostrará tomando como referencia su elemento padre (debes añadir manualmente el estilo position: relative al elemento padre).
Recientes
Imágenes
Biblioteca
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recientes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Imágenes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Biblioteca</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenido de la página</div>
</div>
</div>
Fuente
Con el atributo placement="right" en <mdui-navigation-rail>, el Navigation Rail se muestra a la derecha.
Recientes
Imágenes
Biblioteca
<div style="position: relative">
<mdui-navigation-rail placement="right" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recientes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Imágenes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Biblioteca</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenido de la página</div>
</div>
</div>
Fuente
El atributo divider al componente <mdui-navigation-rail>, se añade una línea divisoria al Navigation Rail para distinguirlo del contenido de la página.
Recientes
Imágenes
Biblioteca
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recientes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Imágenes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Biblioteca</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenido de la página</div>
</div>
</div>
Fuente
También puedes añadir elementos en la parte superior e inferior dentro del componente <mdui-navigation-rail> mediante los slots top y bottom.
Recientes
Imágenes
Biblioteca
<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">Recientes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Imágenes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Biblioteca</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 600px;overflow: auto">
<div style="height: 1000px">Contenido de la página</div>
</div>
</div>
Fuente
Si usas el atributo alignment del componente <mdui-navigation-rail>, puedes modificar la alineación vertical de los elementos de navegación.
Recientes
Imágenes
Biblioteca
inicio
centro
final
<div class="example-alignment" style="position: relative">
<mdui-navigation-rail alignment="start" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recientes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Imágenes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Biblioteca</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">inicio</mdui-segmented-button>
<mdui-segmented-button value="center">centro</mdui-segmented-button>
<mdui-segmented-button value="end">final</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>
Fuente
En <mdui-navigation-rail-item> puedes usar el atributo icon para el icono en estado inactivo y active-icon para el icono en estado activo. También puedes usar los slots icon y active-icon.
Recientes
Imágenes
Biblioteca
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recientes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Imágenes</mdui-navigation-rail-item>
<mdui-navigation-rail-item>
Biblioteca
<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">Contenido de la página</div>
</div>
</div>
Fuente
El componente <mdui-navigation-rail-item> puede usarse solo con el icono, sin 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">Contenido de la página</div>
</div>
</div>
Fuente
Con el atributo href en el componente <mdui-navigation-rail-item>, el elemento de navegación actúa como enlace. También puedes usar download, target y rel.
Recientes
Imágenes
Biblioteca
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item
href="https://www.mdui.org"
target="_blank"
icon="watch_later--outlined"
>Recientes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Imágenes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Biblioteca</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenido de la página</div>
</div>
</div>
Fuente
En el componente <mdui-navigation-rail-item>, puedes añadir un Badge mediante el slot badge.
Recientes
99+
Imágenes
Biblioteca
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">
Recientes
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Imágenes</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Biblioteca</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenido de la página</div>
</div>
</div>
Fuente| Atributo | Propiedad | Reflect | Tipo | Predeterminado |
|---|
icon | icon | | string | - |
Nombre del icono de Material Icons para el estado inactivo. También se puede establecer mediante slot="icon".
|
active-icon | activeIcon | | string | - |
Nombre del icono de Material Icons para el estado activo. También se puede establecer mediante slot="active-icon".
|
value | value | | string | - |
Valor del elemento de navegación.
|
href | href | | string | - |
URL de destino del enlace.
Si se define esta propiedad, el componente se representará como un elemento <a> y podrá usar las propiedades de enlace.
|
download | download | | string | - |
Nombre del archivo para el enlace de descarga.
Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
|
target | target | | '_blank' | '_parent' | '_self' | '_top' | - |
Especifica dónde abrir el enlace. Los valores posibles son:
_blank: Abrir el enlace en una nueva ventana_parent: Abrir el enlace en el marco principal_self: Predeterminado. Abrir el enlace en el marco actual_top: Abrir el enlace en la ventana completa
Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
|
rel | rel | | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - |
Relación entre el documento actual y el documento enlazado. Los valores posibles son:
alternate: Versión alternativa del documento actualauthor: Autor del documento o artículo actualbookmark: Enlace permanente a la sección contenedora más cercanaexternal: El documento referenciado no está en el mismo sitio que el documento actualhelp: Enlace a la documentación de ayuda relacionadalicense: El contenido principal del documento actual está cubierto por la licencia de derechos de autor del documento referenciadome: El documento actual representa al propietario del contenido enlazadonext: El documento actual es parte de una serie y el documento referenciado es el siguiente de la serienofollow: El autor o editor del documento actual no respalda el documento referenciadonoreferrer: No incluye el encabezado Referer. Similar al efecto de noopeneropener: Si el hipervínculo crea un contexto de navegación de nivel superior (es decir, el valor del atributo target es _blank), crea un contexto de navegación auxiliarprev: El documento actual es parte de una serie y el documento referenciado es el anterior de la seriesearch: Proporciona un enlace a un recurso que se puede utilizar para buscar el archivo actual y sus páginas relacionadastag: Proporciona una etiqueta adecuada para el documento actual (identificada por la dirección dada)
Nota: Disponible solo cuando se especifica el atributo href.
|
autofocus | autofocus | | boolean | false |
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
|
tabindex | tabIndex | | number | - |
Orden del elemento al navegar con la tecla Tab.
|
| Nombre | Parámetros | Valor de retorno |
|---|
click | | void |
Simula un clic del ratón en el elemento.
|
focus | options: FocusOptions (Opcional)
| void |
Establece el foco en el elemento actual.
Puede pasarse un objeto como parámetro con las siguientes propiedades:
preventScroll: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como true.
|
blur | | void |
Quita el foco del elemento actual.
|
| Nombre |
|---|
focus |
Se dispara cuando recibe el foco.
|
blur |
Se dispara cuando pierde el foco.
|
| Atributo | Propiedad | Reflect | Tipo | Predeterminado |
|---|
value | value | | string | - |
Valor del <mdui-navigation-rail-item> actualmente seleccionado.
|
placement | placement | | 'left' | 'right' | 'left' |
Posición de la barra de navegación. Los valores posibles son:
left: Izquierdaright: Derecha
|
alignment | alignment | | 'start' | 'center' | 'end' | 'start' |
Alineación de los elementos <mdui-navigation-rail-item>. Los valores posibles son:
start: Alineado arribacenter: Centradoend: Alineado abajo
|
contained | contained | | boolean | false |
De forma predeterminada, el Navigation Rail se muestra relativo al elemento body. Cuando esta propiedad se define como true, el Navigation Rail se mostrará relativo a su elemento padre.
Nota: Al definir esta propiedad, se debe establecer manualmente el estilo en el elemento padre: position: relative;.
|
divider | divider | | boolean | false |
Indica si se debe añadir una línea divisoria entre el Navigation Rail y el contenido de la página.
|
order | order | | number | - |
Orden de layout de este componente dentro de <mdui-layout>, de menor a mayor. El valor predeterminado es 0.
|
| Nombre |
|---|
change |
Se dispara cuando cambia el valor.
|
| Nombre |
|---|
top |
Contenedor del elemento superior.
|
bottom |
Contenedor del elemento inferior.
|
items |
Contenedor de los componentes <mdui-navigation-rail-item>.
|
| Nombre |
|---|
--shape-corner |
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
|
--z-index |
Valor CSS z-index del componente.
|
Capítulo anterior
NavigationDrawer Navigation Drawer
Capítulo siguiente
Radio Radio
