# Visión general Empieza a usar mdui con el CDN de mdui y una plantilla de página sencilla. > ¡Estás leyendo la documentación de mdui 2! > > Para leer la documentación de mdui 1, visita [www.mdui.org/docs/](https://www.mdui.org/docs/). ## Inicio rápido {#getting-started} La forma más sencilla de usar mdui es importar los archivos CSS y JS directamente desde un CDN. Si quieres instalar mdui mediante npm, consulta la sección [Instalación](/es/docs/2/getting-started/installation). **Importar archivos** Agrega el siguiente código a la etiqueta `` de la página: ```html ``` Si necesitas usar el atributo de ícono de los componentes (por ejemplo, `icon="search"` en ``), también debes importar el archivo CSS de íconos. Consulta [Uso de Material Icons](/es/docs/2/components/icon#usage-material-icons). mdui no depende de ninguna biblioteca de terceros; después de importar los archivos anteriores, funcionará correctamente. ## Plantilla de página más simple {#template} Esta es la plantilla de página más simple. Puedes agregar más componentes y contenido para construir un sitio web. ```html ¡Hola, mundo! ¡Hola, mundo! ``` # Instalación Puedes optar por instalar mdui mediante npm o usar mdui desde un CDN. Se recomienda la instalación mediante npm. ## Instalación con npm {#npm} ```bash npm install mdui --save ``` ### Importación completa {#full-import} Importa los dos archivos siguientes en el archivo de entrada del proyecto para usar todos los componentes de mdui: ```js import 'mdui/mdui.css'; import 'mdui'; ``` También puedes importar directamente las funciones que necesitas usar desde mdui. Por ejemplo, para importar la función [`snackbar`](/es/docs/2/functions/snackbar), puedes hacerlo así: ```js import { snackbar } from 'mdui'; ``` Mostrar todas las funciones que se pueden importar desde mdui 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### Importación cuando lo necesites {#cherry-picking} Para optimizar el tamaño del proyecto, puedes importar solo los componentes y funciones que necesitas. Por ejemplo, si solo necesitas el componente [``](/es/docs/2/components/button) y la función [`snackbar`](/es/docs/2/functions/snackbar), puedes importarlos de la siguiente manera: ```js // Siempre se necesita importar el archivo CSS import 'mdui/mdui.css'; // Importar el componente import 'mdui/components/button.js'; // Importar la función snackbar import { snackbar } from 'mdui/functions/snackbar.js'; ``` La página de documentación de cada componente o función detalla cómo realizar la importación cuando lo necesites. Mostrar todos los componentes y funciones que admiten importación cuando lo necesites 
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
 ## CDN {#cdn} Puedes usar mdui directamente mediante CDN con las etiquetas `` y ` Haz clic ``` ### Usando la compilación de ES module {#es-module} El siguiente ejemplo muestra cómo usar la compilación de ES module de mdui. En esta versión puedes usar la sintaxis de ES module para importar mdui desde un CDN: ```html Haz clic ``` # Inicio rápido Los componentes de mdui son Web Components estándar. Puedes usarlos como si fueran etiquetas `
