SegmentedButtonSegmentli Buton

I pulsanti segmentati raggruppano un insieme di opzioni e consentono di cambiare visualizzazione o ordinare elementi.

Utilizzo

Importa i componenti:

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

Importa i tipi TypeScript:

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

Esempio:

Giorno

Settimana

Mese

<mdui-segmented-button-group>
  <mdui-segmented-button>Giorno</mdui-segmented-button>
  <mdui-segmented-button>Settimana</mdui-segmented-button>
  <mdui-segmented-button>Mese</mdui-segmented-button>
</mdui-segmented-button-group>

Per abilitare la modalità di selezione singola, imposta l'attributo selects del componente <mdui-segmented-button-group> su single. In questa modalità, la proprietà value di <mdui-segmented-button-group> riflette la proprietà value del <mdui-segmented-button> attualmente selezionato.

Giorno

Settimana

Mese

Giorno

Settimana

Mese

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Giorno</mdui-segmented-button>
  <mdui-segmented-button value="week">Settimana</mdui-segmented-button>
  <mdui-segmented-button value="month">Mese</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Giorno</mdui-segmented-button>
  <mdui-segmented-button value="week">Settimana</mdui-segmented-button>
  <mdui-segmented-button value="month">Mese</mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

Selezione Multipla

Per abilitare la modalità di selezione multipla, imposta l'attributo selects del componente <mdui-segmented-button-group> su multiple. In questa modalità, la proprietà value di <mdui-segmented-button-group> è un array composto dalle proprietà value dei componenti <mdui-segmented-button> attualmente selezionati.

Quando è attiva la selezione multipla, la proprietà value di <mdui-segmented-button-group> è un array e può essere letta e impostata solo tramite proprietà JavaScript.

Giorno

Settimana

Mese

Giorno

Settimana

Mese

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Giorno</mdui-segmented-button>
  <mdui-segmented-button value="week">Settimana</mdui-segmented-button>
  <mdui-segmented-button value="month">Mese</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Giorno</mdui-segmented-button>
  <mdui-segmented-button value="week">Settimana</mdui-segmented-button>
  <mdui-segmented-button value="month">Mese</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // Imposta la selezione predefinita su settimana e mese
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Kaynak Kodu

Icone

Per aggiungere Icone Material sui lati sinistro e destro del pulsante, usa gli attributi icon e end-icon sull'elemento <mdui-segmented-button>. Oppure, usa gli slot icon e end-icon per aggiungere elementi sui lati sinistro e destro del pulsante.

Giorno

Settimana

Mese

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Giorno</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Settimana</mdui-segmented-button>
  <mdui-segmented-button>
    Mese
    <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>

Kaynak Kodu

Per impostare l'Icona Material per lo stato selezionato, usa l'attributo selected-icon sull'elemento <mdui-segmented-button>. Oppure, usa lo slot selected-icon.

Giorno

Settimana

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Giorno</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Settimana
  </mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

Link

Per trasformare il pulsante in un link, usa l'attributo href sul componente <mdui-segmented-button>. Gli attributi download, target e rel sono disponibili per le normali funzionalità dei link.

Link

Settimana

Mese

<mdui-segmented-button-group>
  <mdui-segmented-button href="https://www.mdui.org" target="_blank">Link</mdui-segmented-button>
  <mdui-segmented-button>Settimana</mdui-segmented-button>
  <mdui-segmented-button>Mese</mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

Stato Disabilitato e in Caricamento

Per disabilitare l'intero gruppo di pulsanti segmentati, aggiungi l'attributo disabled all'elemento <mdui-segmented-button-group>.

Giorno

Settimana

Mese

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Giorno</mdui-segmented-button>
  <mdui-segmented-button>Settimana</mdui-segmented-button>
  <mdui-segmented-button>Mese</mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

Per disabilitare pulsanti specifici, aggiungi l'attributo disabled all'elemento <mdui-segmented-button>. Per portare un pulsante nello stato di caricamento, aggiungi l'attributo loading.

Giorno

Settimana

Mese

Anno

<mdui-segmented-button-group>
  <mdui-segmented-button>Giorno</mdui-segmented-button>
  <mdui-segmented-button disabled>Settimana</mdui-segmented-button>
  <mdui-segmented-button loading>Mese</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Anno</mdui-segmented-button>
</mdui-segmented-button-group>

Kaynak Kodu

