ListLista

El componente Lista es una lista vertical diseñada para mostrar texto o imágenes y facilitar el acceso rápido a la información relevante.

Uso

Importa los componentes cuando los necesites:

import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';

Importa los tipos TypeScript cuando los necesites:

import type { List } from 'mdui/components/list.js';
import type { ListItem } from 'mdui/components/list-item.js';
import type { ListSubheader } from 'mdui/components/list-subheader.js';

Uso:

Subencabezado

Elemento 1

Elemento 2

<mdui-list>
  <mdui-list-subheader>Subencabezado</mdui-list-subheader>
  <mdui-list-item>Elemento 1</mdui-list-item>
  <mdui-list-item>Elemento 2</mdui-list-item>
</mdui-list>

De forma predeterminada, tanto el texto principal como el secundario se muestran completos, independientemente de su longitud. Puedes limitar las líneas del texto principal y secundario con los atributos headline-line y description-line, con un máximo de 3 líneas.

Título Título Título Título Título Título Título Título Título Título Título Título Título Título Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Título Título Título Título Título Título Título Título Título Título Título Título Título Título
    <span slot="description">Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo Texto de apoyo</span>
  </mdui-list-item>
</mdui-list>

Fuente

Contenido lateral

Los atributos icon y end-icon en el componente <mdui-list-item> permiten añadir iconos de Material Icons a la izquierda y derecha del elemento de la lista.

Título

<mdui-list>
  <mdui-list-item icon="people" end-icon="arrow_right">Título</mdui-list-item>
</mdui-list>

Fuente

También puedes añadir elementos a la izquierda y derecha del elemento de la lista mediante los slots icon y end-icon.

Título

<mdui-list>
  <mdui-list-item>
    Título
    <mdui-avatar slot="icon" src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
    <mdui-checkbox slot="end-icon"></mdui-checkbox>
  </mdui-list-item>
</mdui-list>

Fuente

Enlace

Con el atributo href, el elemento de la lista actúa como enlace. También puedes usar download, target y rel.

Título

<mdui-list>
  <mdui-list-item href="https://www.mdui.org" target="_blank">Título</mdui-list-item>
</mdui-list>

Fuente

Estado deshabilitado

Añade el atributo disabled al componente <mdui-list-item> para deshabilitar ese elemento de la lista. En ese caso, los componentes checkbox, radio, switch, etc., dentro del elemento de la lista también se deshabilitarán.

Título

<mdui-list>
  <mdui-list-item disabled>Título</mdui-list-item>
  <mdui-list-item>Título</mdui-list-item>
</mdui-list>

Fuente

Estado activo

Añade el atributo active al componente <mdui-list-item> para activar ese elemento de la lista.

Título

<mdui-list>
  <mdui-list-item active>Título</mdui-list-item>
  <mdui-list-item>Título</mdui-list-item>
</mdui-list>

Fuente

Estado no clicable

El atributo nonclickable al componente <mdui-list-item> elimina el efecto de elevación al pasar el ratón y el efecto de onda al hacer clic en el elemento de la lista.

Título

<mdui-list>
  <mdui-list-item nonclickable>Título</mdui-list-item>
  <mdui-list-item>Título</mdui-list-item>
</mdui-list>

Fuente

Forma redondeada

El atributo rounded al componente <mdui-list-item>, el elemento de la lista tendrá una forma redondeada.

Título

<mdui-list>
  <mdui-list-item rounded>Título</mdui-list-item>
  <mdui-list-item rounded>Título</mdui-list-item>
</mdui-list>

Fuente

Alineación vertical

El atributo alignment en el componente <mdui-list-item>, puedes ajustar la alineación de los elementos laterales con respecto al elemento de la lista. Los valores posibles son:

start: Alineación superior
center: Alineación centrada
end: Alineación inferior

Título

<mdui-list>
  <mdui-list-item alignment="start" description="Texto de apoyo">
    Título
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Texto de apoyo">
    Título
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Texto de apoyo">
    Título
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

Fuente

Contenido personalizado

Usando el slot custom en el componente <mdui-list-item>, puedes personalizar completamente el contenido del elemento de la lista.

prueba

<mdui-list>
  <mdui-list-item>
    <div slot="custom" style="display: flex;">
      <mdui-icon name="people"></mdui-icon>
      <div>prueba</div>
    </div>
  </mdui-list-item>
</mdui-list>

Fuente