`. La documentación de cada componente describe su API completa, incluidos atributos, propiedades, métodos, eventos, slots, CSS Part y CSS Custom Properties. Este capítulo te introducirá al uso de Web Components. ## Atributos {#attribute} Los atributos se dividen en atributos HTML y propiedades JavaScript. Por lo general, tienen una correspondencia uno a uno y se mantienen sincronizados. Es decir, cuando actualizas el valor de un atributo HTML, el valor de la propiedad JavaScript también se actualiza; y viceversa. Los atributos HTML se pueden establecer directamente en la cadena HTML del componente, y se pueden leer y modificar mediante los métodos `getAttribute` y `setAttribute`: ```html Haz clic ``` Las propiedades JavaScript se pueden leer o establecer directamente en el valor de la propiedad de la instancia del componente: ```html Haz clic ``` Algunos atributos tienen valores booleanos. Para estos atributos, cuando el atributo HTML existe, la propiedad JavaScript es `true`; de lo contrario, es `false`. Sin embargo, por compatibilidad con ciertos frameworks, mdui también considera el valor de cadena `'false'` como el valor booleano `false`. ```html ``` A veces el valor de un atributo puede ser un array, objeto o función. En ese caso, solo existe la propiedad JavaScript, sin su correspondiente atributo HTML. Por ejemplo, la propiedad [`labelFormatter`](/es/docs/2/components/slider#attributes-labelFormatter) del componente [``](/es/docs/2/components/slider) es una función, y solo se puede establecer mediante JavaScript: ```html ``` A modo de ejemplo, tomamos parte de la documentación de atributos del componente [``](/es/docs/2/components/slider): | Atributo HTML | Propiedad JavaScript | reflect | | ------------- | -------------------- | -------------------------------------------------------------------------------------- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | Este componente tiene el atributo `name` tanto como atributo HTML y propiedad JavaScript, y la columna reflect indica que al actualizar la propiedad JavaScript se sincroniza con el atributo HTML. En cambio, al actualizar la propiedad `value` no se actualiza el atributo HTML. La propiedad `labelFormatter` solo existe como propiedad JavaScript. ## Métodos {#method} Algunos componentes ofrecen métodos públicos que puedes invocar para realizar distintas acciones. Por ejemplo, el método [`focus()`](/es/docs/2/components/text-field#methods-focus) del componente [``](/es/docs/2/components/text-field) permite enfocar el campo de texto. ```html ``` Puedes consultar todos los métodos disponibles y sus parámetros en la página de documentación de cada componente. ## Eventos {#event} Algunos componentes activan eventos al realizar ciertas acciones. Por ejemplo, el componente [``](/es/docs/2/components/dialog) activa el evento [`open`](/es/docs/2/components/dialog#events-open) al abrirse. Puedes escuchar este evento para ejecutar acciones personalizadas. ```html Diálogo ``` Puedes consultar todos los eventos disponibles y sus parámetros en la página de documentación de cada componente. Si usas mdui en otros frameworks (como Vue, React o Angular), puedes usar la sintaxis del propio framework para vincular eventos. Sin embargo, algunos frameworks (como React) solo permiten vincular eventos estándar (como el evento `click`), pero no eventos personalizados (como `open`). Por lo tanto, en React, para vincular eventos personalizados, necesitas obtener una referencia al elemento y usar el método `addEventListener`. Para más información sobre el uso de mdui con React, consulta [Integración con frameworks - React](/es/docs/2/frameworks/react). ## Slot {#slot} Muchos componentes ofrecen slots para insertar contenido HTML personalizado en su interior. El más común es el slot por defecto, que es un fragmento de HTML o texto plano dentro del componente. Por ejemplo, el slot por defecto del componente [``](/es/docs/2/components/button) se usa para establecer el texto del botón. En el ejemplo, "Haz clic" es el contenido del slot por defecto: ```html Haz clic ``` Algunos componentes también proporcionan slots con nombre. Los slots con nombre requieren especificar el nombre del slot en el atributo `slot` del HTML. En el siguiente ejemplo, el componente [``](/es/docs/2/components/icon) especifica `slot="start"`, indicando que es un slot con nombre [`start`](/es/docs/2/components/button#slots-icon), es decir, este ícono se insertará en el lado izquierdo del componente: ```html Configuración ``` Si un componente usa múltiples slots con nombre, el orden entre ellos no es importante. Siempre que estén dentro del componente, el navegador los colocará automáticamente en la posición correcta. Puedes consultar todos los slots soportados en la página de documentación de cada componente. ## CSS Custom Properties {#css-custom-properties} Las CSS Custom Properties son variables en CSS. mdui define una serie de [CSS Custom Properties globales](/es/docs/2/styles/design-tokens) que son referenciadas dentro de cada componente, por lo que puedes modificar estas CSS Custom Properties para cambiar globalmente el estilo de los componentes de mdui. Por ejemplo, el siguiente código reduce el tamaño de las esquinas redondeadas de todos los componentes: ```css :root { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` También puedes modificar las CSS Custom Properties en un ámbito local. Por ejemplo, el siguiente código solo reduce el tamaño de las esquinas redondeadas en el elemento con `class="sharp"` y sus elementos hijos: ```css .sharp { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Algunos componentes también ofrecen CSS Custom Properties específicas de ese componente. Como su ámbito es el propio componente, no incluyen el prefijo `--mdui`. Por ejemplo, el siguiente código modifica la propiedad `--z-index` del componente [``](/es/docs/2/components/dialog) para cambiar su estilo `z-index`: ```css mdui-dialog { --z-index: 3000; } ``` Puedes consultar las CSS Custom Properties soportadas por cada componente en su página de documentación. ## CSS Part {#css-part} Los componentes de mdui usan shadow DOM para encapsular estilos y comportamientos, pero los selectores CSS convencionales no pueden seleccionar elementos dentro del shadow DOM. Por lo tanto, algunos componentes añaden el atributo `part` a los elementos del shadow DOM. Puedes usar el selector CSS `::part` para seleccionar esos elementos y sobrescribir parte de su estilo. Por ejemplo, el siguiente código usa el part [`button`](/es/docs/2/components/button#cssParts-button) para modificar el relleno del botón, y los parts [`label`](/es/docs/2/components/button#cssParts-label), [`icon`](/es/docs/2/components/button#cssParts-icon) y [`end-icon`](/es/docs/2/components/button#cssParts-end-icon) para modificar el color del texto y de los íconos izquierdo y derecho: ```html Botón ``` Puedes abrir las herramientas de desarrollo del navegador para inspeccionar la estructura y los estilos predeterminados de los elementos del shadow DOM del componente. Antes de usar CSS Part, debes considerar si las CSS Custom Properties globales y las CSS Custom Properties específicas del componente pueden satisfacer tus necesidades. Si es así, es recomendable usar CSS Custom Properties para personalizar los estilos. Puedes consultar todas las propiedades `part` que un componente expone en su página de documentación. ## Mecanismo de actualización de componentes {#update-mechanism} Los componentes de mdui están desarrollados con [Lit](https://lit.dev/). Lit es una biblioteca ligera que facilita el desarrollo de Web Components. Al usar componentes de mdui, es posible que necesites comprender su mecanismo de renderizado y actualización. Cuando modificas una propiedad de un componente de mdui, este se vuelve a renderizar. Sin embargo, este proceso de re-renderizado no es síncrono. Cuando modificas múltiples propiedades a la vez, Lit almacena en caché estos cambios hasta el siguiente ciclo de actualización, asegurando que cada componente se renderice solo una vez, sin importar cuántas veces se hayan modificado las propiedades. Además, solo se vuelve a renderizar la parte del shadow DOM que ha cambiado. En el siguiente ejemplo, establecemos la propiedad JavaScript `disabled` del botón en `true` y luego consultamos inmediatamente su atributo HTML. Sin embargo, como el componente aún no se ha re-renderizado, el atributo HTML sigue siendo `false`: ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` Para esperar a que termine el re-renderizado después de cambiar una propiedad, puedes usar `updateComplete`. Esta propiedad devuelve una Promise que se resuelve cuando el componente ha terminado de re-renderizarse: ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # Soporte de TypeScript mdui está desarrollado con TypeScript, por lo que ofrece un buen soporte para TypeScript. Todas las bibliotecas oficiales de mdui incluyen sus propios archivos de declaración de tipos y se pueden usar directamente. ## Tipo de instancia de los componentes {#instance} A veces, es posible que necesites declarar una variable JavaScript como una instancia de un componente de mdui. Para ello, puedes importar directamente el tipo de componente correspondiente desde mdui. Por ejemplo, para importar el tipo del componente Tooltip desde el archivo del componente: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` O importar el tipo del componente Tooltip directamente desde mdui: ```ts import type { Tooltip } from 'mdui'; ``` Luego, puedes declarar una variable JavaScript como tipo Tooltip: ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` En ese momento, tu IDE sugerirá automáticamente las propiedades y métodos de la variable `tooltip`. Si agregas un listener de eventos en la variable `tooltip`, también se sugerirán automáticamente el nombre del evento, el tipo de evento y la referencia de `this` dentro de la función callback: ```ts tooltip.addEventListener('open', function (event) {}); ``` ## Tipos de eventos {#event} Cada componente exporta una interfaz que mapea los nombres de los eventos del componente y sus tipos de objeto de evento correspondientes. El nombre de la interfaz es `${nombreDelComponente}EventMap`. Por ejemplo, el componente Tooltip exporta una interfaz llamada `TooltipEventMap`: ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` Puedes importar esta interfaz desde el archivo del componente: ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` O importarla directamente desde mdui: ```ts import type { TooltipEventMap } from 'mdui'; ``` Ten en cuenta que esta interfaz solo contiene los eventos específicos del componente, pero los componentes de mdui heredan de `HTMLElement`, por lo que también admiten los eventos de `HTMLElement`. Puedes usar tipos de intersección para obtener todos los tipos de eventos del componente: ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # Soporte de IDE mdui está optimizado para VS Code y WebStorm; en esos IDE tendrás autocompletado de código y sugerencias emergentes. ## VS Code {#vscode} ### mdui instalado mediante npm {#vscode-npm} Si instalaste mdui mediante npm, puedes habilitar el soporte de IDE de mdui en el proyecto actual siguiendo estos pasos: 1. Crea el directorio `.vscode` en la raíz del proyecto. 2. Crea el archivo `settings.json` dentro del directorio `.vscode`. 3. Agrega el siguiente código al archivo `settings.json`: ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` Si el archivo `settings.json` ya existe, solo necesitas agregar las dos líneas anteriores al nodo raíz del documento JSON. Después de modificar, reinicia VS Code. ### mdui usado mediante CDN {#vscode-cdn} Si usas mdui mediante CDN, puedes instalar la extensión de mdui para VS Code para obtener soporte de IDE. Busca `mdui` en la tienda de extensiones de VS Code, selecciona el primer resultado para instalar, o [haz clic aquí para instalar](vscode:extension/zdhxiong.mdui). Una vez instalada, todos los proyectos tendrán soporte de IDE de mdui. Se recomienda instalarlo mediante npm y configurar el archivo `settings.json` en lugar de instalar la extensión de VS Code, para asegurar que el soporte de IDE esté sincronizado con la versión de mdui que estás utilizando. ## WebStorm {#webstorm} ### mdui instalado mediante npm {#webstorm-npm} Si instalaste mdui mediante npm, puedes habilitar el soporte de IDE de mdui en el proyecto actual siguiendo estos pasos: 1. Agrega el siguiente código al nodo raíz del archivo `package.json` en la raíz del proyecto: ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` Si el nodo raíz del archivo `package.json` ya tiene la propiedad `web-types`, solo necesitas agregar `./node_modules/mdui/web-types.en.json` al array `web-types`. Después de modificar, reinicia WebStorm. ### mdui usado mediante CDN {#webstorm-cdn} Si usas mdui mediante CDN, puedes instalar el plugin de mdui para WebStorm para obtener soporte de IDE. Busca `mdui` en el mercado de plugins de WebStorm, selecciona el primer resultado para instalar. Una vez instalado, todos los proyectos tendrán soporte de IDE de mdui. Se recomienda instalarlo mediante npm para obtener soporte de IDE en lugar de instalar el plugin de WebStorm, para asegurar que el soporte de IDE esté sincronizado con la versión de mdui que estás utilizando. ## Diferencias en el soporte entre VS Code y WebStorm {#difference} El soporte de mdui para VS Code y WebStorm tiene algunas diferencias. La siguiente tabla detalla las diferencias: | Ubicaciones con autocompletado de código y sugerencias emergentes | VS Code | WebStorm | | ----------------------------------------------------------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | Nombres de etiquetas HTML | | | | Nombres de atributos en etiquetas HTML | | | | Valores de enumeración de atributos en etiquetas HTML | | (no admite mostrar comentarios de valores de enumeración) | | Nombres de eventos en etiquetas HTML | | | | Valores del atributo `name` de slot en HTML | | | | Nombre de la propiedad `part` en el selector `::part()` de CSS | | | | Nombres de CSS Custom Property dentro de los componentes en CSS | | | | Nombres de CSS Custom Property globales en CSS | | | | Nombres de clases globales en CSS | | | # Localización Por defecto, mdui usa inglés internamente. Si necesitas usar otro idioma, debes configurar la localización. ## Uso {#usage} mdui ofrece tres funciones para implementar la localización: - [`loadLocale`](/es/docs/2/functions/loadLocale): Carga el paquete de idioma. El parámetro es una función que recibe un código de idioma y devuelve una Promise que se resuelve con el paquete de idioma correspondiente cuando se completa la carga. Asegúrate de llamar a esta función en el archivo de entrada del proyecto. - [`setLocale`](/es/docs/2/functions/setLocale): Cambia al idioma especificado. El parámetro es el nuevo código de idioma. Devuelve una Promise que se resuelve cuando se completa la carga del nuevo paquete de idioma. - [`getLocale`](/es/docs/2/functions/getLocale): Obtiene el código de idioma actual. Uso: ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // Llama a loadLocale en la entrada del proyecto para cargar los paquetes de idioma loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // Llama a esta función cuando necesites cambiar de idioma. Después de que la Promise se resuelva, el cambio de idioma se habrá completado setLocale('zh-cn').then(() => { // Llamando a getLocale se obtiene el código de idioma actual console.log(getLocale()); // zh-cn }); ``` ## Evento de estado {#event} Al inicio, finalización o fallo del cambio de idioma, se dispara el evento `mdui-localize-status` en `window`. Puedes escuchar este evento para realizar acciones personalizadas, como escribir el código de idioma en una cookie después de un cambio exitoso. La propiedad `detail.status` del evento describe qué cambio de estado ha ocurrido. Los valores posibles son: `loading`, `ready`, `error`:
detail.status Descripción
loading

Comienza a cargar un nuevo paquete de idioma.

El objeto detail contiene:

  • loadingLocale: el código de idioma que se está cargando.
ready

El nuevo paquete de idioma se cargó correctamente.

El objeto detail contiene:

  • readyLocale: el código de idioma que se cargó correctamente.
error

Falló la carga del nuevo paquete de idioma.

El objeto detail contiene:

  • errorLocale: el código de idioma que falló al cargarse.
  • errorMessage: mensaje de error de la carga fallida.
Uso: ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log( `Comenzando a cargar el nuevo paquete de idioma: ${event.detail.loadingLocale}`, ); } else if (event.detail.status === 'ready') { console.log( `Nuevo paquete de idioma ${event.detail.readyLocale} cargado correctamente`, ); } else if (event.detail.status === 'error') { console.error( `Falló la carga del nuevo paquete de idioma ${event.detail.errorLocale}: ${event.detail.errorMessage}`, ); } }); ``` ## Métodos de carga del paquete de idioma {#load-locale} ### Carga perezosa {#lazy-load} Usar [importación dinámica](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) permite descargar el paquete de idioma correspondiente solo cuando se cambia a ese idioma. Este es el método más recomendado. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### Precarga {#pre-load} Descarga todos los paquetes de idioma necesarios al cargar la página. Esto evita tener que descargarlos al cambiar de idioma, haciendo que el cambio sea más rápido. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; const localizedTemplates = new Map([ ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)], ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ### Importación estática {#static-imports} Usar este método permite empaquetar todos los paquetes de idioma necesarios junto con el código de tu proyecto en un solo archivo, sin necesidad de descargas adicionales. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import * as locale_zh_cn from 'mdui/locales/zh-cn.js'; import * as locale_zh_tw from 'mdui/locales/zh-tw.js'; const localizedTemplates = new Map([ ['zh-cn', locale_zh_cn], ['zh-tw', locale_zh_tw], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ## Cargar paquetes de idioma mediante CDN {#cdn} Si usas mdui mediante CDN, puedes cargar los paquetes de idioma directamente desde el CDN. Uso: ```html ``` ## Idiomas soportados {#languages} Actualmente, mdui soporta los siguientes idiomas: | Idioma | Código de idioma | | ----------------------------- | ---------------- | | Árabe | ar-eg | | Azerbaiyano | az-az | | Búlgaro | bg-bg | | Bengalí (Bangladesh) | bn-bd | | Bielorruso | be-by | | Catalán | ca-es | | Checo | cs-cz | | Danés | da-dk | | Alemán | de-de | | Griego | el-gr | | Inglés | en-gb | | Inglés (Estados Unidos) | en-us | | Español | es-es | | Estonio | et-ee | | Persa | fa-ir | | Finés | fi-fi | | Francés (Bélgica) | fr-be | | Francés (Canadá) | fr-ca | | Francés (Francia) | fr-fr | | Irlandés | ga-ie | | Gallego (España) | gl-es | | Hebreo | he-il | | Hindi | hi-in | | Croata | hr-hr | | Húngaro | hu-hu | | Armenio | hy-am | | Indonesio | id-id | | Italiano | it-it | | Islandés | is-is | | Japonés | ja-jp | | Georgiano | ka-ge | | Jemer | km-kh | | Kurdo del norte | kmr-iq | | Canarés | kn-in | | Kazajo | kk-kz | | Coreano | ko-kr | | Lituano | lt-lt | | Letón | lv-lv | | Macedonio | mk-mk | | Malayalam | ml-in | | Mongol | mn-mn | | Malayo (Malasia) | ms-my | | Noruego | nb-no | | Nepalí | ne-np | | Neerlandés (Bélgica) | nl-be | | Neerlandés | nl-nl | | Polaco | pl-pl | | Portugués (Brasil) | pt-br | | Portugués | pt-pt | | Rumano | ro-ro | | Ruso | ru-ru | | Eslovaco | sk-sk | | Serbio | sr-rs | | Esloveno | sl-si | | Sueco | sv-se | | Tamil | ta-in | | Tailandés | th-th | | Turco | tr-tr | | Urdu (Pakistán) | ur-pk | | Ucraniano | uk-ua | | Vietnamita | vi-vn | | Chino simplificado | zh-cn | | Chino tradicional (Hong Kong) | zh-hk | | Chino tradicional (Taiwán) | zh-tw | ## Contribuir con nuevas traducciones {#contribute} Para contribuir con nuevas traducciones o mejorar las existentes, envía un Pull Request en Github. Los paquetes de idioma se encuentran en [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff). Puedes editar directamente en Github. # Preguntas frecuentes Aquí tienes algunas preguntas frecuentes de la comunidad de mdui y sus respuestas oficiales. Antes de hacer una pregunta, conviene comprobar si ya existe un problema similar. ## ¿Por qué no se muestra el componente al usar etiquetas auto-cerradas? {#no-self-closing} mdui es una biblioteca basada en Web Components, y esta especificación no admite etiquetas autocerradas. Asegúrate de usar siempre la etiqueta de cierre en los componentes de mdui. ```html ``` ## ¿Cómo ocultar los componentes antes de que terminen de cargarse? {#waiting-load} Dado que los componentes de mdui se registran mediante JavaScript, antes de que se cargue el archivo JS y se registren los componentes, estos pueden mostrarse temporalmente sin estilos. Los siguientes dos métodos pueden resolver este problema: Un método es usar la pseudo-clase CSS [`:defined`](https://developer.mozilla.org/es/docs/Web/CSS/Reference/Selectors/:defined) para ocultar los componentes de mdui no registrados. El siguiente código CSS ocultará todos los componentes de mdui no registrados y los mostrará inmediatamente después de que se registren: ```css :not(:defined) { visibility: hidden; } ``` Otro método es usar el método [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined) de JavaScript. Este método devuelve una promesa que se resuelve cuando el componente especificado se ha registrado. Si quieres contemplar los casos en los que algún componente no llegue a cargarse por motivos concretos, puedes usar [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled). El siguiente ejemplo oculta primero el `` con `opacity: 0`, y luego hace que la página se desvanezca después de que los componentes se hayan registrado. Además, el ejemplo usa `Promise.allSettled()` para esperar a que todas las promesas se completen, asegurando que la página se muestre correctamente incluso si algún componente no se puede cargar: ```html ``` # LLMs.txt mdui ofrece `llms.txt` y `llms-full.txt` para dar a los LLM (grandes modelos de lenguaje) un contexto preciso y fácil de referenciar, lo que ayuda a la IA a responder preguntas sobre mdui con mayor fiabilidad. ## Usar llms.txt para proporcionar contexto a la IA {#context} Dos puntos de entrada: - `llms.txt`: https://www.mdui.org/es/docs/2/llms.txt - `llms-full.txt`: https://www.mdui.org/es/docs/2/llms-full.txt `llms.txt` es un índice simplificado, adecuado para modelos con acceso a la red que necesitan recuperar las páginas Markdown necesarias mediante enlaces, o para ofrecer primero una visión general del proyecto. `llms-full.txt` reúne el contexto completo, incluido todo el contenido de las páginas listadas en `llms.txt`, y resulta adecuado para modelos sin acceso a la red o cuando necesitas proporcionar todo el contexto de una sola vez. ## Versión Markdown de la documentación {#md-mirror} Cada página de documentación tiene una versión Markdown correspondiente: simplemente añade `.md` al final de la URL de la página (añade `index.md` para la página de inicio). Por ejemplo: https://www.mdui.org/es/docs/2/components/button → https://www.mdui.org/es/docs/2/components/button.md https://www.mdui.org/es/docs/2/ → https://www.mdui.org/es/docs/2/index.md Puedes usar directamente el enlace en Markdown o su versión en texto plano como contexto para obtener respuestas más precisas y centradas. ## Cómo usar en ChatGPT, Claude y otros LLM {#how-to-use} Dependiendo de si el modelo admite conectividad a la red o carga de archivos, elige una o una combinación de las siguientes opciones: 1. Pegar directamente: Pega el contenido de `llms-full.txt` como mensaje de sistema o primer mensaje. Ejemplo: "A continuación tienes el contexto de mdui. Responde a las siguientes preguntas basándote estrictamente en él; si hay algún conflicto, este contexto prevalece: \n\n[pegar contenido de llms-full.txt]". 2. Subir archivo: Sube `llms-full.txt` (o `llms.txt`) y en el primer mensaje indica "usar el archivo adjunto como contexto principal". Ejemplo: "Basándote en la documentación de mdui del archivo adjunto, proporciona el uso y los errores comunes de ``". 3. Leer en línea: Proporciona el enlace a `llms.txt` o `llms-full.txt` en la conversación. Ejemplo: "Por favor, lee y sigue https://www.mdui.org/es/docs/2/llms-full.txt como contexto para responder mis preguntas sobre mdui". 4. Apuntar a una página específica: Si solo se discute un componente/función en particular, proporciona directamente la dirección Markdown de esa página. Ejemplo: "Por favor, lee https://www.mdui.org/es/docs/2/components/button.md y, basándote en ese documento, proporciona tres mejores prácticas". **Consejo**: Puedes hacer clic en el icono en la esquina superior derecha de la página para copiar los enlaces anteriores, abrir la versión Markdown de la página actual, o abrir la página actual o `llms-full.txt` como contexto en ChatGPT. # MCP Server mdui ofrece un servidor [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) dedicado, `@mdui/mcp`, para consultar componentes, iconos, propiedades CSS personalizadas y documentación desde agentes de IA en local. Funciona con herramientas de desarrollo como Claude Code, Cursor y GitHub Copilot para facilitar la generación de código y aprovechar mejor los componentes y estilos de mdui. ## Herramientas {#tools} El servidor MCP de mdui expone las siguientes herramientas a los agentes de IA: - `list_components`: Lista todos los componentes de mdui. - `get_component_metadata`: Obtiene los metadatos detallados de la API de un solo componente. - `list_css_classes`: Lista los nombres de clases CSS globales. - `list_css_variables`: Lista las propiedades personalizadas CSS globales. - `list_documents`: Lista todos los documentos. - `get_document`: Obtiene el contenido completo de un solo documento. - `list_icon_codes`: Lista los códigos de iconos disponibles para usar en atributos o API. - `list_icon_components`: Lista los componentes de iconos independientes y sus declaraciones de importación ESM. ## Uso {#usage} El servidor MCP solo admite [transporte stdio](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio) y puede usarse directamente en clientes como VS Code, Cursor, Claude Code, Windsurf, Zed, y en agentes de IA que admitan el protocolo stdio. ### VS Code {#vscode} > Asegúrate de tener instaladas las extensiones [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) y [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat). 1. Crea el directorio `.vscode` en la raíz del proyecto y dentro crea el archivo `mcp.json`, añadiendo la siguiente configuración: ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Haz clic en el botón "Iniciar" dentro del archivo `mcp.json`. 3. Comienza a conversar en GitHub Copilot Chat. ### Cursor {#cursor} 1. Crea o edita `.cursor/mcp.json` en la raíz del proyecto, añadiendo la siguiente configuración: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Ve a Settings > Cursor Settings > MCP & Integrations, y habilita el servidor mdui. 3. Comienza a conversar en Cursor Chat. ### Claude Code {#claude-code} 1. Ejecuta el siguiente comando en la terminal para añadir el servidor MCP de mdui: ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. Luego ejecuta `claude` para iniciar la sesión. 3. Escribe un mensaje para comenzar a usarlo. ### Windsurf {#windsurf} 1. Ve a Settings > Windsurf Settings > Cascade 2. Haz clic en Manage MCPs, luego en "View raw config", y añade la siguiente configuración al archivo: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > Si el servidor MCP no aparece automáticamente, puedes hacer clic en Refresh para actualizar la lista. 3. Comienza a conversar. ### Zed {#zed} 1. Abre Settings > Open Settings, y añade la siguiente configuración al archivo `settings.json`: ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Comienza a usarlo. ### Cliente MCP personalizado {#custom} Cuando uses un cliente MCP personalizado en un entorno local o de desarrollo, añade el servidor al archivo de configuración del cliente. Por ejemplo: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # Modo oscuro Todos los componentes de mdui son compatibles con el modo oscuro y admiten el cambio automático de tema según la configuración del sistema operativo. Puedes hacer clic en el ícono en la esquina superior derecha de la página de documentación en cualquier momento para cambiar de tema y ver cómo se ven los diferentes componentes en cada tema. Para usar el modo oscuro, simplemente agrega la clase `mdui-theme-dark` a la etiqueta ``: ```html ``` Para que el tema cambie automáticamente según la configuración del sistema operativo, agrega la clase `mdui-theme-auto` a la etiqueta ``: ```html ``` También puedes usar diferentes temas en diferentes partes de la página. Por ejemplo, en el siguiente ejemplo, se establece el modo oscuro en ``, pero se agrega la clase `mdui-theme-light` a un `
` dentro de la página, de modo que los elementos dentro de ese div se muestren en modo claro, mientras que el resto de la página permanece en modo oscuro: ```html
``` Además de agregar clases CSS directamente, mdui ofrece dos funciones para manipular el tema más fácilmente: - [`getTheme`](/es/docs/2/functions/getTheme): Obtiene el tema de la página actual o de un elemento específico. - [`setTheme`](/es/docs/2/functions/setTheme): Establece el tema en la página actual o en un elemento específico. --- Ten en cuenta que mdui establece los estilos `color` y `background-color` en los selectores `:root`, `.mdui-theme-light`, `.mdui-theme-dark` y `.mdui-theme-auto`. Si no te gustan estos estilos predeterminados, puedes sobrescribirlos. El siguiente ejemplo establece el fondo de la página en blanco puro y el texto en negro puro en modo claro; y en modo oscuro, el fondo en negro puro y el texto en blanco puro: ```css :root, .mdui-theme-light { color: #000; background-color: #fff; } .mdui-theme-dark { color: #fff; background-color: #000; } @media (prefers-color-scheme: dark) { .mdui-theme-auto { color: #fff; background-color: #000; } } ``` # Color dinámico mdui ofrece la función de Color dinámico. Solo necesitas proporcionar un color y mdui generará automáticamente un Esquema de colores completo. Además, mdui puede extraer el color principal de un fondo de pantalla concreto para generar el Esquema de colores. Puedes hacer clic en el ícono en la esquina superior derecha de la página de documentación en cualquier momento para cambiar el Esquema de colores y ver cómo se muestran los diferentes componentes con cada Esquema de colores. Un Esquema de colores es en realidad un conjunto de CSS Custom Properties. Los valores de color en los componentes de mdui hacen referencia a este conjunto de CSS Custom Properties, por lo que se puede actualizar el Esquema de colores de todos los componentes a la vez. Para obtener una lista completa de las CSS Custom Properties, consulta [Design Tokens - Color](/es/docs/2/styles/design-tokens#color). ## Generar un Esquema de colores {#color-scheme} Puedes usar la función [`setColorScheme`](/es/docs/2/functions/setColorScheme) para generar un Esquema de colores. Esta función acepta un valor de color hexadecimal, genera un Esquema de colores y establece el elemento `` de la página con ese Esquema de colores. Por ejemplo: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Genera un Esquema de colores a partir de #0061a4 y establece con ese Esquema de colores setColorScheme('#0061a4'); ``` También puedes definir la propiedad `target` en el segundo parámetro para indicar en qué elemento establecer el Esquema de colores. Por ejemplo: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Genera un Esquema de colores a partir de #0061a4 y establece el elemento.foo con ese Esquema de colores setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` Por defecto, el Esquema de colores generado solo incluye los colores enumerados en [Design Tokens - Color](/es/docs/2/styles/design-tokens#color). También puedes definir la propiedad `customColors` en el segundo parámetro. mdui generará un conjunto de grupos de colores personalizados según los nombres de color personalizados y los valores que proporciones. Por ejemplo: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Genera un Esquema de colores a partir de #0061a4, modifica el valor del grupo de colores error existente y agrega un nuevo grupo de colores music setColorScheme('#0061a4', { customColors: [ { name: 'error', value: '#69F0AE', }, { name: 'music', value: '#FFC107', }, ], }); ``` Un grupo de colores personalizado contiene cuatro CSS Custom Properties: - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` Donde `{name}` es el nombre del campo `name` en `customColors` que proporcionaste, es decir, el nombre del color personalizado. El nombre del color personalizado puede ser uno de los nombres de color existentes en el Esquema de colores predeterminado, como `primary`, `secondary`, `tertiary`, `error`, que ya están incluidos en el Esquema de colores predeterminado. Si especificas uno de estos valores como nombre de color personalizado, las cuatro CSS Custom Properties correspondientes en el Esquema de colores generado usarán el valor de color que proporcionaste. Por ejemplo, en el ejemplo anterior se especificó el nombre de color personalizado `error`. Dado que `error` es un nombre de color existente en el Esquema de colores predeterminado y sus CSS Custom Properties correspondientes son utilizadas por los componentes de mdui para indicar el estado de error, ahora que el valor de color se establece en un valor verde, el estado de error en los componentes de mdui también se volverá verde. El nombre del color personalizado también puede ser nuevo, como `music` en el ejemplo anterior, que no existe en el Esquema de colores predeterminado. En ese caso, el Esquema de colores generado incluirá cuatro CSS Custom Properties adicionales. Puedes hacer referencia a estas CSS Custom Properties en tus propios estilos: ```html
Music
Music Container
``` También puedes usar la función [`removeColorScheme`](/es/docs/2/functions/removeColorScheme) para eliminar el Esquema de colores generado mediante el método anterior. Puedes pasar un parámetro para especificar de qué elemento eliminar el Esquema de colores; de forma predeterminada, lo eliminará de ``. ## Extraer color de un fondo de pantalla {#from-wallpaper} mdui ofrece la función [`getColorFromImage`](/es/docs/2/functions/getColorFromImage) para extraer el color principal de una instancia de `Image` dada. Esta función devuelve una Promise que se resuelve en el valor de color hexadecimal extraído. Puedes usar el valor de color obtenido de esta función y luego llamar a la función [`setColorScheme`](/es/docs/2/functions/setColorScheme) descrita anteriormente para establecer el Esquema de colores. Por ejemplo: ```js import { getColorFromImage } from 'mdui/functions/getColorFromImage.js'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; const image = new Image(); image.src = 'image1.png'; getColorFromImage(image).then((color) => setColorScheme(color)); ``` # Tipografía mdui ofrece las clases CSS `mdui-prose` y `mdui-table`, pensadas para mejorar el estilo de artículos y tablas. ## Estilo de artículos {#prose} Puedes agregar la clase `mdui-prose` al elemento padre del artículo para optimizar la visualización de todo el artículo, incluido el estilo de las tablas `` dentro del artículo. Por ejemplo: ```html

Título

Texto del párrafo

``` ## Estilo de tablas {#table} Agregando la clase `mdui-table` al elemento `` se optimiza el estilo de la tabla. Por ejemplo: ```html
``` Si quieres que la tabla se desplace horizontalmente dentro de su elemento padre, puedes agregar la clase `mdui-table` al elemento padre de la ``. Por ejemplo: ```html
``` # Design Tokens Los Design Tokens son una estrategia para gestionar sistemas de diseño. Abstraen todos los elementos reutilizables en un sistema de diseño (como colores, fuentes, espaciados, etc.) en variables independientes para su gestión y aplicación uniforme en todo el sistema de diseño. mdui utiliza CSS Custom Properties globales para implementar los Design Tokens. Esto significa que solo necesitas modificar las CSS Custom Properties para cambiar globalmente el estilo de todos los componentes de mdui. Al mismo tiempo, para tus propios estilos, también se recomienda hacer referencia a estas CSS Custom Properties para asegurar que tus estilos se mantengan uniformes con los componentes de mdui. Además, al modificar el Color dinámico, tus propios estilos también se actualizarán simultáneamente. ## Color {#color} mdui ofrece un conjunto de CSS Custom Properties para el modo claro y otro para el modo oscuro. En el modo claro, el nombre de la CSS Custom Property es `--mdui-color-{name}-light`, donde `{name}` es el nombre del color; en el modo oscuro es `--mdui-color-{name}-dark`. Además, mdui ofrece un conjunto de CSS Custom Properties llamadas `--mdui-color-{name}`. En el modo claro, estas propiedades hacen referencia a `--mdui-color-{name}-light`, y en el modo oscuro a `--mdui-color-{name}-dark`, por lo que el color cambia automáticamente según el modo claro u oscuro. Si necesitas modificar el valor de algunas CSS Custom Properties de color, debes modificar tanto `--mdui-color-{name}-light` como `--mdui-color-{name}-dark`. Para leer el valor de la CSS Custom Property, usa directamente la propiedad `--mdui-color-{name}`. El valor de las CSS Custom Properties son los tres componentes RGB separados por comas `,`. El siguiente ejemplo muestra el uso de las CSS Custom Properties de color: ```css /* Modificar el valor del color primary */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* Establecer el color de fondo del elemento.foo a primary */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* Establecer el color de fondo del elemento.bar a primary con 0.8 de opacidad */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` Si necesitas crear un Esquema de colores completamente nuevo, se recomienda usar la función [`setColorScheme`](/es/docs/2/functions/setColorScheme), que genera un esquema de colores completo a partir de un valor de color dado.
Nombre del color CSS Custom Property Valor por defecto Ejemplo
Primary --mdui-color-primary-light 103, 80, 164
--mdui-color-primary-dark 208, 188, 255
--mdui-color-primary
Primary container --mdui-color-primary-container-light 234, 221, 255
--mdui-color-primary-container-dark 79, 55, 139
--mdui-color-primary-container
On primary --mdui-color-on-primary-light 255, 255, 255
--mdui-color-on-primary-dark 55, 30, 115
--mdui-color-on-primary
On primary container --mdui-color-on-primary-container-light 33, 0, 94
--mdui-color-on-primary-container-dark 234, 221, 255
--mdui-color-on-primary-container
Inverse primary --mdui-color-inverse-primary-light 208, 188, 255
--mdui-color-inverse-primary-dark 103, 80, 164
--mdui-color-inverse-primary
Secondary --mdui-color-secondary-light 98, 91, 113
--mdui-color-secondary-dark 204, 194, 220
--mdui-color-secondary
Secondary container --mdui-color-secondary-container-light 232, 222, 248
--mdui-color-secondary-container-dark 74, 68, 88
--mdui-color-secondary-container
On secondary --mdui-color-on-secondary-light 255, 255, 255
--mdui-color-on-secondary-dark 51, 45, 65
--mdui-color-on-secondary
On secondary container --mdui-color-on-secondary-container-light 30, 25, 43
--mdui-color-on-secondary-container-dark 232, 222, 248
--mdui-color-on-secondary-container
Tertiary --mdui-color-tertiary-light 125, 82, 96
--mdui-color-tertiary-dark 239, 184, 200
--mdui-color-tertiary
Tertiary container --mdui-color-tertiary-container-light 255, 216, 228
--mdui-color-tertiary-container-dark 99, 59, 72
--mdui-color-tertiary-container
On tertiary --mdui-color-on-tertiary-light 255, 255, 255
--mdui-color-on-tertiary-dark 73, 37, 50
--mdui-color-on-tertiary
On tertiary container --mdui-color-on-tertiary-container-light 55, 11, 30
--mdui-color-on-tertiary-container-dark 255, 216, 228
--mdui-color-on-tertiary-container
Surface --mdui-color-surface-light 254, 247, 255
--mdui-color-surface-dark 20, 18, 24
--mdui-color-surface
Surface dim --mdui-color-surface-dim-light 222, 216, 225
--mdui-color-surface-dim-dark 20, 18, 24
--mdui-color-surface-dim
Surface bright --mdui-color-surface-bright-light 254, 247, 255
--mdui-color-surface-bright-dark 59, 56, 62
--mdui-color-surface-bright
Surface container lowest --mdui-color-surface-container-lowest-light 255, 255, 255
--mdui-color-surface-container-lowest-dark 15, 13, 19
--mdui-color-surface-container-lowest
Surface container low --mdui-color-surface-container-low-light 247, 242, 250
--mdui-color-surface-container-low-dark 29, 27, 32
--mdui-color-surface-container-low
Surface container --mdui-color-surface-container-light 243, 237, 247
--mdui-color-surface-container-dark 33, 31, 38
--mdui-color-surface-container
Surface container high --mdui-color-surface-container-high-light 236, 230, 240
--mdui-color-surface-container-high-dark 43, 41, 48
--mdui-color-surface-container-high
Surface container highest --mdui-color-surface-container-highest-light 230, 224, 233
--mdui-color-surface-container-highest-dark 54, 52, 59
--mdui-color-surface-container-highest
Surface variant --mdui-color-surface-variant-light 231, 224, 236
--mdui-color-surface-variant-dark 73, 69, 79
--mdui-color-surface-variant
On surface --mdui-color-on-surface-light 28, 27, 31
--mdui-color-on-surface-dark 230, 225, 229
--mdui-color-on-surface
On surface variant --mdui-color-on-surface-variant-light 73, 69, 78
--mdui-color-on-surface-variant-dark 202, 196, 208
--mdui-color-on-surface-variant
Inverse surface --mdui-color-inverse-surface-light 49, 48, 51
--mdui-color-inverse-surface-dark 230, 225, 229
--mdui-color-inverse-surface
Inverse on surface --mdui-color-inverse-on-surface-light 244, 239, 244
--mdui-color-inverse-on-surface-dark 49, 48, 51
--mdui-color-inverse-on-surface
Background --mdui-color-background-light 254, 247, 255
--mdui-color-background-dark 20, 18, 24
--mdui-color-background
On background --mdui-color-on-background-light 28, 27, 31
--mdui-color-on-background-dark 230, 225, 229
--mdui-color-on-background
Error --mdui-color-error-light 179, 38, 30
--mdui-color-error-dark 242, 184, 181
--mdui-color-error
Error container --mdui-color-error-container-light 249, 222, 220
--mdui-color-error-container-dark 140, 29, 24
--mdui-color-error-container
On error --mdui-color-on-error-light 255, 255, 255
--mdui-color-on-error-dark 96, 20, 16
--mdui-color-on-error
On error container --mdui-color-on-error-container-light 65, 14, 11
--mdui-color-on-error-container-dark 249, 222, 220
--mdui-color-on-error-container
Outline --mdui-color-outline-light 121, 116, 126
--mdui-color-outline-dark 147, 143, 153
--mdui-color-outline
Outline variant --mdui-color-outline-variant-light 196, 199, 197
--mdui-color-outline-variant-dark 68, 71, 70
--mdui-color-outline-variant
Shadow --mdui-color-shadow-light 0, 0, 0
--mdui-color-shadow-dark 0, 0, 0
--mdui-color-shadow
Surface tint --mdui-color-surface-tint-color-light 103, 80, 164
--mdui-color-surface-tint-color-dark 208, 188, 255
--mdui-color-surface-tint-color
Scrim --mdui-color-scrim-light 0, 0, 0
--mdui-color-scrim-dark 0, 0, 0
--mdui-color-scrim
## Shape Corner {#shape-corner} mdui ofrece 7 tamaños de esquinas redondeadas. A continuación se muestra un ejemplo de cómo usar estas CSS Custom Properties de esquinas: ```css /* Modificar el tamaño de la esquina extra-small */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* Establecer el borde redondeado del elemento.foo a extra-small */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | CSS Custom Property | Valor por defecto | Ejemplo | | --------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------- | | `--mdui-shape-corner-none` | `0` |
| | `--mdui-shape-corner-extra-small` | `0.25rem` |
| | `--mdui-shape-corner-small` | `0.5rem` |
| | `--mdui-shape-corner-medium` | `0.75rem` |
| | `--mdui-shape-corner-large` | `1rem` |
| | `--mdui-shape-corner-extra-large` | `1.75rem` |
| | `--mdui-shape-corner-full` | `1000rem` |
| ## Typescale {#typescale} mdui ofrece 15 estilos de texto diferentes, incluyendo Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small. Uso: ```css /* Modificar el estilo de texto Body large */ :root { --mdui-typescale-body-large-line-height: 1.6rem; --mdui-typescale-body-large-size: 1.2rem; --mdui-typescale-body-large-tracking: 0.01rem; --mdui-typescale-body-large-weight: 400; } /* Establecer el estilo de texto del elemento.foo a Body large */ .foo { line-height: var(--mdui-typescale-body-large-line-height); font-size: var(--mdui-typescale-body-large-size); letter-spacing: var(--mdui-typescale-body-large-tracking); font-weight: var(--mdui-typescale-body-large-weight); } ```
CSS Custom Property Valor por defecto Ejemplo
--mdui-typescale-display-large-line-height 4rem
Display large
--mdui-typescale-display-large-size 3.5625rem
--mdui-typescale-display-large-tracking 0
--mdui-typescale-display-large-weight 400
--mdui-typescale-display-medium-line-height 3.25rem
Display medium
--mdui-typescale-display-medium-size 2.8125rem
--mdui-typescale-display-medium-tracking 0
--mdui-typescale-display-medium-weight 400
--mdui-typescale-display-small-line-height 2.75rem
Display small
--mdui-typescale-display-small-size 2.25rem
--mdui-typescale-display-small-tracking 0
--mdui-typescale-display-small-weight 400
--mdui-typescale-headline-large-line-height 2.5rem
Headline large
--mdui-typescale-headline-large-size 2rem
--mdui-typescale-headline-large-tracking 0
--mdui-typescale-headline-large-weight 400
--mdui-typescale-headline-medium-line-height 2.25rem
Headline medium
--mdui-typescale-headline-medium-size 1.75rem
--mdui-typescale-headline-medium-tracking 0
--mdui-typescale-headline-medium-weight 400
--mdui-typescale-headline-small-line-height 2rem
Headline small
--mdui-typescale-headline-small-size 1.5rem
--mdui-typescale-headline-small-tracking 0
--mdui-typescale-headline-small-weight 400
--mdui-typescale-title-large-line-height 1.75rem
Title large
--mdui-typescale-title-large-size 1.375rem
--mdui-typescale-title-large-tracking 0
--mdui-typescale-title-large-weight 400
--mdui-typescale-title-medium-line-height 1.5rem
Title medium
--mdui-typescale-title-medium-size 1rem
--mdui-typescale-title-medium-tracking 0.009375rem
--mdui-typescale-title-medium-weight 500
--mdui-typescale-title-small-line-height 1.25rem
Title small
--mdui-typescale-title-small-size 0.875rem
--mdui-typescale-title-small-tracking 0.00625rem
--mdui-typescale-title-small-weight 500
--mdui-typescale-label-large-line-height 1.25rem
Label large
--mdui-typescale-label-large-size 0.875rem
--mdui-typescale-label-large-tracking 0.00625rem
--mdui-typescale-label-large-weight 500
--mdui-typescale-label-medium-line-height 1rem
Label medium
--mdui-typescale-label-medium-size 0.75rem
--mdui-typescale-label-medium-tracking 0.03125rem
--mdui-typescale-label-medium-weight 500
--mdui-typescale-label-small-line-height 0.375rem
Label small
--mdui-typescale-label-small-size 0.6875rem
--mdui-typescale-label-small-tracking 0.03125rem
--mdui-typescale-label-small-weight 500
--mdui-typescale-body-large-line-height 1.5rem
Body large
--mdui-typescale-body-large-size 1rem
--mdui-typescale-body-large-tracking 0.009375rem
--mdui-typescale-body-large-weight 400
--mdui-typescale-body-medium-line-height 1.25rem
Body medium
--mdui-typescale-body-medium-size 0.875rem
--mdui-typescale-body-medium-tracking 0.015625rem
--mdui-typescale-body-medium-weight 400
--mdui-typescale-body-small-line-height 1rem
Body small
--mdui-typescale-body-small-size 0.75rem
--mdui-typescale-body-small-tracking 0.025rem
--mdui-typescale-body-small-weight 400
## Opacidad de la capa de estado {#state-layer} Algunos componentes de mdui agregan una capa semitransparente sobre ellos durante la interacción. Por ejemplo, el componente [``](/es/docs/2/components/button) muestra una capa semitransparente al pasar el ratón, enfocar, presionar o arrastrar. Puedes modificar las CSS Custom Properties para ajustar la opacidad de estas capas. Uso: ```css /* Modificar la opacidad de la capa de estado */ :root { --mdui-state-layer-hover: 0.08; --mdui-state-layer-focus: 0.12; --mdui-state-layer-pressed: 0.12; --mdui-state-layer-dragged: 0.16; } ``` | CSS Custom Property | Valor por defecto | Ejemplo | | ---------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------ | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## Elevación (sombras) {#elevation} Algunos componentes de mdui tienen efectos de sombra para simular la elevación en la página. Puedes modificar las CSS Custom Properties para ajustar las sombras de los componentes. Uso: ```css /* Modificar la sombra de nivel 1 */ :root { --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); } /* Establecer la sombra del elemento.foo a level1 */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | CSS Custom Property | Valor por defecto | Ejemplo | | ------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | `--mdui-elevation-level0` | `none` |
| | `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| ## Animación {#motion} Las curvas de aceleración y las duraciones de las animaciones en los componentes de mdui se pueden configurar mediante CSS Custom Properties. Uso: ```css /* Modificar la curva de aceleración standard y la duración short1 */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* Establecer la transición del elemento.foo con la curva standard y la duración short1 */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
Tipo CSS Custom Property Valor por defecto
Curvas de aceleración --mdui-motion-easing-linear cubic-bezier(0, 0, 1, 1)
--mdui-motion-easing-standard cubic-bezier(0.2, 0, 0, 1)
--mdui-motion-easing-standard-accelerate cubic-bezier(0.3, 0, 1, 1)
--mdui-motion-easing-standard-decelerate cubic-bezier(0, 0, 0, 1)
--mdui-motion-easing-emphasized var(--mdui-motion-easing-standard)
--mdui-motion-easing-emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15)
--mdui-motion-easing-emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1)
Duraciones --mdui-motion-duration-short1 50ms
--mdui-motion-duration-short2 100ms
--mdui-motion-duration-short3 150ms
--mdui-motion-duration-short4 200ms
--mdui-motion-duration-medium1 250ms
--mdui-motion-duration-medium2 300ms
--mdui-motion-duration-medium3 350ms
--mdui-motion-duration-medium4 400ms
--mdui-motion-duration-long1 450ms
--mdui-motion-duration-long2 500ms
--mdui-motion-duration-long3 550ms
--mdui-motion-duration-long4 600ms
--mdui-motion-duration-extra-long1 700ms
--mdui-motion-duration-extra-long2 800ms
--mdui-motion-duration-extra-long3 900ms
--mdui-motion-duration-extra-long4 1000ms
## Breakpoints responsivos {#breakpoint} mdui ofrece una serie de Breakpoints responsivos que se pueden configurar mediante CSS Custom Properties. Uso: ```css /* Modificar el valor del breakpoint sm */ :root { --mdui-breakpoint-sm: 560px; } ``` Ten en cuenta que estas CSS Custom Properties no se pueden usar en consultas de medios CSS. El siguiente es un ejemplo incorrecto: ```css /* Uso incorrecto. Las consultas de medios no pueden usar CSS Custom Properties */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` Si necesitas evaluar breakpoints en JavaScript, puedes usar la función [`breakpoint`](/es/docs/2/functions/breakpoint). | CSS Custom Property | Valor por defecto | | ----------------------- | ----------------- | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # Integración con React Para usar mdui en React, solo necesitas seguir los pasos de la página de [instalación](/es/docs/2/getting-started/installation#npm) para completar la instalación. ## Notas importantes {#notes} Al usar mdui en React, existen algunas limitaciones. Estas limitaciones son generales al usar Web Components en React, no son limitaciones específicas de la biblioteca de componentes mdui. ### Enlace de eventos {#event-binding} Como React no admite de forma nativa los eventos personalizados, para usar los eventos de los componentes de mdui primero debes obtener una referencia al componente con el atributo `ref`. A continuación se muestra un ejemplo de cómo usar eventos de componentes de mdui en React: ```js import { useEffect, useRef } from 'react'; import 'mdui/mdui.css'; import 'mdui/components/switch.js'; function App() { const switchRef = useRef(null); useEffect(() => { const handleToggle = () => { console.log('el switch ha cambiado de estado'); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### Declaración de tipos TypeScript para JSX {#jsx-typescript} Si usas mdui en un archivo TypeScript (.tsx), necesitas añadir la declaración de tipos. Importa manualmente el archivo de tipos de mdui en el archivo `.d.ts` de tu proyecto: ```ts /// ``` # Integración con Vue Para usar mdui en Vue, primero debes seguir las instrucciones de la página de [instalación](/es/docs/2/getting-started/installation#npm) para completar la instalación, y luego realizar algunas configuraciones necesarias. ## Configuración {#configuration} Debes configurar Vue para que no analice los componentes de mdui como componentes de Vue. En el archivo `vite.config`, establece la opción `compilerOptions.isCustomElement`: ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // Todas las etiquetas que comiencen con mdui- son componentes de mdui isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` Para obtener más información sobre esta configuración, consulta la [documentación oficial de Vue](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue). ## Notas importantes {#notes} ### Enlace de datos bidireccional {#data-binding} No puedes usar `v-model` para el enlace de datos bidireccional en los componentes de mdui. Debes manejar manualmente el enlace y la actualización de los datos. Por ejemplo: ```html ``` ### Configuración de eslint {#eslint} Si usas [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue), debes agregar la siguiente regla en `.eslintrc.js`: ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Integración con Angular Para usar mdui en Angular, primero debes seguir las instrucciones de la página de [instalación](/es/docs/2/getting-started/installation#npm) para completar la instalación, y luego realizar algunas configuraciones necesarias. ## Configuración {#configuration} Primero, debemos habilitar el soporte de Web Components en Angular. Ejemplo: ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {} ``` Después de la configuración, podemos importar y usar los componentes de mdui en el código del componente Angular: ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Contenido del Diálogo
` }) export class DialogExampleComponent implements OnInit { // Usa @ViewChild para obtener la referencia del elemento #dialog @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // Usa nativeElement para acceder al componente mdui this.dialog?.nativeElement.open = true; } } ``` # Integración con otros frameworks mdui se desarrolla con Web Components, que son compatibles de forma nativa con el navegador, por lo que se puede usar en todos los frameworks web. A continuación se muestran los métodos para usar mdui en frameworks comunes. ## Aurelia {#Aurelia} Después de completar la instalación siguiendo las instrucciones de la página de [instalación](/es/docs/2/getting-started/installation#npm), también necesitas instalar y configurar un paquete adicional (solo para Aurelia 2): ```bash npm install aurelia-mdui --save ``` Luego regístralo en tu aplicación: ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **Nota** Por favor, envía los informes de error a [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui) ## WebCell {#WebCell} Para usar mdui en [WebCell](https://web-cell.dev/), solo necesitas completar la instalación siguiendo los pasos de la página de [instalación](/es/docs/2/getting-started/installation#npm). El soporte para Web Components, TypeScript y JSX es de primera clase y está listo para usar. O puedes usar la [plantilla de repositorio oficial de GitHub](https://github.com/EasyWebApp/WebCell-mobile) para [crear un nuevo proyecto con un solo clic](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp). # Componente Avatar El componente Avatar se usa para representar a una persona o un objeto, y admite varias formas, como imágenes, iconos o caracteres. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/avatar.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` Uso: ```html ``` ## Ejemplos {#examples} ### Avatar de imagen {#example-src} Con el atributo `src` puedes usar un enlace de imagen como avatar, o usar un elemento `` en el slot por defecto como avatar. ```html Ejemplo de avatar de imagen ``` El atributo `fit` define cómo se adapta la imagen al contenedor, similar a [`object-fit`](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) nativo. ### Avatar de icono {#example-icon} Con el atributo `icon` puedes usar un icono de Material Icons como avatar, o bien colocar un elemento de icono en el slot por defecto. ```html ``` ### Avatar de carácter {#example-char} Puedes usar cualquier texto en el slot por defecto como avatar. ```html A ``` ## mdui-avatar API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
src src true string

