SegmentedButtonSzegmentált gomb

El componente de botón segmentado agrupa varios botones para ofrecer opciones, cambiar vistas u ordenar elementos.

Uso

Importa los componentes cuando los necesites:

import 'mdui/components/segmented-button-group.js';
import 'mdui/components/segmented-button.js';

Importa los tipos TypeScript cuando los necesites:

import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js';
import type { SegmentedButton } from 'mdui/components/segmented-button.js';

Uso:

Día

Semana

Mes

<mdui-segmented-button-group>
  <mdui-segmented-button>Día</mdui-segmented-button>
  <mdui-segmented-button>Semana</mdui-segmented-button>
  <mdui-segmented-button>Mes</mdui-segmented-button>
</mdui-segmented-button-group>

Si especificas el atributo selects con el valor single en el elemento <mdui-segmented-button-group>, activarás el modo de selección única. En este caso, el valor de value del <mdui-segmented-button-group> es el valor del <mdui-segmented-button> seleccionado actualmente.

Día

Semana

Mes

Día

Semana

Mes

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Día</mdui-segmented-button>
  <mdui-segmented-button value="week">Semana</mdui-segmented-button>
  <mdui-segmented-button value="month">Mes</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Día</mdui-segmented-button>
  <mdui-segmented-button value="week">Semana</mdui-segmented-button>
  <mdui-segmented-button value="month">Mes</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

Modo de selección múltiple

Si especificas el atributo selects como multiple en el elemento <mdui-segmented-button-group> para habilitar el modo de selección múltiple. En este caso, el valor de value del <mdui-segmented-button-group> es un array con los valores de los <mdui-segmented-button> seleccionados.

Nota: En el modo de selección múltiple, el valor de value del <mdui-segmented-button-group> es un array y solo se puede leer y establecer mediante la propiedad JavaScript.

Día

Semana

Mes

Día

Semana

Mes

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Día</mdui-segmented-button>
  <mdui-segmented-button value="week">Semana</mdui-segmented-button>
  <mdui-segmented-button value="month">Mes</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Día</mdui-segmented-button>
  <mdui-segmented-button value="week">Semana</mdui-segmented-button>
  <mdui-segmented-button value="month">Mes</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // Establecer la selección predeterminada de semana y mes
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Forrás

Icono

En el elemento <mdui-segmented-button>, 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.

Día

Semana

Mes

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Día</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Semana</mdui-segmented-button>
  <mdui-segmented-button>
    Mes
    <mdui-icon slot="icon" name="downloading"></mdui-icon>
    <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
  </mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

En el elemento <mdui-segmented-button>, 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.

Día

Semana

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Día</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Semana
  </mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

Enlace

En el elemento <mdui-segmented-button>, estableciendo el atributo href, puedes convertir el botón en un enlace. También puedes usar los atributos relacionados con enlaces: download, target, rel.

Enlace

Semana

Mes

<mdui-segmented-button-group>
  <mdui-segmented-button href="https://www.mdui.org" target="_blank">Enlace</mdui-segmented-button>
  <mdui-segmented-button>Semana</mdui-segmented-button>
  <mdui-segmented-button>Mes</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

Estados deshabilitado y de carga

El atributo disabled al elemento <mdui-segmented-button-group> deshabilita todo el grupo de botones segmentados.

Día

Semana

Mes

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Día</mdui-segmented-button>
  <mdui-segmented-button>Semana</mdui-segmented-button>
  <mdui-segmented-button>Mes</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

En el elemento <mdui-segmented-button>, 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.

Día

Semana

Mes

Año

<mdui-segmented-button-group>
  <mdui-segmented-button>Día</mdui-segmented-button>
  <mdui-segmented-button disabled>Semana</mdui-segmented-button>
  <mdui-segmented-button loading>Mes</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Año</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