`mdui-list-item` API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`headline`	`headline`	`string`	-
Texto principal. También se puede establecer mediante el slot predeterminado.
`headline-line`	`headlineLine`	`1 \| 2 \| 3`	-
Número de líneas del texto principal, se truncará si supera el máximo permitido. Por defecto no hay límite. Los valores posibles son: `1`: Mostrar una línea, truncar si se excede `2`: Mostrar dos líneas, truncar si se excede `3`: Mostrar tres líneas, truncar si se excede
`description`	`description`	`string`	-
Texto secundario. También se puede establecer mediante `slot="description"`.
`description-line`	`descriptionLine`	`1 \| 2 \| 3`	-
Número de líneas del texto secundario, se truncará si supera el máximo permitido. Por defecto no hay límite. Los valores posibles son: `1`: Mostrar una línea, truncar si se excede `2`: Mostrar dos líneas, truncar si se excede `3`: Mostrar tres líneas, truncar si se excede
`icon`	`icon`	`string`	-
Nombre del icono de Material Icons a la izquierda. También se puede establecer mediante `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nombre del icono de Material Icons a la derecha. También se puede establecer mediante `slot="end-icon"`.
`disabled`	`disabled`	`boolean`	`false`
Indica si este elemento de lista está deshabilitado. Cuando está deshabilitado, el elemento de lista se vuelve gris y los `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` dentro de él también se deshabilitan.
`active`	`active`	`boolean`	`false`
Indica si este elemento de lista está activo.
`nonclickable`	`nonclickable`	`boolean`	`false`
Indica si el elemento de lista no es cliqueable. Al activarlo, los `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` dentro del elemento de lista aún pueden interactuar.
`rounded`	`rounded`	`boolean`	`false`
Indica si el elemento de lista tiene esquinas redondeadas.
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'center'`
Alineación vertical del elemento de lista. Los valores posibles son: `start`: Alineado arriba `center`: Centrado `end`: Alineado abajo
`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 actual `author`: Autor del documento o artículo actual `bookmark`: Enlace permanente a la sección contenedora más cercana `external`: El documento referenciado no está en el mismo sitio que el documento actual `help`: Enlace a la documentación de ayuda relacionada `license`: El contenido principal del documento actual está cubierto por la licencia de derechos de autor del documento referenciado `me`: El documento actual representa al propietario del contenido enlazado `next`: El documento actual es parte de una serie y el documento referenciado es el siguiente de la serie `nofollow`: El autor o editor del documento actual no respalda el documento referenciado `noreferrer`: No incluye el encabezado `Referer`. Similar al efecto de `noopener` `opener`: 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 auxiliar `prev`: El documento actual es parte de una serie y el documento referenciado es el anterior de la serie `search`: Proporciona un enlace a un recurso que se puede utilizar para buscar el archivo actual y sus páginas relacionadas `tag`: 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.

Métodos

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.

Eventos

Nombre
`focus`
Se dispara cuando recibe el foco.
`blur`
Se dispara cuando pierde el foco.

Slots

Nombre
(predeterminado)
Texto principal.
`description`
Texto secundario.
`icon`
Elemento a la izquierda del elemento de lista.
`end-icon`
Elemento a la derecha del elemento de lista.
`custom`
Cualquier contenido personalizado.

CSS Parts

Nombre
`container`
Contenedor del elemento de lista.
`icon`
Icono izquierdo.
`end-icon`
Icono derecho.
`body`
Parte central.
`headline`
Título principal.
`description`
Subtítulo.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del elemento de lista. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
`--shape-corner-rounded`
Cuando se especifica el atributo `rounded`, tamaño de la esquina redondeada del elemento de lista. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.

`mdui-list-subheader` API

Slots

Nombre
(predeterminado)
Texto del subencabezado de la lista.

`mdui-list` API

Slots

Nombre
(predeterminado)
Elementos `<mdui-list-item>`.

Capítulo anterior

LinearProgress Progreso lineal

Capítulo siguiente

Menu Menú

ListLista

Uso

Ejemplos

Contenido de texto

Contenido lateral

Enlace

Estado deshabilitado

Estado activo

Estado no clicable

Forma redondeada

Alineación vertical

Contenido personalizado

`mdui-list-item` API

Propiedades

Métodos

Eventos

Slots

CSS Parts

CSS Custom Properties

`mdui-list-subheader` API

Slots

`mdui-list` API

Slots