URL de la imagen del avatar.
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Cómo se ajusta la imagen al contenedor, igual que la propiedad nativa object-fit. Los valores posibles son:

  • contain: Mantiene la relación de aspecto original de la imagen; el contenido se escala proporcionalmente
  • cover: Mantiene la relación de aspecto original de la imagen, pero parte del contenido puede recortarse
  • fill: Valor predeterminado; no mantiene la relación de aspecto original, el contenido se estira para llenar todo el contenedor
  • none: Conserva las dimensiones originales de la imagen; el contenido no se escala ni se estira
  • scale-down: Mantiene la relación de aspecto original, el tamaño del contenido es el mismo que el más pequeño entre none o contain
icon icon true string

Nombre del icono de Material Icons para el avatar.
label label true string

Texto alternativo del avatar.
### Slots
Nombre Descripción
(predeterminado)

Contenido personalizado del avatar; puede contener letras, caracteres, elementos <img>, iconos, etc.
### CSS Parts
Nombre Descripción
image

Elemento <img> interno del componente cuando se usa una imagen como avatar.
icon

Elemento <mdui-icon> interno del componente cuando se usa un icono como avatar.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Badge El componente Badge se usa para mostrar información dinámica, como recuentos o indicadores de estado. Puede contener texto o números. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/badge.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Badge } from 'mdui/components/badge.js'; ``` Uso: ```html 12 ``` ## Ejemplos {#examples} ### Forma {#example-variant} El atributo `variant` define la forma del Badge. Cuando `variant` es `large`, se mostrará un Badge grande. También puedes definir el texto que se mostrará en el slot por defecto. ```html 99+ ``` ## mdui-badge API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'small' | 'large' 'large'

Variante del badge. Los valores posibles son:

  • small: Badge pequeño, sin texto
  • large: Badge grande, muestra texto
### Slots
Nombre Descripción
(predeterminado)

Texto que se muestra en el badge.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Bottom App Bar El componente Bottom App Bar se usa para mostrar acciones importantes y elementos de navegación en la parte inferior de la página en dispositivos móviles. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/bottom-app-bar.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js'; ``` Uso: (Nota: el `style="position: relative"` en el ejemplo es solo para demostración; elimina este estilo en uso real.) ```html
``` **Notas importantes:** Este componente usa `position: fixed` por defecto y añade automáticamente `padding-bottom` 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: 1. Cuando se indica el atributo `scroll-target`. En este caso, se añade `padding-bottom` al elemento `scroll-target`. 2. Cuando está dentro del componente [``](/es/docs/2/components/layout). En este caso, no se añade `padding-bottom`. ## Ejemplos {#examples} ### Dentro de un contenedor especificado {#example-scroll-target} Por defecto, la barra de aplicaciones inferior se muestra en la parte inferior de la página, tomando la ventana como referencia. Si quieres colocar la barra de aplicaciones inferior dentro de un contenedor específico, define el atributo `scroll-target`, que debe ser el selector CSS o el elemento DOM del contenedor con contenido desplazable. En este caso, la barra de aplicaciones inferior se posicionará tomando como referencia el elemento padre (debes añadir manualmente los estilos `position: relative; overflow: hidden` al elemento padre). ```html
Contenido
``` ### Ocultar al desplazar {#example-scroll-behavior} Usa el atributo `scroll-behavior="hide"` para ocultar la barra de aplicaciones inferior al desplazarte hacia abajo y volver a mostrarla al desplazarte hacia arriba. El atributo `scroll-threshold` define cuántos píxeles desplazar antes de comenzar a ocultar la barra de aplicaciones inferior. ```html
Contenido
``` ### Floating Action Button fijo {#example-fab-detach} Si la barra de aplicaciones inferior contiene un [Floating Action Button](/es/docs/2/components/fab), puedes añadir el atributo `fab-detach` para que, al desplazar la página y ocultar la barra de aplicaciones inferior, el Floating Action Button permanezca en la esquina inferior derecha. ```html
``` ## mdui-bottom-app-bar API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
hide hide true boolean false

Indica si está oculto.
fab-detach fabDetach true boolean false

Indica si el <mdui-fab> dentro del Bottom App Bar debe separarse de la barra. Si es true, cuando el Bottom App Bar se oculta, el <mdui-fab> permanecerá en la página.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Comportamiento al hacer scroll. Los valores posibles son:

  • hide: Ocultar al hacer scroll
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Elemento en el que se escuchan los eventos de scroll. El valor puede ser un selector CSS, un elemento DOM o un objeto JQ. Por defecto, escucha los eventos de scroll de window.
scroll-threshold scrollThreshold true number

Distancia de desplazamiento necesaria para activar el comportamiento, en px.
order order true number

Orden de layout de este componente dentro de <mdui-layout>, de menor a mayor. El valor predeterminado es 0.
### Eventos
Nombre Descripción
show

Se dispara cuando comienza a mostrarse. Se puede evitar que se muestre llamando a event.preventDefault().
shown

Se dispara cuando la animación de mostrar se completa.
hide

Se dispara cuando comienza a ocultarse. Se puede evitar que se oculte llamando a event.preventDefault().
hidden

Se dispara cuando la animación de ocultar se completa.
### Slots
Nombre Descripción
(predeterminado)

Elementos dentro del Bottom App Bar.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Botón El componente Botón se usa para ejecutar acciones, como enviar un correo, compartir un documento o marcar un comentario con un me gusta. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/button.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Button } from 'mdui/components/button.js'; ``` Uso: ```html Botón ``` ## Ejemplos {#examples} ### Forma {#example-variant} El atributo `variant` define la forma del botón. ```html Elevado Relleno Tonal Con contorno Texto ``` ### Ancho completo {#example-full-width} El atributo `full-width` hace que el botón ocupe todo el ancho del elemento padre. ```html Botón ``` ### Icono {#example-icon} Los atributos `icon` y `end-icon` permiten añadir iconos de Material Icons a la izquierda y derecha del botón respectivamente. También puedes añadir elementos a la izquierda y derecha del botón mediante los slots `icon` y `end-icon`. ```html Icono Slot ``` ### Enlace {#example-link} Con el atributo `href`, el botón actúa como enlace; también puedes usar `download`, `target` y `rel`. ```html Enlace ``` ### Estados deshabilitado y de carga {#example-disabled} El atributo `disabled` deshabilita el botón; añade el atributo `loading` para añadir un estado de carga al botón. ```html Deshabilitado Cargando Cargando y deshabilitado ``` ## mdui-button API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' 'filled'

Variante del botón. Los valores posibles son:

  • elevated: Botón con sombra, adecuado para situaciones en las que se necesita separar visualmente el botón del fondo
  • filled: Efecto visual intenso, adecuado para acciones finales en procesos importantes, como "Guardar", "Confirmar", etc.
  • tonal: Efecto visual entre filled y outlined, adecuado para acciones de prioridad media-alta, como "Siguiente" en un flujo
  • outlined: Botón con borde, adecuado para acciones de prioridad media y secundarias, como "Volver"
  • text: Botón de texto, adecuado para acciones de prioridad más baja
full-width fullWidth true boolean false

Indica si debe ocupar todo el ancho del elemento padre.
icon icon true string

Nombre del icono de Material Icons a la izquierda. También se puede establecer mediante slot="icon".
end-icon endIcon true string

Nombre del icono de Material Icons a la derecha. También se puede establecer mediante slot="end-icon".
href href true 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 true string

Nombre del archivo para el enlace de descarga.

Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
target target true '_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 true '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 true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
disabled disabled true boolean false

Indica si está deshabilitado.
loading loading true boolean false

Indica si está en estado de carga.
name name true string ''

Nombre del botón que se enviará con los datos del formulario.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href.
value value true string ''

Valor inicial del botón que se enviará con los datos del formulario.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href.
type type true 'submit' | 'reset' | 'button' 'button'

Tipo del botón. El tipo predeterminado es button. Los tipos posibles son:

  • submit: Al hacer clic en el botón, se enviarán los datos del formulario al servidor
  • reset: Al hacer clic en el botón, se restablecerán todos los campos del formulario a sus valores iniciales
  • button: Este tipo de botón no tiene comportamiento predeterminado

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href.
formaction formAction true string

Especifica la URL a la que se enviará el formulario.

Si se especifica esta propiedad, anulará el atributo action del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href y type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Especifica el tipo de contenido al enviar el formulario al servidor. Los valores posibles son:

  • application/x-www-form-urlencoded: Valor predeterminado cuando no se especifica este atributo
  • multipart/form-data: Se usa cuando el formulario contiene un elemento <input type="file">
  • text/plain: Nuevo en HTML5, para depuración

Si se especifica esta propiedad, anulará el atributo enctype del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href y type="submit".
formmethod formMethod true 'post' | 'get'

Especifica el método HTTP utilizado al enviar el formulario. Los valores posibles son:

  • post: Los datos del formulario se incluyen en el cuerpo de la solicitud y se envían al servidor
  • get: Los datos del formulario se adjuntan al URI del formulario con ? como separador, y el URI generado se envía al servidor. Se utiliza este método cuando el formulario no tiene efectos secundarios y solo contiene caracteres ASCII

Si se define esta propiedad, anulará el atributo method del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
formnovalidate formNoValidate true boolean false

Si se define esta propiedad, no se realizará la validación del formulario al enviarlo.

Si se define esta propiedad, anulará el atributo novalidate del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Dónde mostrar la respuesta recibida después de enviar el formulario. Los valores posibles son:

  • _self: Opción predeterminada, abrir en el marco actual
  • _blank: Abrir en una nueva ventana
  • _parent: Abrir en el marco principal
  • _top: Abrir en la ventana completa

Si se define esta propiedad, anulará el atributo target del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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.
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
### Eventos
Nombre Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
invalid

Se dispara cuando falla la validación del campo del formulario.
### Slots
Nombre Descripción
(predeterminado)

Texto del botón.
icon

Elemento a la izquierda del botón.
end-icon

Elemento a la derecha del botón.
### CSS Parts
Nombre Descripción
button

Elemento interno <button> o <a>.
label

Texto del botón.
icon

Icono a la izquierda del botón.
end-icon

Icono a la derecha del botón.
loading

Elemento <mdui-circular-progress> en estado de carga.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Botón de icono El componente Botón de icono se usa para ejecutar acciones secundarias. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/button-icon.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` Uso: ```html ``` ## Ejemplos {#examples} ### Icono {#example-icon} El atributo `icon` define el nombre del icono de Material Icons. También puedes colocar un elemento de icono en el slot por defecto. ```html ``` ### Forma {#example-variant} El atributo `variant` define la forma del botón de icono. ```html ``` ### Seleccionable {#example-selectable} El atributo `selectable` permite seleccionar el botón de icono. ```html ``` El atributo `selected-icon` define el nombre del icono de Material Icons en estado seleccionado. También puedes definir un elemento de icono para el estado seleccionado mediante el slot `selected-icon`. ```html ``` Cuando el botón de icono está seleccionado, el atributo `selected` toma el valor `true`. También puedes añadir el atributo `selected` para que el botón de icono esté seleccionado por defecto. ```html ``` ### Enlace {#example-link} Con el atributo `href`, el botón de icono actúa como enlace; también puedes usar `download`, `target` y `rel`. ```html ``` ### Estados deshabilitado y de carga {#example-disabled} El atributo `disabled` deshabilita el botón de icono; añade el atributo `loading` para añadir un estado de carga al botón de icono. ```html ``` ## mdui-button-icon API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'standard' | 'filled' | 'tonal' | 'outlined' 'standard'

Variante del botón de icono. Los valores posibles son:

  • standard: Adecuado para acciones de prioridad más baja
  • filled: Efecto visual intenso, adecuado para acciones de alta prioridad
  • tonal: Efecto visual entre filled y outlined, adecuado para acciones de prioridad media-alta
  • outlined: Adecuado para acciones de prioridad media
icon icon true string

Nombre del icono de Material Icons. También se puede establecer mediante el slot predeterminado.
selected-icon selectedIcon true string

Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante slot="selected-icon".
selectable selectable true boolean false

Indica si se puede seleccionar.
selected selected true boolean false

Indica si está seleccionado.
href href true 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 true string

Nombre del archivo para el enlace de descarga.

Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
target target true '_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 true '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 true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
disabled disabled true boolean false

Indica si está deshabilitado.
loading loading true boolean false

Indica si está en estado de carga.
name name true string ''

Nombre del botón que se enviará con los datos del formulario.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href.
value value true string ''

Valor inicial del botón que se enviará con los datos del formulario.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href.
type type true 'submit' | 'reset' | 'button' 'button'

Tipo del botón. El tipo predeterminado es button. Los tipos posibles son:

  • submit: Al hacer clic en el botón, se enviarán los datos del formulario al servidor
  • reset: Al hacer clic en el botón, se restablecerán todos los campos del formulario a sus valores iniciales
  • button: Este tipo de botón no tiene comportamiento predeterminado

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href.
formaction formAction true string

Especifica la URL a la que se enviará el formulario.

Si se especifica esta propiedad, anulará el atributo action del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href y type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Especifica el tipo de contenido al enviar el formulario al servidor. Los valores posibles son:

  • application/x-www-form-urlencoded: Valor predeterminado cuando no se especifica este atributo
  • multipart/form-data: Se usa cuando el formulario contiene un elemento <input type="file">
  • text/plain: Nuevo en HTML5, para depuración

Si se especifica esta propiedad, anulará el atributo enctype del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href y type="submit".
formmethod formMethod true 'post' | 'get'

Especifica el método HTTP utilizado al enviar el formulario. Los valores posibles son:

  • post: Los datos del formulario se incluyen en el cuerpo de la solicitud y se envían al servidor
  • get: Los datos del formulario se adjuntan al URI del formulario con ? como separador, y el URI generado se envía al servidor. Se utiliza este método cuando el formulario no tiene efectos secundarios y solo contiene caracteres ASCII

Si se define esta propiedad, anulará el atributo method del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
formnovalidate formNoValidate true boolean false

Si se define esta propiedad, no se realizará la validación del formulario al enviarlo.

Si se define esta propiedad, anulará el atributo novalidate del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Dónde mostrar la respuesta recibida después de enviar el formulario. Los valores posibles son:

  • _self: Opción predeterminada, abrir en el marco actual
  • _blank: Abrir en una nueva ventana
  • _parent: Abrir en el marco principal
  • _top: Abrir en la ventana completa

Si se define esta propiedad, anulará el atributo target del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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.
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
### Eventos
Nombre Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
change

Se dispara cuando cambia el estado de selección.
invalid

Se dispara cuando falla la validación del campo del formulario.
### Slots
Nombre Descripción
(predeterminado)

Componente de icono.
selected-icon

Elemento de icono que se muestra en el estado seleccionado.
### CSS Parts
Nombre Descripción
button

Elemento interno <button> o <a>.
icon

Icono en estado no seleccionado.
selected-icon

Icono en estado seleccionado.
loading

Elemento <mdui-circular-progress> en estado de carga.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Tarjeta El componente Tarjeta es versátil y se usa para agrupar contenido y acciones relacionadas con un mismo tema. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/card.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Card } from 'mdui/components/card.js'; ``` Uso: ```html Tarjeta ``` ## Ejemplos {#examples} ### Forma {#example-variant} El atributo `variant` define la forma de la tarjeta. ```html ``` ### Clicable {#example-clickable} El atributo `clickable` hace que la tarjeta sea interactiva, con elevación al pasar el cursor y efecto de onda al hacer clic. ```html ``` ### Enlace {#example-link} Con el atributo `href`, la tarjeta actúa como enlace; también puedes usar `download`, `target` y `rel`. ```html ``` ### Estado deshabilitado {#example-disabled} El atributo `disabled` deshabilita la tarjeta. ```html ``` ## mdui-card API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

Variante de la tarjeta. Los valores posibles son:

  • elevated: Tarjeta con sombra, mayor separación visual del fondo
  • filled: Tarjeta con color de relleno, menor separación visual del fondo
  • outlined: Tarjeta con borde, máxima separación visual del fondo
clickable clickable true boolean false

Indica si se puede hacer clic. Cuando es true, la tarjeta tendrá un efecto hover y un efecto de ondulación al hacer clic.
disabled disabled true boolean false

Indica si está deshabilitado.
href href true 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 true string

Nombre del archivo para el enlace de descarga.

Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
target target true '_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 true '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 true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
### Slots
Nombre Descripción
(predeterminado)

Contenido de la tarjeta.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Checkbox El componente Checkbox permite seleccionar una o varias opciones de un conjunto, o alternar el estado de una sola opción. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/checkbox.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` Uso: ```html Checkbox ``` ## Ejemplos {#examples} ### Estado seleccionado {#example-checked} Cuando el checkbox está seleccionado, `checked` vale `true`. El atributo `checked` hace que el checkbox aparezca seleccionado por defecto. ```html Checkbox ``` ### Estado deshabilitado {#example-disabled} El atributo `disabled` deshabilita el checkbox. ```html Checkbox Checkbox ``` ### Estado indeterminado {#example-indeterminate} El atributo `indeterminate` hace que el checkbox esté en estado indeterminado. ```html Checkbox ``` ### Icono {#example-icon} Los atributos `unchecked-icon`, `checked-icon` e `indeterminate-icon` define los iconos de Material Icons para los estados no seleccionado, seleccionado e indeterminado respectivamente. También puedes configurarlos mediante los slots `unchecked-icon`, `checked-icon` e `indeterminate-icon`. ```html Checkbox Checkbox
Checkbox Checkbox ``` ## mdui-checkbox API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
disabled disabled true boolean false

Indica si está deshabilitado.
checked checked true boolean false

Indica si está seleccionado.
undefined defaultChecked false boolean false

Estado de selección por defecto. Al restablecer el formulario, se restaurará a este estado. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
indeterminate indeterminate true boolean false

Indica si se encuentra en estado indeterminado.
required required true boolean false

Indica si es obligatorio marcar este checkbox al enviar el formulario.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.
name name true string ''

Nombre del checkbox, que se enviará con los datos del formulario.
value value true string 'on'

Valor del checkbox, que se enviará con los datos del formulario.
unchecked-icon uncheckedIcon true string

Nombre del icono de Material Icons para el estado no seleccionado. También se puede establecer mediante slot="unchecked-icon".
checked-icon checkedIcon true string

Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante slot="checked-icon".
indeterminate-icon indeterminateIcon true string

Nombre del icono de Material Icons para el estado indeterminado. También se puede establecer mediante slot="indeterminate-icon".
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
autofocus autofocus true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
change

Se dispara cuando cambia el estado de selección.
input

Se dispara cuando cambia el estado de selección.
invalid

Se dispara cuando falla la validación del campo del formulario.
### Slots
Nombre Descripción
(predeterminado)

Texto del checkbox.
unchecked-icon

Icono en estado no seleccionado.
checked-icon

Icono en estado seleccionado.
indeterminate-icon

Icono en estado indeterminado.
### CSS Parts
Nombre Descripción
control

Contenedor del icono izquierdo.
unchecked-icon

Icono en estado no seleccionado.
checked-icon

Icono en estado seleccionado.
indeterminate-icon

Icono en estado indeterminado.
label

Texto del checkbox.
# Componente Chip El componente Chip se usa para introducir información, realizar selecciones, filtrar contenido o ejecutar acciones relacionadas. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/chip.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Chip } from 'mdui/components/chip.js'; ``` Uso: ```html Chip ``` ## Ejemplos {#examples} ### Forma {#example-variant} El atributo `variant` define la forma del chip. Hay cuatro variantes; elige la que mejor encaje con tu caso de uso: - `assist`: Permite mostrar acciones auxiliares relacionadas con el contexto actual. Por ejemplo, en una página de pedidos, ofrecer acciones como compartir o marcar como favorito. - `filter`: Permite filtrar contenido. Por ejemplo, en una página de resultados de búsqueda, filtrar los resultados. - `input`: Permite representar fragmentos de información ingresados por el usuario. Por ejemplo, los contactos en el campo "Para" en Gmail. - `suggestion`: Permite mostrar sugerencias generadas dinámicamente para simplificar la acción del usuario. Por ejemplo, en una aplicación de chat, sugerir mensajes que el usuario podría querer enviar. ```html Asistente Filtro Entrada Sugerencia ``` ### Sombra {#example-elevated} El atributo `elevated` hace que el chip tenga sombra. ```html Chip ``` ### Icono {#example-icon} Los atributos `icon` y `end-icon` permiten añadir iconos de Material Icons a la izquierda y derecha del chip respectivamente. También puedes añadir elementos a la izquierda y derecha del chip mediante los slots `icon` y `end-icon`. ```html Icono Icono final Slot ``` ### Enlace {#example-link} Con el atributo `href`, el chip actúa como enlace; también puedes usar `download`, `target` y `rel`. ```html Enlace ``` ### Estados deshabilitado y de carga {#example-disabled} El atributo `disabled` deshabilita el chip; añade el atributo `loading` para añadir un estado de carga al chip. ```html Deshabilitado Cargando Cargando y deshabilitado ``` ### Seleccionable {#example-selectable} El atributo `selectable` hace que el chip sea seleccionable. ```html Chip ``` El atributo `selected-icon` define el nombre del icono de Material Icons en estado seleccionado. También puedes proporcionar el elemento del icono en estado seleccionado mediante el slot `selected-icon`. ```html Chip Chip ``` Cuando el chip está seleccionado, el atributo `selected` pasa a valer `true`. También puedes añadir el atributo `selected` para que el chip esté seleccionado por defecto. ```html Chip ``` ### Eliminable {#example-deletable} Al añadir el atributo `deletable`, aparece un icono de eliminar en el lado derecho del chip. Al hacer clic en este icono se activa el evento `delete`. También puedes definir el nombre del icono de Material Icons para el botón de eliminar mediante el atributo `delete-icon`, o especificar el elemento del icono mediante el slot `delete-icon`. ```html Chip Chip Chip ``` ## mdui-chip API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'assist' | 'filter' | 'input' | 'suggestion' 'assist'