`mdui-segmented-button-group` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`full-width`	`fullWidth`	`boolean`	`false`
Indica si debe ocupar todo el ancho del elemento padre.
`selects`	`selects`	`'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`	`boolean`	`false`
Indica si está deshabilitado.
`required`	`required`	`boolean`	`false`
Indica si es obligatorio seleccionar una opción al enviar el formulario.
`form`	`form`	`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`	`string`	`''`
Nombre al enviar el formulario, que se enviará con los datos del formulario.
`value`	`value`	`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.
	`defaultValue`	`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.
	`validity`	`ValidityState`	-
Objeto de estado de validación del formulario, véase `ValidityState`.
	`validationMessage`	`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.

Metódusok

Név	Paraméterek	Visszatérési érték
`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.

Események

Név
`change`
Se dispara cuando cambia el valor seleccionado.
`invalid`
Se dispara cuando falla la validación del campo del formulario.

Slots

Név
(alapértelmezett)
Componentes `<mdui-segmented-button>`.

CSS egyéni tulajdonságok

Név
`--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

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`icon`	`icon`	`string`	-
Nombre del icono de Material Icons a la izquierda. También se puede establecer mediante `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nombre del icono de Material Icons a la derecha. También se puede establecer mediante `slot="end-icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante `slot="selected-icon"`.
`href`	`href`	`string`	-
URL de destino del enlace. Si se define esta propiedad, el componente se representará como un elemento `<a>` y podrá usar las propiedades de enlace.
`download`	`download`	`string`	-
Nombre del archivo para el enlace de descarga. Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Especifica dónde abrir el enlace. Los valores posibles son: `_blank`: Abrir el enlace en una nueva ventana `_parent`: Abrir el enlace en el marco principal `_self`: Predeterminado. Abrir el enlace en el marco actual `_top`: Abrir el enlace en la ventana completa Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relación entre el documento actual y el documento enlazado. Los valores posibles son: `alternate`: Versión alternativa del documento actual `author`: Autor del documento o artículo actual `bookmark`: Enlace permanente a la sección contenedora más cercana `external`: El documento referenciado no está en el mismo sitio que el documento actual `help`: Enlace a la documentación de ayuda relacionada `license`: El contenido principal del documento actual está cubierto por la licencia de derechos de autor del documento referenciado `me`: El documento actual representa al propietario del contenido enlazado `next`: El documento actual es parte de una serie y el documento referenciado es el siguiente de la serie `nofollow`: El autor o editor del documento actual no respalda el documento referenciado `noreferrer`: No incluye el encabezado `Referer`. Similar al efecto de `noopener` `opener`: Si el hipervínculo crea un contexto de navegación de nivel superior (es decir, el valor del atributo `target` es `_blank`), crea un contexto de navegación auxiliar `prev`: El documento actual es parte de una serie y el documento referenciado es el anterior de la serie `search`: Proporciona un enlace a un recurso que se puede utilizar para buscar el archivo actual y sus páginas relacionadas `tag`: Proporciona una etiqueta adecuada para el documento actual (identificada por la dirección dada) Nota: Disponible solo cuando se especifica el atributo `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
`tabindex`	`tabIndex`	`number`	-
Orden del elemento al navegar con la tecla Tab.
`disabled`	`disabled`	`boolean`	`false`
Indica si está deshabilitado.
`loading`	`loading`	`boolean`	`false`
Indica si está en estado de carga.
`name`	`name`	`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`	`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`	`'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`	`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`	`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`	`'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`	`'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`	`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`	`'_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"`.
	`validity`	`ValidityState`	-
Objeto de estado de validación del formulario, véase `ValidityState`.
	`validationMessage`	`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.

Metódusok

Név	Paraméterek	Visszatérési érték
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcionális)	`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.

Események

Név
`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

Név
(alapértelmezett)
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

Név
`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.

Előző fejezet

Select Választómező

Következő fejezet

Slider Csúszka

SegmentedButtonSzegmentált gomb

Uso

Ejemplos

Ancho completo

Modo de selección única

Modo de selección múltiple

Icono

Enlace

Estados deshabilitado y de carga

`mdui-segmented-button-group` API

Tulajdonságok

Metódusok

Események

Slots

CSS egyéni tulajdonságok

`mdui-segmented-button` API

Tulajdonságok

Metódusok

Események

Slots

CSS Parts