`mdui-segmented-button-group` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`full-width`	`fullWidth`	`boolean`	`false`
Se riempire l'intera larghezza dell'elemento padre
`selects`	`selects`	`'single' \| 'multiple'`	-
Stato di selezione del pulsante segmentato, non selezionabile per impostazione predefinita. I valori opzionali includono: `single`: selezione singola `multiple`: selezione multipla
`disabled`	`disabled`	`boolean`	`false`
Se il componente è disabilitato
`required`	`required`	`boolean`	`false`
Se è obbligatorio effettuare una selezione al momento dell'invio del modulo
`form`	`form`	`string`	-
Elemento `<form>` associato. Il valore di questo attributo deve essere l'`id` di un elemento `<form>` nella stessa pagina. Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento `<form>`. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento `<form>`.
`name`	`name`	`string`	`''`
Nome da inviare con il modulo, verrà inviato insieme ai dati del modulo
`value`	`value`	`string \| string[]`	`''`
Valore del `<mdui-segmented-button>` attualmente selezionato. Nota: l'attributo HTML di questa proprietà è sempre una stringa e può essere impostato come valore iniziale tramite l'attributo HTML solo quando `selects="single"`. Il valore della proprietà JavaScript è una stringa quando `selects="single"` e un array di stringhe quando `selects="multiple"`. Pertanto, quando `selects="multiple"`, per modificare questo valore, è possibile farlo solo tramite la proprietà JavaScript.
	`defaultValue`	`string \| string[]`	`''`
Valore selezionato predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
	`validity`	`ValidityState`	-
Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a `ValidityState`
	`validationMessage`	`string`	-
Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota

Yöntemler

Ad	Parametreler	Dönüş Değeri
`checkValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`
`reportValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`. Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
`setCustomValidity`	`message: string`	`void`
Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida

Olaylar

Ad
`change`
Attivato quando il valore selezionato cambia
`invalid`
Attivato quando la convalida del campo del modulo non viene superata

Slots

Ad
Varsayılan
Componente `<mdui-segmented-button>`

CSS Custom Property

Ad
`--shape-corner`
Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.

`mdui-segmented-button` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`icon`	`icon`	`string`	-
Nome dell'icona Material a sinistra. Può anche essere impostato tramite `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nome dell'icona Material a destra. Può anche essere impostato tramite `slot="end-icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Nome dell'icona Material per lo stato selezionato. Può anche essere impostato tramite `slot="selected-icon"`.
`href`	`href`	`string`	-
URL di destinazione del collegamento. Se questa proprietà è impostata, il componente viene renderizzato come elemento `<a>` e sarà possibile utilizzare le proprietà relative ai collegamenti.
`download`	`download`	`string`	-
Destinazione del download del collegamento. Nota: questa proprietà è valida solo se è impostato l'attributo `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Modalità di apertura del collegamento. Le opzioni disponibili sono: `_blank`: apre il collegamento in una nuova finestra `_parent`: apre il collegamento nel frame genitore `_self`: predefinita. Apre il collegamento nel frame corrente `_top`: apre il collegamento nell'intera finestra Nota: questa proprietà è valida solo se è impostato l'attributo `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relazione tra il documento corrente e il documento collegato. Le opzioni disponibili sono: `alternate`: versione alternativa del documento corrente `author`: autore del documento o dell'articolo corrente `bookmark`: collegamento permanente al capitolo antenato più vicino `external`: il documento di destinazione non appartiene allo stesso sito del documento corrente `help`: collegamento alla guida di riferimento `license`: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione `me`: il documento corrente rappresenta il proprietario del contenuto collegato `next`: il documento corrente fa parte di una serie e il documento di destinazione è il successivo `nofollow`: l'autore o l'editore del documento corrente non avalla il documento di destinazione `noreferrer`: non include l'intestazione `Referer`. Simile a `noopener` `opener`: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo `target` è `_blank`), crea un contesto di navigazione ausiliario `prev`: il documento corrente fa parte di una serie e il documento di destinazione è il precedente `search`: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate `tag`: associa un tag al documento corrente (identificato dall'indirizzo specificato) Nota: disponibile solo quando è specificato l'attributo `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Se attivare automaticamente il focus al caricamento della pagina
`tabindex`	`tabIndex`	`number`	-
Indice di tabulazione dell'elemento
`disabled`	`disabled`	`boolean`	`false`
Se il componente è disabilitato
`loading`	`loading`	`boolean`	`false`
Se il componente è in stato di caricamento
`name`	`name`	`string`	`''`
Nome del pulsante, verrà inviato insieme ai dati del modulo. Nota: questa proprietà è valida solo se l'attributo `href` non è impostato.
`value`	`value`	`string`	`''`
Valore iniziale del pulsante, verrà inviato insieme ai dati del modulo. Nota: questa proprietà è valida solo se l'attributo `href` non è impostato.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Tipo di pulsante. Il tipo predefinito è `button`. Le opzioni disponibili sono: `submit`: invia i dati del modulo al server `reset`: reimposta tutti i campi del modulo ai valori iniziali `button`: questo tipo di pulsante non ha un comportamento predefinito Nota: questa proprietà è valida solo se l'attributo `href` non è specificato.
`form`	`form`	`string`	-
Elemento `<form>` associato. Il valore di questo attributo deve essere l'`id` di un elemento `<form>` nella stessa pagina. Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento `<form>`. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento `<form>`. Nota: questa proprietà è valida solo se l'attributo `href` non è specificato.
`formaction`	`formAction`	`string`	-
Specifica l'URL per l'invio del modulo. Se questo attributo è specificato, sovrascriverà l'attributo `action` dell'elemento `<form>`. Nota: questa proprietà è valida solo se l'attributo `href` non è specificato e `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Specifica il tipo di contenuto per l'invio del modulo al server. Le opzioni disponibili sono: `application/x-www-form-urlencoded`: valore predefinito quando questo attributo non è specificato `multipart/form-data`: utilizzato quando il modulo contiene un elemento `<input type="file">` `text/plain`: introdotto in HTML5, utilizzato per il debug Se questo attributo è specificato, sovrascriverà l'attributo `enctype` dell'elemento `<form>`. Nota: questa proprietà è valida solo se l'attributo `href` non è specificato e `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Specifica il metodo HTTP da utilizzare durante l'invio del modulo. Le opzioni disponibili sono: `post`: i dati del modulo sono inclusi nel corpo della richiesta e inviati al server `get`: i dati del modulo vengono aggiunti all'URL del modulo con `?` come separatore e l'URL generato viene inviato al server. Utilizzare questo metodo quando il modulo non ha effetti collaterali e contiene solo caratteri ASCII Se questo attributo è impostato, sovrascriverà l'attributo `method` dell'elemento `<form>`. Nota: questa proprietà è valida solo se l'attributo `href` non è impostato e `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Se questo attributo è impostato, la convalida del modulo non verrà eseguita durante l'invio. Se questo attributo è impostato, sovrascriverà l'attributo `novalidate` dell'elemento `<form>`. Nota: questa proprietà è valida solo se l'attributo `href` non è impostato e `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Dove aprire la risposta ricevuta dopo l'invio del modulo. I valori opzionali includono: `_self`: opzione predefinita, apre nel frame corrente `_blank`: apre in una nuova finestra `_parent`: apre nel frame genitore `_top`: apre nell'intera finestra Se questo attributo è impostato, sovrascriverà l'attributo `target` dell'elemento `<form>`. Nota: questa proprietà è valida solo se l'attributo `href` non è impostato e `type="submit"`.
	`validity`	`ValidityState`	-
Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a `ValidityState`
	`validationMessage`	`string`	-
Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota

Yöntemler

Ad	Parametreler	Dönüş Değeri
`click`		`void`
Simula un clic del mouse sull'elemento
`focus`	`options: FocusOptions` (İsteğe Bağlı)	`void`
Imposta il focus sull'elemento corrente. È possibile passare un oggetto come parametro, le cui proprietà includono: `preventScroll`: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su `true`.
`blur`		`void`
Rimuove il focus dall'elemento corrente
`checkValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`
`reportValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`. Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
`setCustomValidity`	`message: string`	`void`
Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida

Olaylar

Ad
`focus`
Attivato quando si riceve il focus
`blur`
Attivato quando si perde il focus
`invalid`
Attivato quando la convalida del campo del modulo non viene superata

Slots

Ad
Varsayılan
Contenuto testuale dell'elemento del pulsante segmentato
`icon`
Icona a sinistra dell'elemento del pulsante segmentato
`selected-icon`
Icona a sinistra nello stato selezionato
`end-icon`
Icona a destra dell'elemento del pulsante segmentato

CSS Parts

Ad
`button`
Elemento `<button>` o `<a>` interno
`icon`
Icona a sinistra
`selected-icon`
Icona a sinistra nello stato selezionato
`end-icon`
Icona a destra
`label`
Contenuto testuale
`loading`
Elemento `<mdui-circular-progress>` nello stato di caricamento

Önceki Bölüm

Select Seçim Kutusu

Sonraki Bölüm

Slider Kaydırıcı

SegmentedButtonSegmentli Buton

Utilizzo

Esempi

Larghezza intera

Selezione Singola

Selezione Multipla

Icone

Link

Stato Disabilitato e in Caricamento

`mdui-segmented-button-group` API

Özellikler

Yöntemler

Olaylar

Slots

CSS Custom Property

`mdui-segmented-button` API

Özellikler

Yöntemler

Olaylar

Slots

CSS Parts