Variante del chip. Los valores posibles son:

  • assist: Se utiliza para mostrar acciones auxiliares relacionadas con el contexto actual, como compartir, marcar como favorito en una página de pedidos
  • filter: Se utiliza para filtrar contenido, como filtrar resultados de búsqueda en una página de resultados
  • input: Se utiliza para representar fragmentos de información introducidos por el usuario, como contactos en el campo "Para" de Gmail
  • suggestion: Se utiliza para proporcionar información recomendada generada dinámicamente para simplificar las acciones del usuario, como predecir mensajes que el usuario podría querer enviar en una aplicación de chat
elevated elevated true boolean false

Indica si se muestra sombra.
selectable selectable true boolean false

Indica si se puede seleccionar.
selected selected true boolean false

Indica si está seleccionado.
deletable deletable true boolean false

Indica si se puede eliminar. Cuando es true, se muestra un icono de eliminar a la derecha del chip.
icon icon true string

Nombre del icono de Material Icons a la izquierda. También se puede establecer mediante slot="icon".
selected-icon selectedIcon true string

Nombre del icono de Material Icons a la izquierda en el estado seleccionado. También se puede establecer mediante slot="selected-icon".
end-icon endIcon true string

Nombre del icono de Material Icons a la derecha. También se puede establecer mediante slot="end-icon".
delete-icon deleteIcon true string

Nombre del icono de Material Icons para el icono de eliminar a la derecha cuando se puede eliminar. También se puede establecer mediante slot="delete-icon".
href href true 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 true string

Nombre del archivo para el enlace de descarga.

Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
target target true '_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 true '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 true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
disabled disabled true boolean false

Indica si está deshabilitado.
loading loading true boolean false

Indica si está en estado de carga.
name name true string ''

Nombre del botón que se enviará con los datos del formulario.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href.
value value true string ''

Valor inicial del botón que se enviará con los datos del formulario.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href.
type type true 'submit' | 'reset' | 'button' 'button'

Tipo del botón. El tipo predeterminado es button. Los tipos posibles son:

  • submit: Al hacer clic en el botón, se enviarán los datos del formulario al servidor
  • reset: Al hacer clic en el botón, se restablecerán todos los campos del formulario a sus valores iniciales
  • button: Este tipo de botón no tiene comportamiento predeterminado

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href.
formaction formAction true string

Especifica la URL a la que se enviará el formulario.

Si se especifica esta propiedad, anulará el atributo action del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href y type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Especifica el tipo de contenido al enviar el formulario al servidor. Los valores posibles son:

  • application/x-www-form-urlencoded: Valor predeterminado cuando no se especifica este atributo
  • multipart/form-data: Se usa cuando el formulario contiene un elemento <input type="file">
  • text/plain: Nuevo en HTML5, para depuración

Si se especifica esta propiedad, anulará el atributo enctype del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href y type="submit".
formmethod formMethod true 'post' | 'get'

Especifica el método HTTP utilizado al enviar el formulario. Los valores posibles son:

  • post: Los datos del formulario se incluyen en el cuerpo de la solicitud y se envían al servidor
  • get: Los datos del formulario se adjuntan al URI del formulario con ? como separador, y el URI generado se envía al servidor. Se utiliza este método cuando el formulario no tiene efectos secundarios y solo contiene caracteres ASCII

Si se define esta propiedad, anulará el atributo method del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
formnovalidate formNoValidate true boolean false

Si se define esta propiedad, no se realizará la validación del formulario al enviarlo.

Si se define esta propiedad, anulará el atributo novalidate del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Dónde mostrar la respuesta recibida después de enviar el formulario. Los valores posibles son:

  • _self: Opción predeterminada, abrir en el marco actual
  • _blank: Abrir en una nueva ventana
  • _parent: Abrir en el marco principal
  • _top: Abrir en la ventana completa

Si se define esta propiedad, anulará el atributo target del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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.
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
### Eventos
Nombre Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
invalid

Se dispara cuando falla la validación del campo del formulario.
change

Se dispara cuando cambia el estado de selección.
delete

Se dispara al hacer clic en el icono de eliminar.
### Slots
Nombre Descripción
(predeterminado)

Texto del chip.
icon

Elemento a la izquierda.
end-icon

Elemento a la derecha.
selected-icon

Elemento a la izquierda en el estado seleccionado.
delete-icon

Elemento de eliminar a la derecha cuando se puede eliminar.
### CSS Parts
Nombre Descripción
button

Elemento interno <button> o <a>.
label

Texto del chip.
icon

Icono a la izquierda.
end-icon

Icono a la derecha.
selected-icon

Icono a la izquierda en el estado seleccionado.
delete-icon

Icono de eliminar a la derecha cuando se puede eliminar.
loading

Elemento <mdui-circular-progress> en estado de carga.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Progreso circular El componente Progreso circular se usa para mostrar el progreso de una tarea, como la carga de datos o el envío de un formulario. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/circular-progress.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` Uso: ```html ``` ## Ejemplos {#examples} ### Progreso fijo {#example-value} El progreso circular tiene un progreso indeterminado por defecto. El atributo `value` define el progreso actual; el valor máximo predeterminado es `1`. ```html ``` El atributo `max` define el valor máximo del progreso. ```html ``` ## mdui-circular-progress API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
max max true number 1

Valor máximo del indicador de progreso. Por defecto 1.
value value false number

Valor actual del indicador de progreso. Si no se especifica, se muestra en estado indeterminado.
# Componente Collapse El componente Collapse se usa para agrupar y ocultar áreas de contenido complejas para mantener la página ordenada. Ten en cuenta que el componente Collapse no incluye ningún estilo por sí mismo; debes añadir tus propios estilos o usarlo junto con otros componentes. ## Uso {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` Uso: ```html primer contenido segundo contenido ``` ## Ejemplos {#examples} ### Título del panel y contenido {#example-header} Puedes establecer el texto del encabezado del panel usando el atributo `header` del componente ``, o especificar el elemento del encabezado mediante el slot `header`. El slot por defecto del componente se usa para el contenido del panel. ```html Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
``` ### Modo acordeón {#example-accordion} El atributo `accordion` al componente `` para activar el modo acordeón, de modo que solo un panel esté abierto a la vez. ```html Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
``` ### Establecer el panel activo {#example-value} Con el atributo `value` del componente `` puedes obtener el panel abierto en ese momento o indicar qué panel debe abrirse. En modo acordeón, el valor del atributo `value` es una cadena. Puedes usar el atributo HTML o la propiedad JavaScript para operar este atributo. En modo no acordeón, el valor del atributo `value` es un array, que solo se puede operar mediante la propiedad JavaScript. ```html Modo acordeón Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
Modo no acordeón Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
``` ### Estado deshabilitado {#example-disabled} Añade el atributo `disabled` al componente `` para deshabilitar todo el grupo de paneles. De manera similar, añadiendo el atributo `disabled` al componente `` deshabilita un panel específico. ```html Todo deshabilitado Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
Deshabilitar el primer panel Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
``` ### Elemento que activa el colapso {#example-trigger} Por defecto, hacer clic en toda el área del encabezado del panel activa el colapso. También puedes definir qué elemento activa el colapso estableciendo el atributo `trigger` del componente ``. El atributo `trigger` puede ser un selector CSS o un elemento DOM. ```html Elemento 1
Elemento 1 - subelemento
``` ## mdui-collapse-item API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
value value true string

Valor de este elemento de Collapse.
header header true string

Texto del encabezado de este elemento de Collapse.
disabled disabled true boolean false

Indica si el elemento de Collapse está deshabilitado.
trigger trigger false string | HTMLElement | JQ<HTMLElement>

Al hacer clic en este elemento se activa el colapso. El valor puede ser un selector CSS, un elemento DOM o un objeto JQ. Por defecto, se activa al hacer clic en toda el área del encabezado.
### Eventos
Nombre Descripción
open

Se dispara cuando comienza a abrirse.
opened

Se dispara cuando la animación de apertura se completa.
close

Se dispara cuando comienza a cerrarse.
closed

Se dispara cuando la animación de cierre se completa.
### Slots
Nombre Descripción
(predeterminado)

Contenido del cuerpo del elemento de Collapse.
header

Contenido del encabezado del elemento de Collapse.
### CSS Parts
Nombre Descripción
header

Contenido del encabezado del Collapse.
body

Contenido del cuerpo del Collapse.
## mdui-collapse API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
accordion accordion true boolean false

Indica si el modo acordeón está habilitado.
value value false string | string[]

Valor del <mdui-collapse-item> actualmente expandido.

Nota: El atributo HTML de esta propiedad siempre es una cadena, y solo se puede establecer un valor inicial cuando accordion es true. El valor de la propiedad de JavaScript es una cadena cuando accordion es true, y es un array de cadenas cuando accordion es false. Por lo tanto, cuando accordion es false, solo se puede cambiar este valor modificando la propiedad de JavaScript.
disabled disabled true boolean false

Indica si el Collapse está deshabilitado.
### Eventos
Nombre Descripción
change

Se dispara cuando cambia el elemento del Collapse actualmente expandido.
### Slots
Nombre Descripción
(predeterminado)

Componentes <mdui-collapse-item>.
# Componente Diálogo El componente Diálogo se usa para mostrar avisos importantes durante las acciones del usuario. Además de usar el componente directamente, mdui también ofrece cuatro funciones: [`mdui.dialog`](/es/docs/2/functions/dialog), [`mdui.alert`](/es/docs/2/functions/alert), [`mdui.confirm`](/es/docs/2/functions/confirm), [`mdui.prompt`](/es/docs/2/functions/prompt). Estas funciones facilitan el uso del componente Diálogo. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/dialog.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` Uso: ```html Diálogo Cerrar Abrir diálogo ``` ## Ejemplos {#examples} ### Cerrar al hacer clic en la superposición {#example-close-on-overlay-click} Si añades el atributo `close-on-overlay-click`, el diálogo se cerrará al hacer clic en la superposición. ```html Diálogo Abrir diálogo ``` ### Cerrar al presionar la tecla ESC {#example-close-on-esc} Si añades el atributo `close-on-esc`, el diálogo se cerrará al pulsar la tecla ESC. ```html Diálogo Abrir diálogo ``` ### Pantalla completa {#example-fullscreen} El atributo `fullscreen` hace que el diálogo se muestre en pantalla completa. ```html Diálogo Cerrar Abrir diálogo ``` ### Icono {#example-icon} Si usas el atributo `icon`, se añadirá un icono de Material Icons en la parte superior del diálogo. ```html Diálogo Abrir diálogo ``` También puedes añadir un elemento de icono en la parte superior del diálogo mediante el slot `icon`. ```html Diálogo Abrir diálogo ``` ### Título y descripción {#example-headline} Los atributos `headline` y `description` para establecer el título y la descripción del diálogo. ```html Abrir diálogo ``` También puedes usar los slots `headline` y `description` para establecer el elemento del título y el elemento de la descripción del diálogo. ```html ¿Eliminar las imágenes seleccionadas? Las imágenes se eliminarán permanentemente de tu cuenta y de todos los dispositivos sincronizados. Abrir diálogo ``` ### Botones de acción en la parte inferior {#example-action} También puedes añadir botones de acción en la parte inferior mediante el slot `action`. ```html Cancelar Eliminar Abrir diálogo ``` El atributo `stacked-actions` hace que los botones de acción en la parte inferior se apilen verticalmente. ```html Activar No, gracias Abrir diálogo ``` ### Contenido superior {#example-header} Puedes establecer el contenido superior del diálogo mediante el slot `header`. ```html Título Guardar
Abrir diálogo ``` ## mdui-dialog API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
icon icon true string

Nombre del icono de Material Icons en la parte superior. También se puede establecer mediante slot="icon".
headline headline true string

Título. También se puede establecer mediante slot="headline".
description description true string

Texto debajo del título. También se puede establecer mediante slot="description".
open open true boolean false

Indica si el diálogo está abierto.
fullscreen fullscreen true boolean false

Indica si se muestra el diálogo en pantalla completa.
close-on-esc closeOnEsc true boolean false

Indica si se puede cerrar el diálogo con la tecla ESC.
close-on-overlay-click closeOnOverlayClick true boolean false

Indica si se puede cerrar el diálogo al hacer clic en la superposición.
stacked-actions stackedActions true boolean false

Indica si los botones de acción inferiores se apilan verticalmente.
### Eventos
Nombre Descripción
open

Se dispara cuando el diálogo comienza a abrirse. Se puede evitar que se abra llamando a event.preventDefault().
opened

Se dispara cuando la animación de apertura del diálogo se completa.
close

Se dispara cuando el diálogo comienza a cerrarse. Se puede evitar que se cierre llamando a event.preventDefault().
closed

Se dispara cuando la animación de cierre del diálogo se completa.
overlay-click

Se dispara al hacer clic en la superposición.
### Slots
Nombre Descripción
header

Elemento superior, que contiene por defecto los slots icon y headline.
icon

Icono superior.
headline

Título superior.
description

Texto debajo del título.
(predeterminado)

Contenido principal del diálogo.
action

Elementos en la barra de acciones inferior.
### CSS Parts
Nombre Descripción
overlay

Superposición.
panel

Contenedor del diálogo.
header

Parte del encabezado del diálogo, que contiene icon y headline.
icon

Icono superior, ubicado en el encabezado.
headline

Título superior, ubicado en el encabezado.
body

Parte del cuerpo del diálogo.
description

Parte del texto secundario, ubicado en el cuerpo.
action

Botones de acción inferiores.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Divider El componente Divider es una línea fina que separa contenido en listas y contenedores. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/divider.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Divider } from 'mdui/components/divider.js'; ``` Uso: ```html ``` ## Ejemplos {#examples} ### Separador vertical {#example-vertical} El atributo `vertical` hace que el separador se muestre verticalmente. ```html
``` ### Sangría izquierda {#example-inset} El atributo `inset` hace que el separador tenga sangría izquierda. Esto se usa a menudo en listas para alinear el separador con el texto de la izquierda. ```html Elemento 1 Elemento 2 ``` ### Sangría en ambos lados {#example-middle} El atributo `middle` hace que el separador tenga sangría en ambos lados. ```html Elemento 1 Elemento 2 ``` ## mdui-divider API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
vertical vertical true boolean false

Indica si es un separador vertical.
inset inset true boolean false

Indica si se aplica sangría a la izquierda.
middle middle true boolean false

Indica si se aplica sangría a ambos lados.
# Componente Dropdown El componente Dropdown se usa para presentar contenido contextual en un menú emergente y suele combinarse con un componente de menú. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/dropdown.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` Uso: ```html Abrir menú desplegable Elemento 1 Elemento 2 ``` ## Ejemplos {#examples} ### Estado deshabilitado {#example-disabled} El atributo `disabled` deshabilita el componente Dropdown. ```html Abrir menú desplegable Elemento 1 Elemento 2 ``` ### Posición de apertura {#example-placement} El atributo `placement` define la posición de apertura del dropdown. ```html Abrir menú desplegable Elemento 1 Elemento 2 ``` ### Forma de activación {#example-trigger} El atributo `trigger` define cómo se activa el dropdown. ```html Abrir menú desplegable Elemento 1 Elemento 2 ``` ### Abrir en la posición del cursor {#example-open-on-pointer} El atributo `open-on-pointer` abre el dropdown en la posición del cursor. Suele usarse con `trigger="contextmenu"` para abrir un menú con el botón derecho del ratón. ```html Usa el botón derecho del ratón en esta área para abrir el menú Elemento 1 Elemento 2 ``` ### Mantener el menú abierto al hacer clic {#example-stay-open-on-click} Cuando se usa un menú dentro del dropdown, por defecto, al hacer clic en un elemento del menú, el dropdown se cierra automáticamente. El atributo `stay-open-on-click`, el dropdown permanecerá abierto al hacer clic en un elemento del menú. ```html Abrir menú desplegable Elemento 1 Elemento 2 ``` ### Retraso de apertura/cierre {#example-delay} Cuando `trigger="hover"`, puedes usar `open-delay` y `close-delay` para ajustar el retraso de apertura y cierre. ```html Abrir menú desplegable Elemento 1 Elemento 2 ``` ## mdui-dropdown API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
open open true boolean false

Indica si el Dropdown está abierto.
disabled disabled true boolean false

Indica si el Dropdown está deshabilitado.
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

Modo de activación del Dropdown, admite múltiples valores separados por espacios. Los valores posibles son:

  • click: Activar al hacer clic
  • hover: Activar al pasar el ratón
  • focus: Activar al recibir el foco
  • contextmenu: Activar al hacer clic derecho o al mantener pulsado en pantalla táctil
  • manual: Solo se puede abrir y cerrar mediante programación, no se pueden especificar otras formas de activación
placement placement true 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Posición del contenido del Dropdown. Los valores posibles son:

  • auto: Determinar posición automáticamente
  • top-start: Arriba, alineado a la izquierda
  • top: Arriba, centrado
  • top-end: Arriba, alineado a la derecha
  • bottom-start: Abajo, alineado a la izquierda
  • bottom: Abajo, centrado
  • bottom-end: Abajo, alineado a la derecha
  • left-start: Izquierda, alineado arriba
  • left: Izquierda, centrado
  • left-end: Izquierda, alineado abajo
  • right-start: Derecha, alineado arriba
  • right: Derecha, centrado
  • right-end: Derecha, alineado abajo
stay-open-on-click stayOpenOnClick true boolean false

Indica si el Dropdown permanece abierto después de hacer clic en <mdui-menu-item>.
open-delay openDelay true number 150

Retraso para abrir el Dropdown al pasar el ratón, en milisegundos.
close-delay closeDelay true number 150

Retraso para cerrar el Dropdown al pasar el ratón, en milisegundos.
open-on-pointer openOnPointer true boolean false

Indica si el Dropdown se abre en la posición del cursor al activarse, a menudo utilizado para abrir menús contextuales del ratón.
### Eventos
Nombre Descripción
open

Se dispara cuando el Dropdown comienza a abrirse. Se puede evitar que se abra llamando a event.preventDefault().
opened

Se dispara cuando la animación de apertura del Dropdown se completa.
close

Se dispara cuando el Dropdown comienza a cerrarse. Se puede evitar que se cierre llamando a event.preventDefault().
closed

Se dispara cuando la animación de cierre del Dropdown se completa.
### Slots
Nombre Descripción
(predeterminado)

Contenido del Dropdown.
trigger

Elemento que activa el Dropdown, por ejemplo, un elemento <mdui-button>.
### CSS Parts
Nombre Descripción
trigger

Contenedor del elemento que activa el Dropdown, es decir, el contenedor del slot trigger.
panel

Contenedor del contenido del Dropdown.
### CSS Custom Properties
Nombre Descripción
--z-index

Valor CSS z-index del componente.
# Componente Floating Action Button El Floating Action Button (FAB) se usa para destacar la acción principal de una página y dejarla siempre a mano. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/fab.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Fab } from 'mdui/components/fab.js'; ``` Uso: ```html ``` ## Ejemplos {#examples} ### Icono {#example-icon} El atributo `icon` define el nombre del icono de Material Icons. También puedes proporcionar el elemento del icono mediante el slot `icon`. ```html ``` ### Estado extendido {#example-extended} El atributo `extended` muestra el FAB en estado extendido; en ese caso, se mostrará el texto del slot por defecto. ```html Redactar ``` ### Forma {#example-variant} El atributo `variant` define la forma del FAB. ```html ``` ### Tamaño {#example-size} El atributo `size` define el tamaño del FAB. ```html ``` ### Enlace {#example-link} Si usas el atributo `href`, el FAB se convierte en un enlace; además, puedes usar los atributos relacionados con enlaces: `download`, `target`, `rel`. ```html ``` ### Estados deshabilitado y de carga {#example-disabled} El atributo `disabled` deshabilita el FAB; añade el atributo `loading` para añadir un estado de carga al FAB. ```html ``` ## mdui-fab API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'primary' | 'surface' | 'secondary' | 'tertiary' 'primary'

Variante del FAB, las diferentes variantes de este componente solo difieren en el color. Los valores posibles son:

  • primary: Usa el color de fondo Primary container
  • surface: Usa el color de fondo Surface container high
  • secondary: Usa el color de fondo Secondary container
  • tertiary: Usa el color de fondo Tertiary container
size size true 'normal' | 'small' | 'large' 'normal'

Tamaño del FAB. Los valores posibles son:

  • normal: Tamaño normal de FAB
  • small: FAB pequeño
  • large: FAB grande
icon icon true string

Nombre del icono de Material Icons. También se puede establecer mediante slot="icon".
extended extended true boolean false

Indica si está expandido.
href href true 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 true string

Nombre del archivo para el enlace de descarga.

Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
target target true '_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 true '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 true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
disabled disabled true boolean false

Indica si está deshabilitado.
loading loading true boolean false

Indica si está en estado de carga.
name name true string ''

Nombre del botón que se enviará con los datos del formulario.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href.
value value true string ''

Valor inicial del botón que se enviará con los datos del formulario.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href.
type type true 'submit' | 'reset' | 'button' 'button'

Tipo del botón. El tipo predeterminado es button. Los tipos posibles son:

  • submit: Al hacer clic en el botón, se enviarán los datos del formulario al servidor
  • reset: Al hacer clic en el botón, se restablecerán todos los campos del formulario a sus valores iniciales
  • button: Este tipo de botón no tiene comportamiento predeterminado

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href.
formaction formAction true string

Especifica la URL a la que se enviará el formulario.

Si se especifica esta propiedad, anulará el atributo action del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href y type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Especifica el tipo de contenido al enviar el formulario al servidor. Los valores posibles son:

  • application/x-www-form-urlencoded: Valor predeterminado cuando no se especifica este atributo
  • multipart/form-data: Se usa cuando el formulario contiene un elemento <input type="file">
  • text/plain: Nuevo en HTML5, para depuración

Si se especifica esta propiedad, anulará el atributo enctype del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href y type="submit".
formmethod formMethod true 'post' | 'get'

Especifica el método HTTP utilizado al enviar el formulario. Los valores posibles son:

  • post: Los datos del formulario se incluyen en el cuerpo de la solicitud y se envían al servidor
  • get: Los datos del formulario se adjuntan al URI del formulario con ? como separador, y el URI generado se envía al servidor. Se utiliza este método cuando el formulario no tiene efectos secundarios y solo contiene caracteres ASCII

Si se define esta propiedad, anulará el atributo method del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
formnovalidate formNoValidate true boolean false

Si se define esta propiedad, no se realizará la validación del formulario al enviarlo.

Si se define esta propiedad, anulará el atributo novalidate del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Dónde mostrar la respuesta recibida después de enviar el formulario. Los valores posibles son:

  • _self: Opción predeterminada, abrir en el marco actual
  • _blank: Abrir en una nueva ventana
  • _parent: Abrir en el marco principal
  • _top: Abrir en la ventana completa

Si se define esta propiedad, anulará el atributo target del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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.
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
### Eventos
Nombre Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
invalid

Se dispara cuando falla la validación del campo del formulario.
### Slots
Nombre Descripción
(predeterminado)

Texto.
icon

Icono.
### CSS Parts
Nombre Descripción
button

Elemento interno <button> o <a>.
label

Texto a la derecha.
icon

Icono a la izquierda.
loading

Elemento <mdui-circular-progress> en estado de carga.
### CSS Custom Properties
Nombre Descripción
--shape-corner-small

Cuando size="small", 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.
--shape-corner-normal

Cuando size="normal", 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.
--shape-corner-large

Cuando size="large", 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.
# Componente Icono El componente Icono se usa para representar acciones comunes y admite iconos de Material Icons y SVG. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/icon.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Icon } from 'mdui/components/icon.js'; ``` Uso: ```html ``` ### Usar iconos de Material Icons {#usage-material-icons} Si necesitas usar iconos de Material Icons mediante este componente, debes importar por separado el archivo CSS de Material Icons. Material Icons tiene 5 variantes: Filled, Outlined, Rounded, Sharp, Two Tone. Importa el archivo CSS correspondiente según la variante del icono que vayas a usar: ```html ``` Cuando uses el componente, pasa el nombre del icono en el atributo `name` y añade el sufijo de la variante (la variante Filled no necesita sufijo). A continuación se muestra el uso de las 5 variantes del icono `delete`: ```html ``` Puedes buscar iconos directamente en la herramienta de [búsqueda de iconos de Material Icons](/es/docs/2/components/icon#search) situada al final de la página y hacer clic en el que necesites para copiar automáticamente su código al portapapeles. Además, mdui también ofrece un paquete independiente [`@mdui/icons`](/es/docs/2/libraries/icons), donde cada componente de icono es un archivo independiente, lo que te permite importar solo los componentes de icono que necesitas, sin tener que importar toda la librería de iconos. ### Usar iconos SVG {#usage-svg} Este componente también admite el uso de iconos SVG como contenido del icono. Puedes pasar el enlace del icono SVG mediante el atributo `src` del componente. Por ejemplo: ```html ``` También puedes pasar el contenido SVG en el slot por defecto del componente. Por ejemplo: ```html ``` ## Ejemplos {#examples} ### Establecer color {#example-color} Modifica el color del icono estableciendo el estilo CSS `color` en el elemento `` o en su elemento padre. ```html ``` ### Establecer tamaño {#example-size} Modifica el tamaño del icono estableciendo el estilo CSS `font-size` en el elemento `` o en su elemento padre. ```html ``` ## mdui-icon API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
name name true string

Nombre del icono de Material Icons.
src src true string

Ruta del icono SVG.
### Slots
Nombre Descripción
(predeterminado)

Contenido del icono svg.
# Componente Layout Layout ofrece un sistema de diseño flexible para construir páginas complejas. ## Uso {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts import type { Layout } from 'mdui/components/layout.js'; import type { LayoutItem } from 'mdui/components/layout-item.js'; import type { LayoutMain } from 'mdui/components/layout-main.js'; ``` **Introducción:** El sistema de diseño funciona de fuera hacia dentro. Cada componente de diseño (``) ocupa espacio en una de las cuatro direcciones (arriba, abajo, izquierda o derecha), y los siguientes componentes de Layout usan el espacio restante. Los siguientes componentes heredan directamente de ``, por lo que también pueden usarse como componentes de Layout: - [``](/es/docs/2/components/navigation-bar) - [``](/es/docs/2/components/navigation-drawer) - [``](/es/docs/2/components/navigation-rail) - [``](/es/docs/2/components/bottom-app-bar) - [``](/es/docs/2/components/top-app-bar) La última pieza del sistema de diseño es el componente ``, que ocupa el espacio restante. Puedes colocar el contenido de la página dentro de este componente. ## Ejemplos {#examples} ### Orden de los componentes de Layout {#layout-default-order} Por defecto, los componentes de Layout ocupan el espacio en el orden en que aparecen en el código. Puedes entender este concepto con los siguientes dos ejemplos, donde [``](/es/docs/2/components/top-app-bar) y [``](/es/docs/2/components/navigation-drawer) aparecen en diferente orden en el código.

Consulta este ejemplo en una pantalla grande.

```html Top App Bar Navigation Drawer Contenido principal ``` ```html Navigation Drawer Top App Bar Contenido principal ``` Observa que cuando [``](/es/docs/2/components/top-app-bar) se coloca antes de [``](/es/docs/2/components/navigation-drawer), [``](/es/docs/2/components/top-app-bar) ocupa primero todo el ancho de la pantalla, mientras que [``](/es/docs/2/components/navigation-drawer) solo puede ocupar toda la altura en el espacio restante. Al intercambiar el orden, [``](/es/docs/2/components/navigation-drawer) ocupa primero toda la altura de la pantalla, y [``](/es/docs/2/components/top-app-bar) solo puede ocupar todo el ancho en el espacio restante. ### Posición de los componentes de Layout {#example-placement} En el componente `` puedes usar el atributo `placement` para indicar su posición dentro del layout (arriba, abajo, izquierda o derecha). Para los componentes [``](/es/docs/2/components/navigation-drawer) y [``](/es/docs/2/components/navigation-rail), también puedes usar el atributo `placement` para especificar su posición izquierda o derecha. En el siguiente ejemplo, colocamos dos componentes `` en los laterales de la aplicación. ```html Top App Bar Elemento de diseño Elemento de diseño Contenido principal ``` ### Personalizar el orden de los componentes de Layout {#example-order} En la mayoría de los casos, simplemente colocando los componentes de Layout en orden se logrará el diseño deseado. También puedes usar el atributo `order` para especificar el orden de diseño. El sistema organizará los componentes según el valor de `order` de menor a mayor. Si los `order` son iguales, se organizan según el orden del código. El `order` predeterminado de todos los componentes de Layout es `0`. ```html Elemento de diseño Top App Bar
order="-1" Contenido principal ``` ## mdui-layout-item API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

Posición del componente. Los valores posibles son:

  • top: Superior
  • bottom: Inferior
  • left: Izquierda
  • right: Derecha
order order true number

Orden de layout de este componente dentro de <mdui-layout>, de menor a mayor. El valor predeterminado es 0.
### Slots
Nombre Descripción
(predeterminado)

Puede contener cualquier contenido.
## mdui-layout-main API ### Slots
Nombre Descripción
(predeterminado)

Puede contener cualquier contenido.
## mdui-layout API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
full-height fullHeight true boolean false

Establece la altura del Layout al 100%.
### Slots
Nombre Descripción
(predeterminado)

Puede contener elementos <mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item>, <mdui-layout-main>.
# Componente Progreso lineal El componente Progreso lineal es un indicador horizontal que se usa para mostrar al usuario el progreso de ejecución de una tarea, como la carga de datos o el envío de un formulario. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/linear-progress.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` Uso: ```html ``` ## Ejemplos {#examples} ### Establecer el progreso {#example-value} El progreso lineal tiene un progreso indeterminado por defecto. El atributo `value` define el progreso actual; el valor máximo predeterminado es `1`. ```html ``` También puedes usar el atributo `max` para establecer el valor máximo del progreso. ```html ``` ## mdui-linear-progress API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
max max true number 1

Valor máximo del indicador de progreso. Por defecto 1.
value value false number

Valor actual del indicador de progreso. Si no se especifica, está en estado indeterminado.
### CSS Parts
Nombre Descripción
indicator

Parte del indicador.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Lista 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 {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts 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: ```html Subencabezado Elemento 1 Elemento 2 ``` ## Ejemplos {#examples} ### Contenido de texto {#example-text} El atributo `headline` del componente `` define el texto principal del elemento de la lista. El atributo `description` define el texto secundario. ```html ``` También puedes establecer el texto principal mediante el slot por defecto, y el texto secundario mediante el slot `description`. ```html Título Título Texto de apoyo ``` 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. ```html 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 ``` ### Contenido lateral {#example-side} Los atributos `icon` y `end-icon` en el componente `` permiten añadir iconos de Material Icons a la izquierda y derecha del elemento de la lista. ```html Título ``` También puedes añadir elementos a la izquierda y derecha del elemento de la lista mediante los slots `icon` y `end-icon`. ```html Título ``` ### Enlace {#example-link} Con el atributo `href`, el elemento de la lista actúa como enlace. También puedes usar `download`, `target` y `rel`. ```html Título ``` ### Estado deshabilitado {#example-disabled} Añade el atributo `disabled` al componente `` 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. ```html Título Título ``` ### Estado activo {#example-active} Añade el atributo `active` al componente `` para activar ese elemento de la lista. ```html Título Título ``` ### Estado no clicable {#example-nonclickable} El atributo `nonclickable` al componente `` 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. ```html Título Título ``` ### Forma redondeada {#example-rounded} El atributo `rounded` al componente ``, el elemento de la lista tendrá una forma redondeada. ```html Título Título ``` ### Alineación vertical {#example-alignment} El atributo `alignment` en el componente ``, 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 ```html Título Título Título ``` ### Contenido personalizado {#example-custom} Usando el slot `custom` en el componente ``, puedes personalizar completamente el contenido del elemento de la lista. ```html
prueba
 ``` ## mdui-list-item API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
headline headline true string

Texto principal. También se puede establecer mediante el slot predeterminado.
headline-line headlineLine true 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 true string

Texto secundario. También se puede establecer mediante slot="description".
description-line descriptionLine true 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 true string

Nombre del icono de Material Icons a la izquierda. También se puede establecer mediante slot="icon".
end-icon endIcon true string

Nombre del icono de Material Icons a la derecha. También se puede establecer mediante slot="end-icon".
disabled disabled true 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 true boolean false

Indica si este elemento de lista está activo.
nonclickable nonclickable true 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 true boolean false

Indica si el elemento de lista tiene esquinas redondeadas.
alignment alignment true '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 true 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 true string

Nombre del archivo para el enlace de descarga.

Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
target target true '_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 true '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 true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
### Slots
Nombre Descripción
(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 Descripción
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 Descripción
--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 Descripción
(predeterminado)

Texto del subencabezado de la lista.
## mdui-list API ### Slots
Nombre Descripción
(predeterminado)

Elementos <mdui-list-item>.
# Componente Menú El componente Menú muestra una lista vertical de opciones. Se abre cuando el usuario interactúa con un botón u otro control. Si necesitas implementar un menú desplegable, puedes combinarlo con el componente [``](/es/docs/2/components/dropdown). ## Uso {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Uso: ```html Elemento 1 Elemento 2 ``` ## Ejemplos {#examples} ### Menú desplegable {#example-dropdown} Combínalo con el componente [``](/es/docs/2/components/dropdown) para implementar un menú desplegable. ```html Abrir menú desplegable Elemento 1 Elemento 2 ``` ### Diseño compacto {#example-dense} Añade el atributo `dense` al componente `` para lograr un diseño compacto. ```html Elemento 1 Elemento 2 Elemento 3 ``` ### Deshabilitar elementos del menú {#example-disabled} Añade el atributo `disabled` al componente `` para deshabilitar un elemento del menú. ```html Elemento 1 Elemento 2 Elemento 3 ``` ### Soporte de selección única {#example-selects-single} Si especificas el atributo `selects` como `single` en el componente ``, puedes habilitar la selección única. En este caso, el valor de `value` del `` es el valor del `` seleccionado actualmente. ```html Elemento 1 Elemento 2 ``` ### Soporte de selección múltiple {#example-selects-multiple} Si especificas el atributo `selects` como `multiple` en el componente ``, puedes habilitar la selección múltiple. En este caso, el valor de `value` del `` es un array con los valores de los `` seleccionados. Nota: En el modo de selección múltiple, el valor de `value` del `` es un array y solo se puede leer y establecer mediante la propiedad JavaScript. ```html Elemento 1 Elemento 2 Elemento 3 ``` ### Icono {#example-icon} En el componente ``, usando los atributos `icon` y `end-icon` permiten añadir iconos de Material Icons a la izquierda y derecha del elemento del menú. El atributo `end-text` añade texto a la derecha. Además, también puedes añadir iconos y texto a la izquierda y derecha mediante los slots `icon`, `end-icon` y `end-text`. Si necesitas dejar un espacio en blanco a la izquierda del elemento del menú para mantener la alineación con otros elementos define el atributo `icon` como una cadena vacía. ```html Elemento 1 Elemento 2 Ctrl+X Elemento 3 ``` En los modos de selección única o múltiple, puedes usar el atributo `selected-icon` o el slot `selected-icon` para definir el icono del estado seleccionado. ```html Elemento 1 Elemento 2 ``` ### Enlace {#example-link} Si usas el atributo `href` en el componente ``, el elemento del menú se convierte en un enlace. También puedes usar los atributos relacionados con enlaces: `download`, `target` y `rel`. ```html Elemento 1 Elemento 2 ``` ### Submenú {#example-submenu} En `` puedes usar el slot `submenu` para definir los elementos del submenú. ```html Interlineado Sencillo 1.5 Doble Personalizado: 1.2 Estilo de párrafo ``` En `` puedes usar el atributo `submenu-trigger` para definir cómo se activa el submenú. ```html Interlineado Sencillo 1.5 Doble Personalizado: 1.2 Estilo de párrafo ``` Cuando `submenu-trigger` se establece en `hover`, puedes usar `submenu-open-delay` y `submenu-close-delay` en `` para ajustar el retraso de apertura y cierre del submenú. ```html Interlineado Sencillo 1.5 Doble Personalizado: 1.2 Estilo de párrafo ``` ### Contenido personalizado {#example-custom} En `` puedes usar el slot `custom` para personalizar por completo el contenido del elemento del menú. ```html
ABS
Valor absoluto del número
ACOS
Arco coseno del número, en radianes
ACOSH
Arco coseno hiperbólico del número
 ``` ## mdui-menu-item API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
value value true string

Valor del elemento de menú.
disabled disabled true boolean false

Indica si el elemento de menú está deshabilitado.
icon icon true string

Nombre del icono de Material Icons a la izquierda. También se puede establecer mediante slot="icon".

Si no es necesario mostrar un icono a la izquierda, pero se necesita reservar un espacio para el icono, se puede pasar una cadena vacía para ocupar el lugar.
end-icon endIcon true string

Nombre del icono de Material Icons a la derecha. También se puede establecer mediante slot="end-icon".
end-text endText true string

Texto a la derecha. También se puede establecer mediante slot="end-text".
selected-icon selectedIcon true string

Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante slot="selected-icon".
submenu-open submenuOpen true boolean false

Indica si el submenú está abierto.
href href true 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 true string

Nombre del archivo para el enlace de descarga.

Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
target target true '_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 true '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 true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
submenu-open

Se dispara cuando el submenú comienza a abrirse. Se puede evitar que se abra llamando a event.preventDefault().
submenu-opened

Se dispara cuando la animación de apertura del submenú se completa.
submenu-close

Se dispara cuando el submenú comienza a cerrarse. Se puede evitar que se cierre llamando a event.preventDefault().
submenu-closed

Se dispara cuando la animación de cierre del submenú se completa.
### Slots
Nombre Descripción
(predeterminado)

Texto del elemento de menú.
icon

Icono izquierdo del elemento de menú.
end-icon

Icono derecho del elemento de menú.
end-text

Texto a la derecha del menú.
selected-icon

Icono en estado seleccionado.
submenu

Submenú.
custom

Cualquier contenido personalizado.
### CSS Parts
Nombre Descripción
container

Contenedor del elemento de menú.
icon

Icono izquierdo.
label

Contenido de texto.
end-icon

Icono derecho.
end-text

Texto derecho.
selected-icon

Icono en estado seleccionado.
submenu

Elemento de submenú.
## mdui-menu API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
selects selects true 'single' | 'multiple'

Indica el modo de selección de los elementos del menú. Por defecto, no son seleccionables. Los valores posibles son:

  • single: Selección única
  • multiple: Selección múltiple
value value false string | string[]

Valor del <mdui-menu-item> actualmente seleccionado.

Nota: El atributo HTML de esta propiedad siempre es una cadena, y solo se puede establecer un valor inicial mediante el atributo HTML cuando selects="single". El valor de la propiedad de JavaScript es una cadena cuando selects="single", y es un array de cadenas cuando selects="multiple". Por lo tanto, cuando selects="multiple", para modificar este valor, solo se puede modificar la propiedad de JavaScript.
dense dense true boolean false

Indica si los elementos del menú utilizan un diseño compacto.
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

Modo de activación del submenú, admite múltiples valores separados por espacios. Los valores posibles son:

  • click: Abrir el submenú al hacer clic en el elemento del menú
  • hover: Abrir el submenú al pasar el ratón sobre el elemento del menú
  • focus: Abrir el submenú cuando el elemento del menú recibe el foco
  • manual: Solo se puede abrir y cerrar mediante programación, no se pueden especificar otras formas de activación
submenu-open-delay submenuOpenDelay true number 200

Retraso para abrir el submenú al pasar el ratón, en milisegundos.
submenu-close-delay submenuCloseDelay true number 200

Retraso para cerrar el submenú al pasar el ratón, en milisegundos.
### Métodos
Nombre Descripción
focus(options?: FocusOptions): void

Establece el foco en el elemento actual.
blur(): void

Quita el foco del elemento actual.
### Eventos
Nombre Descripción
change

Se dispara cuando cambia el estado de selección de los elementos del menú.
### Slots
Nombre Descripción
(predeterminado)

Elementos como submenús (<mdui-menu-item>), separadores (<mdui-divider>), etc.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Navigation Bar El componente Navigation Bar permite alternar entre varias páginas principales en dispositivos móviles. ## Uso {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts import type { NavigationBar } from 'mdui/components/navigation-bar.js'; import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js'; ``` Uso: (Nota: el `style="position: relative"` en el ejemplo es solo para demostración; elimina este estilo en uso real.) ```html Elemento 1 Elemento 2 Elemento 3 ``` **Notas importantes:** Este componente usa `position: fixed` por defecto y añade automáticamente `padding-bottom` 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: 1. Cuando se indica el atributo `scroll-target`. En este caso, se añade `padding-bottom` al elemento `scroll-target`. 2. Cuando el componente está dentro de [``](/es/docs/2/components/layout). En este caso, no se añade `padding-bottom`. ## Ejemplos {#examples} ### Visibilidad de la etiqueta de texto {#example-label-visibility} La etiqueta de texto en la barra de navegación se muestra siempre cuando hay 3 o menos elementos de navegación; cuando hay más de 3 elementos, solo se muestra el texto del elemento seleccionado. ```html Elemento 1 Elemento 2 Elemento 3
Elemento 1 Elemento 2 Elemento 3 Elemento 4 ``` Puedes ajustar la visibilidad de la etiqueta de texto estableciendo el atributo `label-visibility` en el componente ``. Los valores posibles son: - `selected`: Solo muestra el texto del elemento seleccionado - `labeled`: Muestra siempre el texto - `unlabeled`: Nunca muestra el texto ```html Elemento 1 Elemento 2 Elemento 3 selected labeled sin etiqueta ``` ### Dentro de un contenedor especificado {#example-scroll-target} Por defecto, la barra de navegación se muestra en la parte inferior de la página, tomando la ventana como referencia. Si quieres colocar la barra de navegación dentro de un contenedor específico, define el atributo `scroll-target` en el componente ``. El valor debe ser el selector CSS o elemento DOM del contenedor con contenido desplazable. En este caso, la barra de navegación se posicionará tomando como referencia el elemento padre (debes añadir manualmente los estilos `position: relative; overflow: hidden` al elemento padre). ```html
Elemento 1 Elemento 2 Elemento 3
Contenido de la página
``` ### Ocultar al desplazar {#example-scroll-behavior} Con el atributo `scroll-behavior="hide"` en ``, la barra de navegación se oculta al desplazarte hacia abajo y vuelve a mostrarse al desplazarte hacia arriba. El atributo `scroll-threshold` define cuántos píxeles desplazar antes de comenzar a ocultar la barra de navegación. ```html
Elemento 1 Elemento 2 Elemento 3
Contenido de la página
``` ### Icono {#example-icon} En el componente ``, el atributo `icon` se usa para establecer el icono del elemento de navegación en estado inactivo, y el atributo `active-icon` para establecer el icono en estado activo. También puedes usar los slots `icon` y `active-icon` para establecer los elementos del icono en estado inactivo y activo. ```html Elemento 1 Elemento 2 ``` ### Enlace {#example-link} Con el atributo `href` en el componente ``, el elemento de navegación actúa como enlace. También puedes usar `download`, `target` y `rel`. ```html Elemento 1 Elemento 2 ``` ### Badge {#example-badge} En el componente ``, puedes añadir un Badge mediante el slot `badge`. ```html Elemento 1 99+ Elemento 2 ``` ## mdui-navigation-bar-item API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
icon icon true string

Nombre del icono de Material Icons para el estado inactivo. También se puede establecer mediante slot="icon".
active-icon activeIcon true string

Nombre del icono de Material Icons para el estado activo. También se puede establecer mediante slot="active-icon".
value value true string

Valor del elemento de navegación.
href href true 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 true string

Nombre del archivo para el enlace de descarga.

Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
target target true '_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 true '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 true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
### Slots
Nombre Descripción
(predeterminado)

Texto del elemento de navegación.
icon

Icono.
active-icon

Elemento de icono en estado activo.
badge

Badge.
### CSS Parts
Nombre Descripción
container

Contenedor del elemento de navegación.
indicator

Indicador.
badge

Badge.
icon

Icono.
active-icon

Icono en estado activo.
label

Texto del elemento de navegación.
### CSS Custom Properties
Nombre Descripción
--shape-corner-indicator

Tamaño de la esquina redondeada del indicador. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
## mdui-navigation-bar API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
hide hide true boolean false

Indica si está oculto.
label-visibility labelVisibility true 'auto' | 'selected' | 'labeled' | 'unlabeled' 'auto'

Visibilidad del texto. Los valores posibles son:

  • auto: Cuando hay 3 opciones o menos, el texto se muestra siempre; cuando hay más de 3, solo se muestra el texto de la opción seleccionada
  • selected: Mostrar texto solo en el estado seleccionado
  • labeled: Mostrar texto siempre
  • unlabeled: No mostrar texto nunca
value value true string

Valor del <mdui-navigation-bar-item> actualmente seleccionado.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Comportamiento al hacer scroll. Los valores posibles son:

  • hide: Ocultar al hacer scroll
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Elemento en el que se escuchan los eventos de scroll. El valor puede ser un selector CSS, un elemento DOM o un objeto JQ. Por defecto, escucha los eventos de scroll de window.
scroll-threshold scrollThreshold true number

Distancia de desplazamiento necesaria para activar el comportamiento, en px.
order order true number

Orden de layout de este componente dentro de <mdui-layout>, de menor a mayor. El valor predeterminado es 0.
### Eventos
Nombre Descripción
change

Se dispara cuando cambia el valor.
show

Se dispara cuando comienza a mostrarse. Se puede evitar que se muestre llamando a event.preventDefault().
shown

Se dispara cuando la animación de mostrar se completa.
hide

Se dispara cuando comienza a ocultarse. Se puede evitar que se oculte llamando a event.preventDefault().
hidden

Se dispara cuando la animación de ocultar se completa.
### Slots
Nombre Descripción
(predeterminado)

Componentes <mdui-navigation-bar-item>.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Navigation Drawer El componente Navigation Drawer se usa para ofrecer navegación lateral y permitir acceder rápidamente a distintas páginas o contenidos. Normalmente, dentro del Navigation Drawer se usa el componente [``](/es/docs/2/components/list) para añadir elementos de navegación. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/navigation-drawer.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` Uso: ```html Cerrar Navigation Drawer Abrir Navigation Drawer ``` **Notas importantes:** Este componente usa `position: fixed` por defecto. Cuando `modal` es `false` y el ancho de la ventana es mayor o igual que [`--mdui-breakpoint-md`](/es/docs/2/styles/design-tokens#breakpoint), se 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: 1. Cuando el atributo `contained` es `true`. 2. Cuando el componente está dentro de [``](/es/docs/2/components/layout). En este caso, no se añade `padding-left` ni `padding-right`. ## Ejemplos {#examples} ### Dentro de un contenedor especificado {#example-contained} Por defecto, el Navigation Drawer se muestra en la parte izquierda o derecha de la página, tomando la ventana como referencia. Si quieres colocar el Navigation Drawer dentro de un contenedor específico, puedes añadir el atributo `contained`. En este caso, el Navigation Drawer se posicionará tomando como referencia el elemento padre (debes añadir manualmente los estilos `position: relative; overflow: hidden;` al elemento padre). ```html
Cerrar Navigation Drawer
Abrir Navigation Drawer
``` ### Modal {#example-modal} El atributo `modal` muestra una capa de superposición al abrir el Navigation Drawer. Ten en cuenta que cuando el ancho de la ventana o del elemento padre es menor que [`--mdui-breakpoint-md`](/es/docs/2/styles/design-tokens#breakpoint), se ignorará este parámetro y siempre se mostrará la capa de superposición. Con el atributo `close-on-esc`, el Navigation Drawer se puede cerrar al pulsar la tecla ESC. Con el atributo `close-on-overlay-click`, el Navigation Drawer se puede cerrar al hacer clic en la capa de superposición. ```html
Cerrar Navigation Drawer
Abrir Navigation Drawer
``` ### En el lado derecho {#example-placement} Con el atributo `placement="right"`, el Navigation Drawer se muestra en el lado derecho de la página. ```html
Cerrar Navigation Drawer
Abrir Navigation Drawer
``` ## mdui-navigation-drawer API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
open open true boolean false

Indica si el Navigation Drawer está abierto.
modal modal true boolean false

Indica si se muestra una superposición cuando el Navigation Drawer está abierto.

En dispositivos de pantalla estrecha (ancho de pantalla menor que --mdui-breakpoint-md), la superposición siempre se muestra, ignorando este parámetro.
close-on-esc closeOnEsc true boolean false

Indica si el Navigation Drawer se cierra al presionar ESC cuando hay una superposición.
close-on-overlay-click closeOnOverlayClick true boolean false

Indica si se cierra el Navigation Drawer al hacer clic en la superposición.
placement placement true 'left' | 'right' 'left'

Posición del Navigation Drawer. Los valores posibles son:

  • left: Izquierda
  • right: Derecha
contained contained true boolean false

De forma predeterminada, el Navigation Drawer se muestra relativo al elemento body. Cuando esta propiedad se define como true, el Navigation Drawer se mostrará relativo a su elemento padre.

Nota: Al definir esta propiedad, se debe establecer manualmente el estilo en el elemento padre: position: relative; overflow: hidden;.
order order true number

Orden de layout de este componente dentro de <mdui-layout>, de menor a mayor. El valor predeterminado es 0.
### Eventos
Nombre Descripción
open

Se dispara antes de que se abra el Navigation Drawer. Se puede evitar que se abra llamando a event.preventDefault().
opened

Se dispara después de que la animación de apertura del Navigation Drawer se completa.
close

Se dispara antes de que se cierre el Navigation Drawer. Se puede evitar que se cierre llamando a event.preventDefault().
closed

Se dispara después de que la animación de cierre del Navigation Drawer se completa.
overlay-click

Se dispara al hacer clic en la superposición.
### Slots
Nombre Descripción
(predeterminado)

Contenido del Navigation Drawer.
### CSS Parts
Nombre Descripción
overlay

Superposición.
panel

Contenedor del Navigation Drawer.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Navigation Rail El componente Navigation Rail ofrece una forma cómoda de acceder a distintas páginas principales en tabletas y equipos de escritorio. ## Uso {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts 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.) ```html Recientes Imágenes Biblioteca ``` **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: 1. Cuando el atributo `contained` del componente `` es `true`. En este caso, se añade `padding-left` o `padding-right` al elemento padre. 2. Cuando está dentro del componente [``](/es/docs/2/components/layout). En este caso, no se añade `padding-left` ni `padding-right`. ## Ejemplos {#examples} ### Dentro de un contenedor especificado {#example-contained} 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 ``. 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). ```html
Recientes Imágenes Biblioteca
Contenido de la página
``` ### En el lado derecho {#example-placement} Con el atributo `placement="right"` en ``, el Navigation Rail se muestra a la derecha. ```html
Recientes Imágenes Biblioteca
Contenido de la página
``` ### Mostrar separador {#example-divider} El atributo `divider` al componente ``, se añade una línea divisoria al Navigation Rail para distinguirlo del contenido de la página. ```html
Recientes Imágenes Biblioteca
Contenido de la página
``` ### Añadir elementos en la parte superior/inferior {#example-top-bottom} También puedes añadir elementos en la parte superior e inferior dentro del componente `` mediante los slots `top` y `bottom`. ```html
Recientes Imágenes Biblioteca
Contenido de la página
``` ### Alineación vertical de los elementos de navegación {#example-alignment} Si usas el atributo `alignment` del componente ``, puedes modificar la alineación vertical de los elementos de navegación. ```html
Recientes Imágenes Biblioteca
inicio centro final
``` ### Icono {#example-icon} En `` 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`. ```html
Recientes Imágenes Biblioteca
Contenido de la página
``` ### Solo icono {#example-no-label} El componente `` puede usarse solo con el icono, sin texto. ```html
Contenido de la página
``` ### Enlace {#example-link} Con el atributo `href` en el componente ``, el elemento de navegación actúa como enlace. También puedes usar `download`, `target` y `rel`. ```html
Recientes Imágenes Biblioteca
Contenido de la página
``` ### Badge {#example-badge} En el componente ``, puedes añadir un Badge mediante el slot `badge`. ```html
Recientes 99+ Imágenes Biblioteca
Contenido de la página
``` ## mdui-navigation-rail-item API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
icon icon true string

Nombre del icono de Material Icons para el estado inactivo. También se puede establecer mediante slot="icon".
active-icon activeIcon true string

Nombre del icono de Material Icons para el estado activo. También se puede establecer mediante slot="active-icon".
value value true string

Valor del elemento de navegación.
href href true 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 true string

Nombre del archivo para el enlace de descarga.

Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
target target true '_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 true '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 true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
### Slots
Nombre Descripción
(predeterminado)

Contenido de texto.
icon

Icono.
active-icon

Icono en estado activo.
badge

Badge.
### CSS Parts
Nombre Descripción
container

Contenedor del elemento de navegación.
indicator

Indicador.
badge

Badge.
icon

Icono.
active-icon

Icono en estado activo.
label

Contenido de texto.
### CSS Custom Properties
Nombre Descripción
--shape-corner-indicator

Tamaño de la esquina redondeada del indicador. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
## mdui-navigation-rail API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
value value true string

Valor del <mdui-navigation-rail-item> actualmente seleccionado.
placement placement true 'left' | 'right' 'left'

Posición de la barra de navegación. Los valores posibles son:

  • left: Izquierda
  • right: Derecha
alignment alignment true 'start' | 'center' | 'end' 'start'

Alineación de los elementos <mdui-navigation-rail-item>. Los valores posibles son:

  • start: Alineado arriba
  • center: Centrado
  • end: Alineado abajo
contained contained true 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 true 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 true number

Orden de layout de este componente dentro de <mdui-layout>, de menor a mayor. El valor predeterminado es 0.
### Eventos
Nombre Descripción
change

Se dispara cuando cambia el valor.
### Slots
Nombre Descripción
(predeterminado)

Componentes <mdui-navigation-rail-item>.
top

Elemento superior.
bottom

Elemento inferior.
### CSS Parts
Nombre Descripción
top

Contenedor del elemento superior.
bottom

Contenedor del elemento inferior.
items

Contenedor de los componentes <mdui-navigation-rail-item>.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Radio El componente Radio permite a los usuarios seleccionar una opción de un conjunto, asegurando que solo una opción esté seleccionada a la vez. ## Uso {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` Uso: ```html Chino Inglés ``` ## Ejemplos {#examples} ### Estado seleccionado {#example-checked} El valor del atributo `value` del componente `` es el valor del componente `` seleccionado actualmente. También puedes cambiar el radio seleccionado actualmente actualizando el valor del atributo `value` del componente ``. ```html Chino Inglés ``` Puedes usar el componente `` por separado y leer o modificar su estado seleccionado mediante el atributo `checked`. ```html Radio ``` ### Estado deshabilitado {#example-disabled} Añade el atributo `disabled` al componente `` para deshabilitar todo el grupo de radios. ```html Chino Inglés ``` Si necesitas deshabilitar un radio específico, añade el atributo `disabled` al componente ``. ```html Chino Inglés ``` ### Icono {#example-icon} Los atributos `unchecked-icon` y `checked-icon` define los iconos de Material Icons en los estados no seleccionado y seleccionado respectivamente. También puedes establecerlos mediante los slots `unchecked-icon` y `checked-icon`. ```html Chino Inglés ``` ## mdui-radio-group API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
disabled disabled true boolean false

Indica si este componente está deshabilitado.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.
name name true string ''

Nombre del grupo de radio, que se enviará con los datos del formulario.
value value true string ''

Valor seleccionado actualmente en el grupo de radio, que se enviará junto con los datos del formulario.
undefined defaultValue false string ''

Valor seleccionado por defecto. Al restablecer el formulario, se restaurará a este valor. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
required required true boolean false

Indica si es obligatorio seleccionar una opción al enviar el formulario.
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
### Métodos
Nombre Descripción
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
### Eventos
Nombre Descripción
change

Se dispara cuando cambia el valor seleccionado.
input

Se dispara cuando cambia el valor seleccionado.
invalid

Se dispara cuando falla la validación del campo del formulario.
### Slots
Nombre Descripción
(predeterminado)

Elementos <mdui-radio>.
## mdui-radio API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
value value true string ''

Valor actual del Radio.
disabled disabled true boolean false

Indica si este Radio está deshabilitado.
checked checked true boolean false

Indica si el Radio actual está seleccionado.
unchecked-icon uncheckedIcon true string

Nombre del icono de Material Icons para el estado no seleccionado. También se puede establecer mediante slot="unchecked-icon".
checked-icon checkedIcon true string

Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante slot="checked-icon".
autofocus autofocus true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
change

Se dispara cuando se selecciona este Radio.
### Slots
Nombre Descripción
(predeterminado)

Contenido de texto.
unchecked-icon

Icono en estado no seleccionado.
checked-icon

Icono en estado seleccionado.
### CSS Parts
Nombre Descripción
control

Contenedor del icono izquierdo.
unchecked-icon

Icono en estado no seleccionado.
checked-icon

Icono en estado seleccionado.
label

Contenido de texto.
# Componente Range Slider El componente Range Slider permite seleccionar un rango de valores dentro de una serie. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/range-slider.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` Uso: ```html ``` ## Ejemplos {#examples} ### Valor predeterminado {#example-value} Con el atributo `value` puedes leer o establecer el valor actual del Range Slider. Este atributo es un array y solo se puede leer y establecer mediante la propiedad JavaScript. ```html ``` ### Estado deshabilitado {#example-disabled} El atributo `disabled` deshabilita el Range Slider. ```html ``` ### Rango {#example-min-max} Los atributos `min` y `max` establecen los valores mínimo y máximo del Range Slider. ```html ``` ### Intervalo de paso {#example-step} El atributo `step` define el intervalo de paso del Range Slider. ```html ``` ### Marcas de graduación {#example-tickmarks} El atributo `tickmarks` añade marcas de graduación al Range Slider. ```html ``` ### Ocultar la Tooltip {#example-nolabel} El atributo `nolabel` oculta la Tooltip en el Range Slider. ```html ``` ### Personalizar la Tooltip {#example-labelFormatter} Con la propiedad JavaScript `labelFormatter`, puedes modificar el formato de visualización de la Tooltip. Esta propiedad es una función que recibe el valor actual del Range Slider y devuelve el texto que deseas mostrar. ```html ``` ## mdui-range-slider API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
undefined defaultValue false number[] []

Valor por defecto. Al restablecer el formulario, se restaurará a este valor. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
undefined value false number[]

Valor del Range Slider, en formato de array, que se enviará con los datos del formulario.

NOTA: Esta propiedad no se puede establecer mediante un atributo HTML. Si se desea modificar este valor, solo se puede modificar la propiedad de JavaScript.
autofocus autofocus true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
min min true number 0

Valor mínimo del slider, por defecto 0.
max max true number 100

Valor máximo del slider, por defecto 100.
step step true number 1

Intervalo de paso, por defecto 1.
tickmarks tickmarks true boolean false

Indica si se deben mostrar marcas de graduación.
nolabel nolabel true boolean false

Indica si se oculta la etiqueta de texto.
disabled disabled true boolean false

Indica si está deshabilitado.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.
name name true string ''

Nombre del slider, que se enviará con los datos del formulario.
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
undefined labelFormatter false (value: number) => string

Función para personalizar el formato de la etiqueta. La función recibe el valor actual del slider y debe devolver el texto a mostrar.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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.
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
### Eventos
Nombre Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
change

Se dispara cuando el valor cambia y se pierde el foco.
input

Se dispara cuando el valor cambia.
invalid

Se dispara cuando falla la validación del campo del formulario.
### CSS Parts
Nombre Descripción
track-inactive

Pista inactiva.
track-active

Pista activa.
handle

Mango.
label

Texto de la etiqueta.
tickmark

Marca de graduación.
# Componente Select El componente Select muestra varias opciones en un menú desplegable para que el usuario elija rápidamente la opción que necesita. Esta página describe principalmente el uso del componente ``. Para el uso de los elementos del menú desplegable, consulta [``](/es/docs/2/components/menu#menu-item-api). ## Uso {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Uso: ```html Elemento 1 Elemento 2 ``` ## Ejemplos {#examples} ### Forma {#example-variant} El atributo `variant` define la forma del Select. ```html Elemento 1 Elemento 2 Elemento 1 Elemento 2 ``` ### Soporte de selección múltiple {#example-multiple} El Select es de selección única por defecto, y el valor de `value` del componente `` es el valor del [``](/es/docs/2/components/menu#menu-item-api) seleccionado actualmente. El atributo `multiple` hace que el Select soporte selección múltiple. En este caso, el valor de `value` del `` es un array con los valores de los [``](/es/docs/2/components/menu#menu-item-api) seleccionados. Nota: Cuando se soporta selección múltiple, el valor de `value` del `` es un array y solo se puede leer y establecer mediante la propiedad JavaScript. ```html Elemento 1 Elemento 2 Elemento 3 ``` ### Texto de ayuda {#example-helper-text} El atributo `label` define el texto de la etiqueta sobre el Select. ```html Elemento 1 Elemento 2 ``` El atributo `placeholder` define el texto de marcador de posición cuando no hay ningún valor seleccionado. ```html Elemento 1 Elemento 2 ``` El atributo `helper` define el texto de ayuda en la parte inferior del Select. También puedes usar el slot `helper` para definirlo. ```html Elemento 1 Elemento 2 Elemento 1 Elemento 2 Texto de apoyo ``` ### Modo de solo lectura {#example-readonly} El atributo `readonly` define el Select en modo de solo lectura. ```html Elemento 1 Elemento 2 ``` ### Modo deshabilitado {#example-disabled} El atributo `disabled` deshabilita el Select. ```html Elemento 1 Elemento 2 ``` ### Limpiable {#example-clearable} El atributo `clearable`, cuando el Select tiene un valor, aparece un botón de limpiar en el lado derecho. ```html Elemento 1 Elemento 2 ``` También puedes personalizar el botón de limpiar mediante el slot `clear`. ```html Elemento 1 Elemento 2 ``` ### Posición del menú desplegable {#example-placement} El atributo `placement` define la posición del menú desplegable. ```html Elemento 1 Elemento 2 ``` ### Texto alineado a la derecha {#example-end-aligned} Con el atributo `end-aligned` puedes alinear el texto a la derecha. ```html Elemento 1 Elemento 2 ``` ### Texto e iconos delante/detrás {#example-prefix-suffix} Los atributos `icon` y `end-icon` permiten añadir iconos de Material Icons a la izquierda y derecha del Select. También puedes añadir elementos a la izquierda y derecha mediante los slots `icon` y `end-icon`. ```html Elemento 1 Elemento 2

Elemento 1 Elemento 2 ``` Los atributos `prefix` y `suffix` permiten añadir texto a la izquierda y derecha del Select. También puedes añadir elementos de texto a la izquierda y derecha mediante los slots `prefix` y `suffix`. Estos textos solo se muestran cuando el Select está enfocado o tiene un valor. ```html Elemento 1 Elemento 2

Elemento 1 Elemento 2 $ /100 ``` ## mdui-select API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'filled' | 'outlined' 'filled'

Estilo del Select. Los valores posibles son:

  • filled: Select con color de fondo, efecto visual intenso
  • outlined: Select con borde, efecto visual más suave
multiple multiple true boolean false

Indica si permite selección múltiple.
name name true string ''

Nombre del Select, que se enviará con los datos del formulario.
value value false string | string[] ''

Valor del Select, que se enviará junto con los datos del formulario.

Si no se especifica el atributo multiple, este valor es una cadena; si se especifica multiple, este valor es un array de cadenas. El atributo HTML solo puede establecer un valor de cadena; si necesita establecer un valor de array, debe hacerlo mediante una propiedad de JavaScript.
undefined defaultValue false string | string[] ''

Valor seleccionado por defecto. Al restablecer el formulario, se restaurará a este valor. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
label label true string

Texto de la etiqueta.
placeholder placeholder true string

Texto de marcador de posición.
helper helper true string

Texto de ayuda en la parte inferior del Select. También se puede establecer mediante slot="helper".
clearable clearable true boolean false

Indica si se puede borrar el valor del Select.
clear-icon clearIcon true string

Nombre del icono de Material Icons para el botón de borrar que se muestra a la derecha del Select cuando es borrable. También se puede establecer mediante slot="clear-icon".
placement placement true 'auto' | 'bottom' | 'top' 'auto'

Posición del Select. Los valores posibles son:

  • auto: Determinar posición automáticamente
  • bottom: Ubicado abajo
  • top: Ubicado arriba
end-aligned endAligned true boolean false

Indica si el texto está alineado a la derecha.
prefix prefix true string

Texto de prefijo del Select. Solo se muestra cuando el Select está enfocado o tiene un valor. También se puede establecer mediante slot="prefix".
suffix suffix true string

Texto de sufijo del Select. Solo se muestra cuando el Select está enfocado o tiene un valor. También se puede establecer mediante slot="suffix".
icon icon true string

Nombre del icono de Material Icons para el icono de prefijo del Select. También se puede establecer mediante slot="icon".
end-icon endIcon true string

Nombre del icono de Material Icons para el icono de sufijo del Select. También se puede establecer mediante slot="end-icon".
error-icon errorIcon true string

Nombre del icono de Material Icons que se muestra a la derecha del Select cuando falla la validación del campo del formulario. También se puede establecer mediante slot="error-icon".
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.
readonly readonly true boolean false

Indica si está en estado de solo lectura.
disabled disabled true boolean false

Indica si está deshabilitado.
required required true boolean false

Indica si es obligatorio completar este campo al enviar el formulario.
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
autofocus autofocus true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
change

Se dispara cuando cambia el valor seleccionado.
invalid

Se dispara cuando falla la validación del campo del formulario.
clear

Se dispara al hacer clic en el botón de borrar generado por el atributo clearable. Se puede evitar que se borre el valor del Select llamando a event.preventDefault().
### Slots
Nombre Descripción
(predeterminado)

Elementos <mdui-menu-item>.
icon

Icono izquierdo.
end-icon

Icono derecho.
error-icon

Icono derecho en estado de error de validación.
prefix

Texto izquierdo.
suffix

Texto derecho.
clear-button

Botón de borrar.
clear-icon

Icono dentro del botón de borrar.
helper

Texto de ayuda en la parte inferior.
### CSS Parts
Nombre Descripción
chips

Contenedor para los chips correspondientes a los valores seleccionados en selección múltiple.
chip

Chip correspondiente a cada valor seleccionado en selección múltiple.
chip__button

Elemento <button> dentro del chip.
chip__label

Texto dentro del chip.
chip__delete-icon

Icono de eliminar dentro del chip.
text-field

Campo de texto, es decir, el elemento <mdui-text-field>.
text-field__container

Contenedor del campo de texto dentro de text-field.
text-field__icon

Icono izquierdo dentro de text-field.
text-field__end-icon

Icono derecho dentro de text-field.
text-field__error-icon

Icono derecho en estado de error de validación dentro de text-field.
text-field__prefix

Texto izquierdo dentro de text-field.
text-field__suffix

Texto derecho dentro de text-field.
text-field__label

Texto de la etiqueta dentro de text-field.
text-field__input

Elemento <input> dentro de text-field.
text-field__clear-button

Botón de borrar dentro de text-field.
text-field__clear-icon

Icono dentro del botón de borrar en text-field.
text-field__supporting

Contenedor de información auxiliar inferior dentro de text-field, que incluye helper y error.
text-field__helper

Texto de ayuda inferior dentro de text-field.
text-field__error

Texto de descripción de error inferior dentro de text-field.
menu

Menú desplegable, es decir, el elemento <mdui-menu>.
# Componente Botón segmentado El componente de botón segmentado agrupa varios botones para ofrecer opciones, cambiar vistas u ordenar elementos. ## Uso {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/segmented-button-group.js'; import 'mdui/components/segmented-button.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` Uso: ```html Día Semana Mes ``` ## Ejemplos {#examples} ### Ancho completo {#example-full-width} Añade el atributo `full-width` al elemento `` para que el componente ocupe todo el ancho. ```html Día Semana Mes ``` ### Modo de selección única {#example-selects-single} Si especificas el atributo `selects` con el valor `single` en el elemento ``, activarás el modo de selección única. En este caso, el valor de `value` del `` es el valor del `` seleccionado actualmente. ```html Día Semana Mes Día Semana Mes ``` ### Modo de selección múltiple {#example-selects-multiple} Si especificas el atributo `selects` como `multiple` en el elemento `` para habilitar el modo de selección múltiple. En este caso, el valor de `value` del `` es un array con los valores de los `` seleccionados. Nota: En el modo de selección múltiple, el valor de `value` del `` es un array y solo se puede leer y establecer mediante la propiedad JavaScript. ```html Día Semana Mes Día Semana Mes ``` ### Icono {#example-icon} En el elemento ``, usando los atributos `icon` y `end-icon` permiten añadir iconos de Material Icons a la izquierda y derecha del botón. También puedes añadir elementos a la izquierda y derecha mediante los slots `icon` y `end-icon`. ```html Día Semana Mes ``` En el elemento ``, añadiendo el atributo `selected-icon` define el icono de Material Icons para el estado seleccionado. También puedes establecerlo mediante el slot `selected-icon`. ```html Día Semana ``` ### Enlace {#example-link} En el elemento ``, estableciendo el atributo `href`, puedes convertir el botón en un enlace. También puedes usar los atributos relacionados con enlaces: `download`, `target`, `rel`. ```html Enlace Semana Mes ``` ### Estados deshabilitado y de carga {#example-disabled} El atributo `disabled` al elemento `` deshabilita todo el grupo de botones segmentados. ```html Día Semana Mes ``` En el elemento ``, añadiendo el atributo `disabled` deshabilita un botón específico; añadiendo el atributo `loading` permite añadir un estado de carga a un botón específico. ```html Día Semana Mes Año ``` ## mdui-segmented-button-group API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
full-width fullWidth true boolean false

Indica si debe ocupar todo el ancho del elemento padre.
selects selects true 'single' | 'multiple'

Estado seleccionable de los botones segmentados. Por defecto no seleccionable. Los valores posibles son:

  • single: Selección única
  • multiple: Selección múltiple
disabled disabled true boolean false

Indica si está deshabilitado.
required required true boolean false

Indica si es obligatorio seleccionar una opción al enviar el formulario.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.
name name true string ''

Nombre al enviar el formulario, que se enviará con los datos del formulario.
value value false string | string[] ''

Valor del <mdui-segmented-button> actualmente seleccionado.

Nota: El atributo HTML de esta propiedad siempre es una cadena, y solo se puede establecer un valor inicial mediante el atributo HTML cuando selects="single". El valor de la propiedad de JavaScript es una cadena cuando selects="single", y es un array de cadenas cuando selects="multiple". Por lo tanto, cuando selects="multiple", para modificar este valor, solo se puede modificar la propiedad de JavaScript.
undefined defaultValue false string | string[] ''

Valor seleccionado por defecto. Al restablecer el formulario, se restaurará a este valor. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
### Métodos
Nombre Descripción
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
### Eventos
Nombre Descripción
change

Se dispara cuando cambia el valor seleccionado.
invalid

Se dispara cuando falla la validación del campo del formulario.
### Slots
Nombre Descripción
(predeterminado)

Componentes <mdui-segmented-button>.
### CSS Custom Properties
Nombre Descripción
--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.
## mdui-segmented-button API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
icon icon true string

Nombre del icono de Material Icons a la izquierda. También se puede establecer mediante slot="icon".
end-icon endIcon true string

Nombre del icono de Material Icons a la derecha. También se puede establecer mediante slot="end-icon".
selected-icon selectedIcon true string

Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante slot="selected-icon".
href href true 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 true string

Nombre del archivo para el enlace de descarga.

Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad href.
target target true '_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 true '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 true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
disabled disabled true boolean false

Indica si está deshabilitado.
loading loading true boolean false

Indica si está en estado de carga.
name name true string ''

Nombre del botón que se enviará con los datos del formulario.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href.
value value true string ''

Valor inicial del botón que se enviará con los datos del formulario.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href.
type type true 'submit' | 'reset' | 'button' 'button'

Tipo del botón. El tipo predeterminado es button. Los tipos posibles son:

  • submit: Al hacer clic en el botón, se enviarán los datos del formulario al servidor
  • reset: Al hacer clic en el botón, se restablecerán todos los campos del formulario a sus valores iniciales
  • button: Este tipo de botón no tiene comportamiento predeterminado

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href.
formaction formAction true string

Especifica la URL a la que se enviará el formulario.

Si se especifica esta propiedad, anulará el atributo action del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href y type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Especifica el tipo de contenido al enviar el formulario al servidor. Los valores posibles son:

  • application/x-www-form-urlencoded: Valor predeterminado cuando no se especifica este atributo
  • multipart/form-data: Se usa cuando el formulario contiene un elemento <input type="file">
  • text/plain: Nuevo en HTML5, para depuración

Si se especifica esta propiedad, anulará el atributo enctype del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad href y type="submit".
formmethod formMethod true 'post' | 'get'

Especifica el método HTTP utilizado al enviar el formulario. Los valores posibles son:

  • post: Los datos del formulario se incluyen en el cuerpo de la solicitud y se envían al servidor
  • get: Los datos del formulario se adjuntan al URI del formulario con ? como separador, y el URI generado se envía al servidor. Se utiliza este método cuando el formulario no tiene efectos secundarios y solo contiene caracteres ASCII

Si se define esta propiedad, anulará el atributo method del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
formnovalidate formNoValidate true boolean false

Si se define esta propiedad, no se realizará la validación del formulario al enviarlo.

Si se define esta propiedad, anulará el atributo novalidate del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Dónde mostrar la respuesta recibida después de enviar el formulario. Los valores posibles son:

  • _self: Opción predeterminada, abrir en el marco actual
  • _blank: Abrir en una nueva ventana
  • _parent: Abrir en el marco principal
  • _top: Abrir en la ventana completa

Si se define esta propiedad, anulará el atributo target del elemento <form>.

Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad href y type="submit".
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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.
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
### Eventos
Nombre Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
invalid

Se dispara cuando falla la validación del campo del formulario.
### Slots
Nombre Descripción
(predeterminado)

Contenido de texto del botón segmentado.
icon

Icono izquierdo del botón segmentado.
selected-icon

Icono izquierdo en estado seleccionado.
end-icon

Icono derecho del botón segmentado.
### CSS Parts
Nombre Descripción
button

Elemento interno <button> o <a>.
icon

Icono izquierdo.
selected-icon

Icono izquierdo en estado seleccionado.
end-icon

Icono derecho.
label

Contenido de texto.
loading

Elemento <mdui-circular-progress> en estado de carga.
# Componente Slider El componente Slider permite a los usuarios seleccionar un valor de una serie deslizando el control deslizante. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/slider.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Slider } from 'mdui/components/slider.js'; ``` Uso: ```html ``` ## Ejemplos {#examples} ### Valor predeterminado {#example-value} Con el atributo `value` puedes leer o establecer el valor actual del Slider. ```html ``` ### Estado deshabilitado {#example-disabled} El atributo `disabled` deshabilita el Slider. ```html ``` ### Rango {#example-min-max} Los atributos `min` y `max` establecen los valores mínimo y máximo del Slider. ```html ``` ### Intervalo de paso {#example-step} El atributo `step` define el intervalo de paso del Slider. ```html ``` ### Marcas de graduación {#example-tickmarks} El atributo `tickmarks` muestra marcas de graduación en el Slider. ```html ``` ### Ocultar la Tooltip {#example-nolabel} Si quieres ocultar la Tooltip en el Slider, añade el atributo `nolabel`. ```html ``` ### Personalizar la Tooltip {#example-labelFormatter} Puedes modificar el formato de visualización de la Tooltip mediante la propiedad JavaScript `labelFormatter`. Esta propiedad es una función que recibe el valor actual del Slider y devuelve el texto que deseas mostrar. ```html ``` ## mdui-slider API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
value value false number 0

Valor del Slider, que se enviará con los datos del formulario.
undefined defaultValue false number 0

Valor por defecto. Al restablecer el formulario, se restaurará a este valor. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
autofocus autofocus true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
min min true number 0

Valor mínimo del slider, por defecto 0.
max max true number 100

Valor máximo del slider, por defecto 100.
step step true number 1

Intervalo de paso, por defecto 1.
tickmarks tickmarks true boolean false

Indica si se deben mostrar marcas de graduación.
nolabel nolabel true boolean false

Indica si se oculta la etiqueta de texto.
disabled disabled true boolean false

Indica si está deshabilitado.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.
name name true string ''

Nombre del slider, que se enviará con los datos del formulario.
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
undefined labelFormatter false (value: number) => string

Función para personalizar el formato de la etiqueta. La función recibe el valor actual del slider y debe devolver el texto a mostrar.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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.
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
### Eventos
Nombre Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
change

Se dispara cuando el valor cambia y se pierde el foco.
input

Se dispara cuando el valor cambia.
invalid

Se dispara cuando falla la validación del campo del formulario.
### CSS Parts
Nombre Descripción
track-inactive

Pista inactiva.
track-active

Pista activa.
handle

Mango.
label

Texto de la etiqueta.
tickmark

Marca de graduación.
# Componente Snackbar El componente Snackbar se usa para presentar mensajes breves sobre el estado de la aplicación en la página. Además de usar el componente directamente, mdui también ofrece una función [`mdui.snackbar`](/es/docs/2/functions/snackbar) para simplificar el uso del componente Snackbar. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/snackbar.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` Uso: ```html Foto archivada Abrir Snackbar ``` ## Ejemplos {#examples} ### Posición {#example-placement} El atributo `placement` define la posición de visualización del Snackbar. ```html
Foto archivada top-start Foto archivada top Foto archivada top-end
Foto archivada bottom-start Foto archivada bottom Foto archivada bottom-end
``` ### Botón de acción {#example-action} El atributo `action` añade un botón de acción en el lado derecho del Snackbar y especificar el texto del botón mediante este atributo. Al hacer clic en el botón de acción se activa el evento `action-click`. Si quieres que el botón de acción se muestre en estado de carga, añade el atributo `action-loading`. ```html Foto archivada Abrir Snackbar ``` También puedes añadir un elemento personalizado en el lado derecho del Snackbar mediante el slot `action`. ```html Foto archivada Deshacer Abrir Snackbar ``` ### Cierre {#example-closeable} El atributo `closeable`, aparece un botón de cierre en el lado derecho del Snackbar. Al hacer clic en este botón se cierra el Snackbar y se activa el evento `close`. ```html Foto archivada Abrir Snackbar ``` Puedes personalizar el elemento del botón de cierre mediante el slot `close-button`. ```html Foto archivada Abrir Snackbar ``` El atributo `close-icon`, puedes modificar el icono de Material Icons en el botón de cierre predeterminado. También puedes personalizar el elemento del icono en el botón de cierre mediante el slot `close-icon`. ```html Foto archivada Abrir Snackbar ``` ### Líneas de texto del mensaje {#example-message-line} Por defecto, el texto del mensaje no tiene límite de líneas. Con el atributo `message-line` puedes limitar el texto a un máximo de 2 líneas. ```html El elemento ya tiene la etiqueta "viaje". También puedes añadir una nueva etiqueta. También puedes añadir una nueva etiqueta. Abrir Snackbar ``` ### Retraso de cierre automático {#example-auto-close-delay} El atributo `auto-close-delay` define el retraso de cierre automático, en milisegundos. El valor predeterminado es 5000 milisegundos. ```html Foto archivada Abrir Snackbar ``` ### Cerrar al hacer clic fuera del área {#example-close-on-outside-click} El atributo `close-on-outside-click` hace que el Snackbar se cierre al hacer clic fuera del área del Snackbar. ```html Foto archivada Abrir Snackbar ``` ## mdui-snackbar API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
open open true boolean false

Indica si se muestra el Snackbar.
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

Posición del Snackbar. Por defecto es bottom. Los valores posibles son:

  • top: Centrada arriba
  • top-start: Arriba, alineada a la izquierda
  • top-end: Arriba, alineada a la derecha
  • bottom: Centrada abajo
  • bottom-start: Abajo, alineada a la izquierda
  • bottom-end: Abajo, alineada a la derecha
action action true string

Texto del botón de acción. También se puede definir un botón de acción mediante slot="action".
action-loading actionLoading true boolean false

Indica si el botón de acción está en estado de carga.
closeable closeable true boolean false

Indica si se muestra un botón de cierre a la derecha.
close-icon closeIcon true string

Nombre del icono de Material Icons para el botón de cierre. También se puede establecer mediante slot="close-icon".
message-line messageLine true 1 | 2

Número máximo de líneas mostradas para el mensaje. Por defecto sin límite. Los valores posibles son:

  • 1: Mostrar como máximo una línea
  • 2: Mostrar como máximo dos líneas
auto-close-delay autoCloseDelay true number 5000

Tiempo de retraso para el cierre automático (en milisegundos). Establecer en 0 para no cerrar automáticamente. Por defecto 5000 milisegundos.
close-on-outside-click closeOnOutsideClick true boolean false

Indica si el Snackbar se cierra al hacer clic o tocar fuera de su área.
### Eventos
Nombre Descripción
open

Se dispara cuando el Snackbar comienza a mostrarse. Se puede evitar que se muestre llamando a event.preventDefault().
opened

Se dispara cuando la animación de mostrar del Snackbar se completa.
close

Se dispara cuando el Snackbar comienza a ocultarse. Se puede evitar que se oculte llamando a event.preventDefault().
closed

Se dispara cuando la animación de ocultar del Snackbar se completa.
action-click

Se dispara al hacer clic en el botón de acción.
### Slots
Nombre Descripción
(predeterminado)

Contenido del mensaje del Snackbar.
action

Botón de acción a la derecha.
close-button

Botón de cierre a la derecha. Se debe establecer el atributo closeable en true para que se muestre.
close-icon

Icono dentro del botón de cierre.
### CSS Parts
Nombre Descripción
message

Texto del mensaje.
action

Botón de acción.
close-button

Botón de cierre.
close-icon

Icono dentro del botón de cierre.
### CSS Custom Properties
Nombre Descripción
--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.
# Componente Switch El componente Switch se usa para alternar el estado de encendido o apagado de una sola opción, permitiendo al usuario ajustar la configuración fácilmente mediante una interacción intuitiva. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/switch.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Switch } from 'mdui/components/switch.js'; ``` Uso: ```html ``` ## Ejemplos {#examples} ### Estado seleccionado {#example-checked} Cuando el Switch está seleccionado, el valor del atributo `checked` es `true`. También puedes añadir el atributo `checked` para que el Switch esté seleccionado por defecto. ```html ``` ### Estado deshabilitado {#example-disabled} El atributo `disabled` deshabilita el componente Switch. ```html ``` ### Icono {#example-icon} El atributo `unchecked-icon` define el icono de Material Icons para el estado no seleccionado, y `checked-icon` define el icono del estado seleccionado. También puedes personalizar los elementos del icono en los estados no seleccionado y seleccionado mediante los slots `unchecked-icon` y `checked-icon`. ```html ``` ## mdui-switch API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
disabled disabled true boolean false

Indica si está deshabilitado.
checked checked true boolean false

Indica si está seleccionado.
undefined defaultChecked false boolean false

Estado de selección por defecto. Al restablecer el formulario, se restaurará a este estado. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
unchecked-icon uncheckedIcon true string

Nombre del icono de Material Icons para el estado no seleccionado. También se puede establecer mediante slot="unchecked-icon".
checked-icon checkedIcon true string

Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante slot="checked-icon".

Por defecto es el icono check. Se puede pasar una cadena vacía para eliminar el icono predeterminado.
required required true boolean false

Indica si es obligatorio marcar este Switch al enviar el formulario.
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.
name name true string ''

Nombre del Switch, que se enviará con los datos del formulario.
value value true string 'on'

Valor del Switch, que se enviará con los datos del formulario.
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
autofocus autofocus true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
change

Se dispara cuando cambia el estado de selección.
input

Se dispara cuando cambia el estado de selección.
invalid

Se dispara cuando falla la validación del campo del formulario.
### Slots
Nombre Descripción
unchecked-icon

Elemento en estado no seleccionado.
checked-icon

Elemento en estado seleccionado.
### CSS Parts
Nombre Descripción
track

Pista.
thumb

Contenedor del icono.
unchecked-icon

Icono en estado no seleccionado.
checked-icon

Icono en estado seleccionado.
### CSS Custom Properties
Nombre Descripción
--shape-corner

Tamaño de la esquina redondeada de la pista del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
--shape-corner-thumb

Tamaño de la esquina redondeada del contenedor del icono del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
# Componente Tabs El componente Tabs se usa para organizar contenido relacionado y facilitar el cambio rápido entre diferentes categorías. ## Uso {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts import type { Tabs } from 'mdui/components/tabs.js'; import type { Tab } from 'mdui/components/tab.js'; import type { TabPanel } from 'mdui/components/tab-panel.js'; ``` Uso: ```html Pestaña 1 Pestaña 2 Pestaña 3 Panel 1 Panel 2 Panel 3 ``` ## Ejemplos {#examples} ### Estilo de pestañas {#example-variant} El atributo `variant` en el componente `` define el estilo de las pestañas. ```html Pestaña 1 Pestaña 2 Pestaña 3 Panel 1 Panel 2 Panel 3 Pestaña 1 Pestaña 2 Pestaña 3 Panel 1 Panel 2 Panel 3 ``` ### Posición de las pestañas {#example-placement} El atributo `placement` en el componente `` define la posición de las pestañas. ```html top-start top top-end bottom-start bottom bottom-end left-start left left-end right-start right right-end Pestaña 1 Pestaña 2 Pestaña 3 Panel 1 Panel 2 Panel 3 ``` ### Ancho completo {#example-full-width} El atributo `full-width` al componente ``, las pestañas ocuparán todo el ancho y cada pestaña distribuirá el ancho equitativamente. ```html Pestaña 1 Pestaña 2 Pestaña 3 Panel 1 Panel 2 Panel 3 ``` ### Icono {#example-icon} Si usas el atributo `icon` en el componente ``, puedes añadir un icono de Material Icons en la pestaña. También puedes añadir un elemento de icono mediante el slot `icon`. Con el atributo `inline` puedes alinear horizontalmente el icono y el texto. ```html Pestaña 1 Pestaña 2 Pestaña 3 Panel 1 Panel 2 Panel 3 ``` ### Badge {#example-badge} En el componente ``, puedes añadir un Badge mediante el slot `badge`. ```html Pestaña 1 99+ Pestaña 2 Pestaña 3 Panel 1 Panel 2 Panel 3 ``` ### Contenido personalizado {#example-custom} Usando el slot `custom` en el componente ``, puedes personalizar completamente el contenido de la pestaña. ```html Pestaña 1 Icono Pestaña 2 Pestaña 3 Panel 1 Panel 2 Panel 3 ``` ## mdui-tab-panel API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
value value true string

Valor del elemento de Tab Panel.
### Slots
Nombre Descripción
(predeterminado)

Contenido del Tab Panel.
## mdui-tab API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
value value true string

Valor del elemento de Tab.
icon icon true string

Nombre del icono de Material Icons. También se puede establecer mediante slot="icon".
inline inline true boolean false

Indica si se colocan el icono y el texto horizontalmente.
autofocus autofocus true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
### Slots
Nombre Descripción
(predeterminado)

Contenido de texto del Tab.
icon

Icono en el Tab.
badge

Badge.
custom

Personalizar todo el contenido del Tab.
### CSS Parts
Nombre Descripción
container

Contenedor del Tab.
icon

Icono en el Tab.
label

Texto del Tab.
## mdui-tabs API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'primary' | 'secondary' 'primary'

Variante de las pestañas. Los valores posibles son:

  • primary: Adecuado para ubicarse debajo de <mdui-top-app-bar>, para cambiar la página principal de la aplicación
  • secondary: Adecuado para ubicarse dentro de una página, para cambiar un conjunto de contenido relacionado
value value true string

Valor del <mdui-tab> actualmente activo.
placement placement true 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'top-start'

Posición de las pestañas. Por defecto es top-start. Los valores posibles son:

  • top-start: Ubicado arriba, alineado a la izquierda
  • top: Ubicado arriba, centrado
  • top-end: Ubicado arriba, alineado a la derecha
  • bottom-start: Ubicado abajo, alineado a la izquierda
  • bottom: Ubicado abajo, centrado
  • bottom-end: Ubicado abajo, alineado a la derecha
  • left-start: Ubicado a la izquierda, alineado arriba
  • left: Ubicado a la izquierda, centrado
  • left-end: Ubicado a la izquierda, alineado abajo
  • right-start: Ubicado a la derecha, alineado arriba
  • right: Ubicado a la derecha, centrado
  • right-end: Ubicado a la derecha, alineado abajo
full-width fullWidth true boolean false

Indica si debe ocupar todo el ancho del elemento padre.
### Eventos
Nombre Descripción
change

Se dispara cuando cambia el valor seleccionado.
### Slots
Nombre Descripción
(predeterminado)

Elementos <mdui-tab>.
panel

Elementos <mdui-tab-panel>.
### CSS Parts
Nombre Descripción
container

Contenedor de los elementos <mdui-tab>.
indicator

Indicador de estado activo.
# Componente Campo de texto El campo de texto permite introducir texto en la página y suele usarse en formularios y diálogos. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/text-field.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` Uso: ```html ``` ## Ejemplos {#examples} ### Forma {#example-variant} El atributo `variant` define la forma del campo de texto. ```html

``` ### Texto de ayuda {#example-helper-text} El atributo `label` define el texto de la etiqueta sobre el campo de texto. ```html ``` El atributo `placeholder` define el texto de marcador de posición cuando no hay valor. ```html ``` El atributo `helper` define el texto de ayuda en la parte inferior del campo de texto. También puedes usar el slot `helper` para definirlo. Añade `helper-on-focus` para mostrar el texto de ayuda solo cuando el campo de texto está enfocado. ```html Texto de apoyo ``` ### Limpiable {#example-clearable} Con el atributo `clearable`, aparece un botón para borrar el contenido cuando el campo tiene valor. ```html ``` ### Texto alineado a la derecha {#example-end-aligned} Con el atributo `end-aligned` puedes alinear el texto a la derecha. ```html ``` ### Texto e iconos delante/detrás {#example-prefix-suffix} Los atributos `icon` y `end-icon` permiten añadir iconos de Material Icons a la izquierda y derecha del campo de texto. También puedes añadir elementos a la izquierda y derecha mediante los slots `icon` y `end-icon`. ```html

``` Los atributos `prefix` y `suffix` permiten añadir texto a la izquierda y derecha del campo de texto. También puedes añadir elementos de texto a la izquierda y derecha mediante los slots `prefix` y `suffix`. Estos textos solo se muestran cuando el campo de texto está enfocado o tiene un valor. ```html

$ /100 ``` ### Modo de solo lectura {#example-readonly} El atributo `readonly` define el campo de texto en modo de solo lectura. ```html ``` ### Estado deshabilitado {#example-disabled} El atributo `disabled` deshabilita el campo de texto. ```html ``` ### Campo de texto multilínea {#example-rows} El atributo `rows` define el número de filas del campo de texto multilínea. ```html ``` También puedes añadir el atributo `autosize` para que el campo de texto ajuste automáticamente su altura según la longitud del contenido. Los atributos `min-rows` y `max-rows` para especificar el número mínimo y máximo de filas al ajustar la altura automáticamente. ```html

``` ### Contador de caracteres {#example-counter} Cuando estableces el número máximo de caracteres con el atributo `maxlength`, puedes añadir el atributo `counter` para mostrar el contador de caracteres debajo del campo de texto. ```html ``` ### Campo de contraseña {#example-password} Cuando `type="password"`, añade el atributo `toggle-password` para mostrar un botón que alterna la visibilidad de la contraseña en el lado derecho del campo de texto. ```html ``` ## mdui-text-field API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'filled' | 'outlined' 'filled'

Variante del campo de texto. Por defecto es filled. Los valores posibles son:

  • filled: Campo de texto con color de fondo, efecto visual intenso
  • outlined: Campo de texto con borde, efecto visual más suave
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

Tipo de entrada del campo de texto. Por defecto es text. Los valores posibles son:

  • text: Valor por defecto. Campo de texto
  • number: Solo se pueden ingresar números. En dispositivos con teclado dinámico, se mostrará un teclado numérico
  • password: Para ingresar contraseñas, su valor se oculta
  • url: Para ingresar URL, valida el formato de la URL. En dispositivos con teclado dinámico, tiene un teclado correspondiente
  • email: Para ingresar direcciones de correo electrónico, valida el formato del correo. En dispositivos con teclado dinámico, tiene un teclado correspondiente
  • search: Para cuadros de búsqueda. En dispositivos con teclado dinámico, el icono de Enter se convierte en un icono de búsqueda
  • tel: Para ingresar números de teléfono. En dispositivos con teclado dinámico, se mostrará un teclado numérico telefónico
  • hidden: Oculta el control, pero su valor aún se envía al servidor
  • date: Control para ingresar fecha (año, mes, día, sin hora). Cuando está activado en navegadores compatibles, abre un selector de fecha o un selector de rueda numérica de año, mes y día
  • datetime-local: Control para ingresar fecha y hora, sin zona horaria. Cuando está activado en navegadores compatibles, abre un selector de fecha o un selector de rueda numérica de año, mes y día
  • month: Control para ingresar año y mes, sin zona horaria
  • time: Control para ingresar hora, sin zona horaria
  • week: Control para ingresar una fecha compuesta por año y número de semana, sin zona horaria
name name true string ''

Nombre del campo de texto, que se enviará con los datos del formulario.
value value false string ''

Valor del campo de texto, que se enviará con los datos del formulario.
undefined defaultValue false string ''

Valor por defecto. Al restablecer el formulario, se restaurará a este valor. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
label label true string

Texto de la etiqueta.
placeholder placeholder true string

Texto de marcador de posición.
helper helper true string

Texto de ayuda en la parte inferior del campo de texto. También se puede establecer mediante slot="helper".
helper-on-focus helperOnFocus true boolean false

Indica si el texto de ayuda solo se muestra cuando el campo recibe el foco.
clearable clearable true boolean false

Indica si se puede borrar el contenido del campo de texto.
clear-icon clearIcon true string

Nombre del icono de Material Icons para el botón de borrar que se muestra a la derecha del campo de texto cuando es borrable. También se puede establecer mediante slot="clear-icon".
end-aligned endAligned true boolean false

Indica si el texto está alineado a la derecha.
prefix prefix true string

Texto de prefijo del campo de texto. Solo se muestra cuando el campo de texto está enfocado o tiene un valor. También se puede establecer mediante slot="prefix".
suffix suffix true string

Texto de sufijo del campo de texto. Solo se muestra cuando el campo de texto está enfocado o tiene un valor. También se puede establecer mediante slot="suffix".
icon icon true string

Nombre del icono de Material Icons para el icono de prefijo del campo de texto. También se puede establecer mediante slot="icon".
end-icon endIcon true string

Nombre del icono de Material Icons para el icono de sufijo del campo de texto. También se puede establecer mediante slot="end-icon".
error-icon errorIcon true string

Nombre del icono de Material Icons que se muestra a la derecha del campo de texto cuando falla la validación del campo del formulario. También se puede establecer mediante slot="error-icon".
form form true string

Elemento <form> asociado. El valor de esta propiedad debe ser el id de un elemento <form> en la misma página.

Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento <form>. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento <form>.
readonly readonly true boolean false

Indica si está en modo de solo lectura.
disabled disabled true boolean false

Indica si el campo de entrada está deshabilitado.
required required true boolean false

Indica si es obligatorio completar este campo al enviar el formulario.
rows rows true number

Número fijo de líneas mostradas en el campo de texto.
autosize autosize true boolean false

Indica si la altura del campo de texto se ajusta automáticamente según el contenido.
min-rows minRows true number

Cuando autosize es true, el número mínimo de líneas del campo de texto.
max-rows maxRows true number

Cuando autosize es true, el número máximo de líneas del campo de texto.
minlength minlength true number

Número mínimo de caracteres permitidos.
maxlength maxlength true number

Número máximo de caracteres permitidos.
counter counter true boolean false

Indica si se muestra un contador de caracteres. Solo tiene efecto cuando se especifica maxlength.
min min true number

Cuando type es number, el valor mínimo permitido.
max max true number

Cuando type es number, el valor máximo permitido.
step step true number

Cuando type es number, el incremento o decremento del valor.
pattern pattern true string

Expresión regular para la validación del formulario.
toggle-password togglePassword true boolean false

Cuando type es password, al definir esta propiedad se agrega un botón para alternar entre mostrar y ocultar la contraseña.
show-password-icon showPasswordIcon true string

Icono de Material Icons para el botón de alternancia de contraseña, que se muestra cuando la contraseña se muestra. También se puede establecer mediante slot="show-password-icon".
hide-password-icon hidePasswordIcon true string

Icono de Material Icons para el botón de alternancia de contraseña, que se muestra cuando la contraseña está oculta. También se puede establecer mediante slot="hide-password-icon".
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

Atributo no estándar de iOS, utilizado para controlar si se debe capitalizar automáticamente la primera letra del texto. Válido en iOS 5 y versiones posteriores. Los valores posibles son:

  • none: Deshabilitar la capitalización de la primera letra
  • sentences: Capitalizar la primera letra de las oraciones
  • words: Capitalizar la primera letra de las palabras
  • characters: Poner en mayúsculas todas las letras
autocorrect autocorrect true string

Atributo autocorrect del elemento input.
autocomplete autocomplete true string

Atributo autocomplete del elemento input.
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

Atributo enterkeyhint del elemento input, utilizado para personalizar el texto o icono mostrado en la tecla Enter del teclado virtual. El efecto de visualización depende del dispositivo y el idioma del usuario. Los valores posibles son:

  • enter: Insertar nueva línea
  • done: Completar la entrada, cerrar el teclado virtual
  • go: Navegar al objetivo del texto ingresado
  • next: Moverse al siguiente campo de entrada
  • previous: Moverse al campo de entrada anterior
  • search: Navegar a los resultados de búsqueda
  • send: Enviar el mensaje de texto
spellcheck spellcheck true boolean false

Indica si se habilita la revisión ortográfica.
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

Atributo inputmode del elemento input, utilizado para personalizar el tipo de teclado virtual. Los valores posibles son:

  • none: Sin teclado virtual. Útil cuando se necesita implementar un control de entrada de teclado propio
  • text: Teclado de entrada de texto estándar
  • decimal: Teclado de entrada decimal, además de números puede tener punto decimal . o coma de miles ,
  • numeric: Muestra un teclado numérico del 0 al 9
  • tel: Teclado numérico telefónico, que incluye números del 0 al 9, asterisco * o numeral #
  • search: Teclado virtual optimizado para la entrada de búsqueda, el botón de enviar generalmente muestra search o “Buscar”
  • email: Teclado virtual optimizado para la entrada de direcciones de correo electrónico, generalmente tiene teclas como @ .
  • url: Teclado virtual optimizado para la entrada de URL, generalmente tiene teclas como . / #
undefined validity false ValidityState

Objeto de estado de validación del formulario, véase ValidityState.
undefined validationMessage false string

Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
undefined valueAsNumber false number

Obtiene el valor actual y lo convierte al tipo number; o establece un valor de tipo number. Si el valor no se puede convertir al tipo number, devuelve NaN.
autofocus autofocus true boolean false

Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
tabindex tabIndex false number

Orden del elemento al navegar con la tecla Tab.
### Métodos
Nombre Descripción
select(): void

Selecciona el texto en el campo de texto.
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

Selecciona un rango específico de contenido en el campo de texto.
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

Reemplaza el texto de un rango específico en el campo de texto con un nuevo texto.
checkValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.
reportValidity(): boolean

Comprueba si el campo del formulario pasa la validación. Si falla, devuelve false y dispara el evento invalid; si la pasa, devuelve true.

Si la validación falla, también muestra un mensaje de error en el componente.
setCustomValidity(message: string): void

Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
click(): void

Simula un clic del ratón en el elemento.
focus(options?: FocusOptions): 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 Descripción
focus

Se dispara cuando recibe el foco.
blur

Se dispara cuando pierde el foco.
change

Se dispara cuando el valor del campo de texto cambia y se pierde el foco.
input

Se dispara cuando el valor del campo de texto cambia.
invalid

Se dispara cuando falla la validación del campo del formulario.
clear

Se dispara al hacer clic en el botón de borrar generado por el atributo clearable. Se puede evitar que se borre el contenido del campo de texto llamando a event.preventDefault().
### Slots
Nombre Descripción
icon

Icono izquierdo.
end-icon

Icono derecho.
error-icon

Icono derecho en estado de error de validación.
prefix

Texto izquierdo.
suffix

Texto derecho.
clear-button

Botón de borrar.
clear-icon

Icono dentro del botón de borrar.
toggle-password-button

Botón de alternancia del estado de visualización de la contraseña.
show-password-icon

Icono dentro del botón de alternancia cuando la contraseña se muestra.
hide-password-icon

Icono dentro del botón de alternancia cuando la contraseña está oculta.
helper

Texto de ayuda en la parte inferior.
### CSS Parts
Nombre Descripción
container

Contenedor del campo de texto.
icon

Icono izquierdo.
end-icon

Icono derecho.
error-icon

Icono derecho en estado de error de validación.
prefix

Texto izquierdo.
suffix

Texto derecho.
label

Texto de la etiqueta superior.
input

Elemento <input> o <textarea> interno.
clear-button

Botón de borrar.
clear-icon

Icono dentro del botón de borrar.
toggle-password-button

Botón de alternancia del estado de visualización de la contraseña.
show-password-icon

Icono dentro del botón de alternancia cuando la contraseña se muestra.
hide-password-icon

Icono dentro del botón de alternancia cuando la contraseña está oculta.
supporting

Contenedor de información auxiliar inferior, que incluye helper, error, counter.
helper

Texto de ayuda inferior.
error

Texto de descripción de error inferior.
counter

Contador de caracteres en la parte inferior derecha.
# Componente Tooltip El componente Tooltip muestra información contextual o texto complementario sobre un elemento concreto para ayudar a entender mejor su función. ## Uso {#usage} Importa el componente cuando lo necesites: ```js import 'mdui/components/tooltip.js'; ``` Importa el tipo TypeScript cuando lo necesites: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Uso: ```html botón ``` ## Ejemplos {#examples} ### Tooltip de texto simple {#example-plain} Por defecto, el tooltip es de texto simple. El atributo `content` define el contenido del tooltip. ```html botón ``` También puedes usar el slot `content` para establecer el contenido del tooltip. ```html botón
título
contenido
 ``` ### Tooltip enriquecido {#example-rich} Si estableces el atributo `variant` en `rich`, obtendrás un Tooltip enriquecido. El atributo `headline` define el título y `content`, el contenido. ```html botón ``` También puedes usar los slots `headline` y `content` para definir el título y el contenido del tooltip. Usa el slot `action` para establecer el botón de acción del tooltip. ```html botón
Tooltip enriquecido
Los tooltips enriquecidos atraen la atención hacia un elemento o característica particular que merece el enfoque del usuario. Admite varias líneas de texto informativo.
Acción ``` ### Posición {#example-placement} El atributo `placement` define la posición del tooltip. ```html
``` ### Forma de activación {#example-trigger} El atributo `trigger` define la forma de activación del tooltip. ```html botón ``` ### Retraso de apertura/cierre {#example-delay} Cuando la forma de activación es `hover`, puedes usar los atributos `open-delay` y `close-delay` para establecer el retraso de apertura y cierre del tooltip, en milisegundos. ```html botón ``` ### Estado deshabilitado {#example-disabled} El atributo `disabled` deshabilita el tooltip. ```html botón ``` ## mdui-tooltip API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'plain' | 'rich' 'plain'

Variante del tooltip. Por defecto es plain. Los valores posibles son:

  • plain: Solo texto, adecuado para texto simple de una línea
  • rich: Texto enriquecido, puede contener título, cuerpo y botones de acción
placement placement true 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Posición del tooltip. Por defecto es auto. Los valores posibles son:

  • auto: Determinar posición automáticamente. Cuando variant="plain", se prefiere top; cuando variant="rich", se prefiere bottom-right
  • top-left: Arriba a la izquierda
  • top-start: Arriba, alineado a la izquierda
  • top: Arriba, centrado
  • top-end: Arriba, alineado a la derecha
  • top-right: Arriba a la derecha
  • bottom-left: Abajo a la izquierda
  • bottom-start: Abajo, alineado a la izquierda
  • bottom: Abajo, centrado
  • bottom-end: Abajo, alineado a la derecha
  • bottom-right: Abajo a la derecha
  • left-start: Izquierda, alineado arriba
  • left: Izquierda, centrado
  • left-end: Izquierda, alineado abajo
  • right-start: Derecha, alineado arriba
  • right: Derecha, centrado
  • right-end: Derecha, alineado abajo
open-delay openDelay true number 150

Retraso para mostrar al pasar el ratón, en milisegundos.
close-delay closeDelay true number 150

Retraso para ocultar al pasar el ratón, en milisegundos.
headline headline true string

Título del tooltip. Solo se puede usar cuando variant="rich". También se puede establecer mediante slot="headline".
content content true string

Contenido del tooltip. También se puede establecer mediante slot="content".
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

Modo de activación, admite múltiples valores separados por espacios. Los valores posibles son:

  • click: Activar al hacer clic
  • hover: Activar al pasar el ratón
  • focus: Activar al recibir el foco
  • manual: Solo se puede abrir y cerrar mediante programación, no se pueden especificar otras formas de activación
disabled disabled true boolean false

Indica si el tooltip está deshabilitado.
open open true boolean false

Indica si se muestra el tooltip.
### Eventos
Nombre Descripción
open

Se dispara cuando el tooltip comienza a mostrarse. Se puede evitar que se abra llamando a event.preventDefault().
opened

Se dispara cuando la animación de mostrar del tooltip se completa.
close

Se dispara cuando el tooltip comienza a ocultarse. Se puede evitar que se cierre llamando a event.preventDefault().
closed

Se dispara cuando la animación de ocultar del tooltip se completa.
### Slots
Nombre Descripción
(predeterminado)

Elemento objetivo del tooltip, solo el primer elemento del slot default se usa como elemento objetivo.
headline

Título del tooltip, solo es válido cuando variant="rich".
content

Contenido del tooltip, puede contener HTML. Si solo contiene texto sin formato, se puede usar el atributo content en su lugar.
action

Botones en la parte inferior del tooltip, solo es válido cuando variant="rich".
### CSS Parts
Nombre Descripción
popup

Contenedor del tooltip.
headline

Título.
content

Cuerpo.
action

Botón de acción.
### CSS Custom Properties
Nombre Descripción
--shape-corner-plain

Cuando variant="plain", 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.
--shape-corner-rich

Cuando variant="rich", 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.
# Componente Top App Bar El componente Top App Bar muestra información clave y acciones relacionadas en la parte superior de la página, con una navegación clara y acceso directo a las acciones. ## Uso {#usage} Importa los componentes cuando los necesites: ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` Importa los tipos TypeScript cuando los necesites: ```ts import type { TopAppBar } from 'mdui/components/top-app-bar.js'; import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js'; ``` Uso: (Nota: el `style="position: relative"` en el ejemplo es solo para demostración; elimina este estilo en uso real.) ```html Título
``` **Notas importantes:** Este componente usa `position: fixed` por defecto y añade automáticamente `padding-top` 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: 1. Cuando se indica el atributo `scroll-target`. En este caso, se añade `padding-top` al elemento `scroll-target`. 2. Cuando está dentro del componente [``](/es/docs/2/components/layout). En este caso, no se añade `padding-top`. ## Ejemplos {#examples} ### Dentro de un contenedor especificado {#example-scroll-target} Por defecto, la barra de aplicaciones superior se muestra en la parte superior de la página, tomando la ventana como referencia. Si quieres colocar la barra de aplicaciones superior dentro de un contenedor específico, define el atributo `scroll-target` en el componente ``. El valor debe ser el selector CSS o elemento DOM del contenedor con contenido desplazable. En este caso, la barra de aplicaciones superior se posicionará tomando como referencia el elemento padre (debes añadir manualmente los estilos `position: relative; overflow: hidden` al elemento padre). ```html
Título
``` ### Forma {#example-variant} El atributo `variant` en el componente `` para establecer la forma de la barra de aplicaciones superior. ```html
Título
center-aligned small medium large
``` ### Comportamiento al desplazar la página {#example-scroll-behavior} El atributo `scroll-behavior` en el componente `` define cómo se comporta la barra de aplicaciones superior al desplazarse por la página. Se pueden establecer varios comportamientos separándolos con espacios. Los comportamientos de desplazamiento incluyen: - `hide`: Oculta la barra de aplicaciones superior al desplazarse hacia abajo y la muestra al desplazarse hacia arriba. - `shrink`: Solo efectivo cuando el atributo `variant` es `medium` o `large`. Expande la barra de aplicaciones superior al desplazarse hacia abajo y la contrae al desplazarse hacia arriba. - `elevate`: Añade una sombra a la barra de aplicaciones superior al desplazarse hacia abajo; elimina la sombra cuando se vuelve al principio de la página. El atributo `scroll-threshold` define cuántos píxeles desplazar antes de activar el comportamiento de desplazamiento de la barra de aplicaciones superior. (Nota: para una respuesta rápida, cuando se usa el comportamiento `elevate`, no establezcas el atributo `scroll-threshold`). **Ejemplo: ocultar al desplazar** ```html
Título
``` **Ejemplo: añadir sombra al desplazar** ```html
Título
``` **Ejemplo: contraer al desplazar** ```html
Título
``` **Ejemplo: contraer y añadir sombra al desplazar** ```html
Título
``` ### Texto en estado expandido {#label-large} En barras de aplicaciones superiores con `variant="medium"` o `variant="large"` y `scroll-behavior="shrink"`, puedes usar el slot `label-large` en `` para definir el texto en estado expandido. ```html
Este es el título en estado contraído Este es el título en estado expandido
``` ## mdui-top-app-bar-title API ### Slots
Nombre Descripción
(predeterminado)

Texto del título de la Top App Bar.
label-large

Texto del título en estado expandido.
### CSS Parts
Nombre Descripción
label

Texto del título.
label-large

Texto del título en estado expandido.
## mdui-top-app-bar API ### Propiedades
Atributo Propiedad Reflect Tipo Predeterminado Descripción
variant variant true 'center-aligned' | 'small' | 'medium' | 'large' 'small'

Variante de la Top App Bar. Por defecto es small. Los valores posibles son:

  • center-aligned: Barra de aplicación pequeña, título centrado
  • small: Barra de aplicación pequeña
  • medium: Barra de aplicación mediana
  • large: Barra de aplicación grande
hide hide true boolean false

Indica si está oculto.
shrink shrink true boolean false

Indica si la barra se reduce al estilo compacto (variant="small"). Solo tiene efecto cuando variant="medium" o variant="large".
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Comportamiento al hacer scroll. Se pueden usar múltiples valores separados por espacios. Los valores posibles son:

  • hide: Ocultar al hacer scroll
  • shrink: En barras de aplicación medianas y grandes, reducir al estilo de barra pequeña al hacer scroll
  • elevate: Agregar sombra al hacer scroll
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Elemento en el que se escuchan los eventos de scroll. El valor puede ser un selector CSS, un elemento DOM o un objeto JQ. Por defecto, escucha los eventos de scroll de window.
scroll-threshold scrollThreshold true number

Distancia de desplazamiento necesaria para activar el comportamiento, en px.
order order true number

Orden de layout de este componente dentro de <mdui-layout>, de menor a mayor. El valor predeterminado es 0.
### Eventos
Nombre Descripción
show

Se dispara cuando comienza a mostrarse. Se puede evitar que se muestre llamando a event.preventDefault().
shown

Se dispara cuando la animación de mostrar se completa.
hide

Se dispara cuando comienza a ocultarse. Se puede evitar que se oculte llamando a event.preventDefault().
hidden

Se dispara cuando la animación de ocultar se completa.
### Slots
Nombre Descripción
(predeterminado)

Elementos dentro de la Top App Bar.
### CSS Custom Properties
Nombre Descripción
--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.
# Biblioteca de utilidades jq mdui incluye una biblioteca de utilidades JavaScript ligera que proporciona una API similar a jQuery y encadenamiento de llamadas, pero su tamaño es solo una sexta parte del de jQuery. Puedes importar esta función de utilidad cuando lo necesites: ```js import { $ } from 'mdui/jq.js'; ``` ## Núcleo {#api-core} ### `$()` {#dollar} Esta función tiene varios usos: Pasa un selector CSS como parámetro, devuelve un objeto JQ que contiene los elementos coincidentes. ```js $('.box'); ``` Pasa un elemento DOM, cualquier array, NodeList u objeto JQ, devuelve un objeto JQ que contiene los elementos especificados. ```js $(document); ``` Pasa una cadena HTML, devuelve un objeto JQ que contiene el DOM creado a partir del HTML. ```js $(`
`); ``` Pasa una función, que se llamará cuando el DOM esté completamente cargado. ```js $(function () { console.log('DOM Cargado'); }); ``` ## Extensión {#api-extend} ### `$.extend()` {#d-extend} Si solo se pasa un objeto, las propiedades de ese objeto se fusionarán en el objeto `$`, es decir, se añadirán nuevas funcionalidades al espacio de nombres de `$`. ```js $.extend({ customFunc: function () {}, }); // Entonces puedes llamar al método personalizado así $.customFunc(); ``` Si se pasan dos o más objetos, todas las propiedades de los objetos se añaden al primer objeto y se devuelve el objeto fusionado. Las propiedades con valor `undefined` no se fusionan. ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // En este caso, el primer objeto y el valor de retorno son { key1: val1, key2: val2, key3: val3 } ``` ### `$.fn.extend()` {#fn-extend} Extiende métodos en la cadena de prototipos de `$`. ```js $.fn.extend({ customFunc: function () {}, }); // Entonces puedes usar el método extendido así $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} Serializa un array o objeto en una cadena de consulta URL. ```js $.param({ width: 1680, height: 1050 }); // width=1680&height=1050 $.param({ foo: { one: 1, two: 2 } }); // foo[one]=1&foo[two]=2 $.param({ ids: [1, 2, 3] }); // ids[]=1&ids[]=2&ids[]=3 ``` Si el parámetro es un array, el formato del array debe coincidir con el devuelto por [`.serializeArray()`](#serializeArray). ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // name=mdui&password=123456 ``` ## Operaciones con arrays y objetos {#api-array} ### `$.each()` {#d-each} Itera sobre un array o objeto. Devuelve el primer parámetro, es decir, el array u objeto iterado. El primer parámetro de la función de devolución de llamada es el índice del array o la clave del objeto, el segundo parámetro es el valor en la posición correspondiente del array u objeto. Dentro de la función de devolución de llamada, `this` apunta al valor en la posición correspondiente del array u objeto. Si la función de devolución de llamada devuelve `false`, se detiene la iteración. ```js // Iterar sobre un array $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // Resultado: // 0:a // 1:b // 2:c ``` ```js // Iterar sobre un objeto $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // Resultado // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} Añade los elementos del segundo array al primero y devuelve el array combinado. ```js const first = ['a', 'b', 'c']; const second = ['c', 'd', 'e']; const result = $.merge(first, second); console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e'] ``` ### `$.unique()` {#d-unique} Elimina elementos duplicados de un array. ```js const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]); console.log(result); // [1, 2, 12, 3] ``` ### `$.map()` {#d-map} Itera sobre un array u objeto y devuelve un nuevo array compuesto por los valores de retorno de la función de devolución de llamada. El primer parámetro de la función de devolución de llamada es el valor en la posición correspondiente del array u objeto, el segundo parámetro es el índice del array o la clave del objeto. La función de devolución de llamada puede devolver cualquier valor. Si devuelve un array, ese array se expande. Si devuelve `null` o `undefined`, ese valor se ignora. Dentro de la función de devolución de llamada, `this` apunta al objeto `window`. ```js // Iterar sobre un array const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // Cuando la función de devolución de llamada devuelve un array, el array se expande const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // Iterar sobre un objeto const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} Determina si un nodo contiene a otro nodo. Si el nodo padre contiene al nodo hijo, devuelve `true`; de lo contrario, devuelve `false`. ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## Comprobación de tipos de datos {#api-type} ### `.is()` {#is} Determina si al menos un elemento de la colección coincide con el parámetro. Si coincide, devuelve `true`; de lo contrario, devuelve `false`. El parámetro puede ser un selector CSS, un elemento DOM, un array de elementos DOM, un objeto JQ o una función de devolución de llamada. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice, el segundo parámetro es el elemento actual. Dentro de la función, `this` apunta al elemento actual. Si la función devuelve `true`, el elemento actual coincide con el parámetro; si devuelve `false`, no coincide. ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // Determinar mediante el valor de retorno de la función de devolución de llamada $(document).is(function (index, element) { return element === document; }); // true ``` ## Acceso a objetos {#api-object} ### `.length` {#length} Devuelve el número de elementos en la colección actual. ```js $('body').length; // 1 ``` ### `.each()` {#each} Itera sobre la colección actual y ejecuta una función para cada elemento. Si la función devuelve `false`, se detiene la iteración. El primer parámetro de la función es el índice del elemento, el segundo parámetro es el elemento actual. Dentro de la función, `this` apunta al elemento actual. ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} Itera sobre la colección actual, ejecuta una función para cada elemento y devuelve una nueva colección compuesta por los valores de retorno de la función. La función puede devolver un solo dato o un array de datos. Si devuelve un array, los elementos del array se añaden secuencialmente a la nueva colección. Si la función devuelve `null` o `undefined`, ese valor no se añade a la nueva colección. El primer parámetro de la función es el índice del elemento, el segundo parámetro es el elemento actual. Dentro de la función, `this` apunta al elemento actual. ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // result es un objeto JQ compuesto por los valores de los elementos coincidentes ``` ### `.eq()` {#eq} Devuelve una nueva colección que contiene solo el elemento en la posición de índice especificada. ```js $('div').eq(0); // Devuelve una colección que contiene solo el primer elemento $('div').eq(-1); // Devuelve una colección que contiene solo el último elemento $('div').eq(-2); // Devuelve una colección que contiene solo el penúltimo elemento ``` ### `.first()` {#first} Devuelve una nueva colección que contiene solo el primer elemento de la colección actual. ```js $('div').first(); // Devuelve una colección que contiene solo el primer div ``` ### `.last()` {#last} Devuelve una nueva colección que contiene solo el último elemento de la colección actual. ```js $('div').last(); // Devuelve una colección que contiene solo el último div ``` ### `.get()` {#get} Devuelve el elemento en la posición de índice especificada. Si no se pasa ningún parámetro, devuelve un array compuesto por todos los elementos de la colección. ```js $('div').get(); // Devuelve un array de todos los elementos div $('div').get(0); // Devuelve el primer elemento div $('div').get(-1); // Devuelve el último elemento div ``` ### `.index()` {#index} Si no se pasa ningún parámetro, devuelve el valor del índice del primer elemento de la colección actual en relación con sus elementos hermanos. Si se pasa un selector CSS, devuelve el valor del índice del primer elemento de la colección actual en relación con los elementos que coinciden con el selector CSS. Si se pasa un elemento DOM, devuelve el valor del índice de ese elemento en la colección actual. Si se pasa un objeto JQ, devuelve el valor del índice del primer elemento del objeto en la colección actual. ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} Devuelve un subconjunto de la colección actual. También puedes establecer las posiciones de inicio y fin (sin incluir el elemento final) del subconjunto pasando dos parámetros. Si no se pasa el segundo parámetro, devuelve todos los elementos desde la posición de inicio hasta el final de la colección. ```js // Devuelve todos los elementos después del tercero (incluido el tercero) $('div').slice(3); // Devuelve los elementos entre el tercero y el quinto (incluido el tercero, excluido el quinto) $('div').slice(3, 5); ``` ### `.filter()` {#filter} Filtra los elementos de la colección actual que coinciden con la expresión especificada. El parámetro puede ser un selector CSS, un elemento DOM, un array de elementos DOM o una función de devolución de llamada. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el elemento actual. Dentro de la función, `this` apunta al elemento actual. Si la función devuelve `true`, el elemento actual se conserva; si devuelve `false`, se elimina. ```js // Filtra todos los elementos div que contienen la clase .box $('div').filter('.box'); // Filtra todas las opciones seleccionadas $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} Filtra los elementos de la colección actual que no coinciden con la expresión especificada. El parámetro puede ser un selector CSS, un elemento DOM, un array de elementos DOM, un objeto JQ o una función de devolución de llamada que devuelve un valor `boolean`. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el elemento actual. Dentro de la función, `this` apunta al elemento actual. Si la función devuelve `true`, el elemento actual se elimina; si devuelve `false`, se conserva. ```js // Filtra todos los elementos div que no contienen la clase .box $('div').not('.box'); // Filtra todas las opciones no seleccionadas $('#select option').not(function (index, element) { return element.selected; }); ``` ## Clases CSS {#api-css} ### `.hasClass()` {#hasClass} Determina si el primer elemento de la colección contiene la clase CSS especificada. ```js // Determina si el primer elemento div contiene la clase .item $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} Añade clases CSS a cada elemento de la colección. Se pueden separar múltiples nombres de clase con espacios. El parámetro puede ser una cadena o una función de devolución de llamada que devuelva un nombre de clase CSS. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro son los nombres de clase CSS existentes en ese elemento. Dentro de la función, `this` apunta al elemento actual. ```js // Añade la clase .item a todos los elementos div $('div').addClass('item'); // Añade las clases.item1 y.item2 a todos los elementos div $('div').addClass('item1 item2'); // Añade las clases CSS devueltas por la función de devolución de llamada a todos los elementos div $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} Elimina las clases CSS especificadas de cada elemento de la colección. Se pueden separar múltiples nombres de clase con espacios. El parámetro puede ser una cadena o una función de devolución de llamada que devuelva un nombre de clase CSS. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro son los nombres de clase CSS existentes en ese elemento. Dentro de la función, `this` apunta al elemento actual. Si no se pasa ningún parámetro, este método elimina directamente el atributo `class` del elemento. ```js // Elimina la clase .item de todos los elementos div $('div').removeClass('item'); // Elimina las clases.item1 y.item2 de todos los elementos div $('div').removeClass('item1 item2'); // Elimina las clases CSS devueltas por la función de devolución de llamada de todos los elementos div $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} Si el elemento tiene la clase CSS especificada, la elimina; si no la tiene, la añade. Se pueden separar múltiples nombres de clase con espacios. El parámetro puede ser una cadena o una función de devolución de llamada que devuelva un nombre de clase CSS. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro son los nombres de clase CSS existentes en ese elemento. Dentro de la función, `this` apunta al elemento actual. ```js // Alterna la clase .item en todos los elementos div $('div').toggleClass('item'); // Alterna las clases.item1 y.item2 en todos los elementos div $('div').toggleClass('item1 item2'); // Alterna las clases CSS devueltas por la función de devolución de llamada en todos los elementos div $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## Atributos de nodo {#api-attr} ### `.prop()` {#prop} Obtiene el valor de la propiedad JavaScript del primer elemento de la colección. ```js // Obtiene el valor de la propiedad checked del primer elemento $('input').prop('checked'); ``` Si se pasan dos parámetros, este método establece el valor de la propiedad JavaScript especificada para todos los elementos de la colección. El valor de la propiedad puede ser cualquier tipo de valor o el valor de retorno de una función de devolución de llamada. El primer parámetro de la función de devolución de llamada es el índice del elemento, el segundo parámetro es el valor original de la propiedad en ese elemento, y `this` dentro de la función apunta al elemento actual. Si el valor de la propiedad o el valor de retorno de la función de devolución de llamada es `undefined`, este método no modificará la propiedad original del elemento. ```js // Establece el valor de la propiedad checked en true para todos los elementos seleccionados $('input').prop('checked', true); // Establece el valor de la propiedad mediante el valor de retorno de la función de devolución de llamada $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` También puedes establecer múltiples propiedades simultáneamente pasando un objeto. ```js // Establece múltiples valores de propiedad para los elementos simultáneamente $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} Elimina la propiedad JavaScript especificada de todos los elementos de la colección. ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} Obtiene el valor del atributo HTML del primer elemento de la colección. ```js // Obtiene el valor del atributo del primer elemento $('div').attr('username'); ``` Si se pasan dos parámetros, este método establece el valor del atributo HTML especificado para todos los elementos de la colección. El valor del atributo puede ser una cadena, un número o el valor de retorno de una función de devolución de llamada. Si el parámetro es una función de devolución de llamada, el primer parámetro de la función es el índice del elemento, el segundo parámetro es el valor original del atributo en ese elemento. Dentro de la función, `this` apunta al elemento actual. Si el valor del atributo o el valor de retorno de la función de devolución de llamada es `null`, este método elimina el atributo especificado; si es `undefined`, no modifica el atributo original del elemento. ```js // Establece el valor del atributo para todos los elementos seleccionados $('div').attr('username', 'mdui'); // Establece el valor del atributo mediante el valor de retorno de la función de devolución de llamada $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` También puedes establecer múltiples atributos simultáneamente pasando un objeto. ```js // Establece múltiples valores de atributo para los elementos simultáneamente $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} Elimina el atributo HTML especificado de todos los elementos de la colección. Se pueden separar múltiples nombres de atributo con espacios. ```js // Elimina un atributo de todos los elementos de la colección $('div').removeAttr('username'); // Elimina múltiples atributos de todos los elementos de la colección $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} Devuelve el valor del primer elemento de la colección. Si el elemento es un ``, `` u `