SegmentedButton

Die Segmented Button-Komponente gruppiert mehrere Buttons, um Optionen bereitzustellen, Ansichten umzuschalten oder Elemente zu sortieren.

Verwendung

Importieren Sie die Komponenten nach Bedarf:

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

Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf:

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

Beispiel:

Tag

Woche

Monat

<mdui-segmented-button-group>
  <mdui-segmented-button>Tag</mdui-segmented-button>
  <mdui-segmented-button>Woche</mdui-segmented-button>
  <mdui-segmented-button>Monat</mdui-segmented-button>
</mdui-segmented-button-group>

Setzen Sie das Attribut selects auf single im <mdui-segmented-button-group>-Element, um den Einfachauswahl-Modus zu aktivieren. Der value-Wert von <mdui-segmented-button-group> ist dann der value-Wert des aktuell ausgewählten <mdui-segmented-button>.

Tag

Woche

Monat

Tag

Woche

Monat

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Tag</mdui-segmented-button>
  <mdui-segmented-button value="week">Woche</mdui-segmented-button>
  <mdui-segmented-button value="month">Monat</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Tag</mdui-segmented-button>
  <mdui-segmented-button value="week">Woche</mdui-segmented-button>
  <mdui-segmented-button value="month">Monat</mdui-segmented-button>
</mdui-segmented-button-group>

Quellcode

Mehrfachauswahl-Modus

Setzen Sie das Attribut selects auf multiple im <mdui-segmented-button-group>-Element, um den Mehrfachauswahl-Modus zu aktivieren. Der value-Wert von <mdui-segmented-button-group> ist dann ein Array der value-Werte der aktuell ausgewählten <mdui-segmented-button>-Elemente.

Hinweis: Im Mehrfachauswahl-Modus ist der value-Wert von <mdui-segmented-button-group> ein Array, das nur über eine JavaScript-Property gelesen und gesetzt werden kann.

Tag

Woche

Monat

Tag

Woche

Monat

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Tag</mdui-segmented-button>
  <mdui-segmented-button value="week">Woche</mdui-segmented-button>
  <mdui-segmented-button value="month">Monat</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Tag</mdui-segmented-button>
  <mdui-segmented-button value="week">Woche</mdui-segmented-button>
  <mdui-segmented-button value="month">Monat</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // Standardmäßig Woche und Monat auswählen
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Quellcode

Symbol

Im <mdui-segmented-button>-Element: Über die Attribute icon und end-icon können Sie links bzw. rechts vom Button ein Material Icons-Symbol hinzufügen. Sie können auch über die Slots icon und end-icon Elemente hinzufügen.

Tag

Woche

Monat

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Tag</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Woche</mdui-segmented-button>
  <mdui-segmented-button>
    Monat
    <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>

Quellcode

Im <mdui-segmented-button>-Element: Über das Attribut selected-icon können Sie das Material Icons-Symbol für den ausgewählten Zustand festlegen. Sie können dies auch über den Slot selected-icon tun.

Tag

Woche

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

Quellcode

Link

Im <mdui-segmented-button>-Element: Mit dem Attribut href verwandeln Sie den Button in einen Link. Sie können dann auch die Attribute download, target und rel verwenden.

Link

Woche

Monat

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

Quellcode

Deaktivierter und Ladezustand

Fügen Sie das Attribut disabled zum <mdui-segmented-button-group>-Element hinzu, um die gesamte Gruppe zu deaktivieren.

Tag

Woche

Monat

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Tag</mdui-segmented-button>
  <mdui-segmented-button>Woche</mdui-segmented-button>
  <mdui-segmented-button>Monat</mdui-segmented-button>
</mdui-segmented-button-group>

Quellcode

Im <mdui-segmented-button>-Element: Fügen Sie das Attribut disabled hinzu, um einen bestimmten Button zu deaktivieren. Fügen Sie das Attribut loading hinzu, um einen Ladezustand für einen bestimmten Button anzuzeigen.

Tag

Woche

Monat

Jahr

<mdui-segmented-button-group>
  <mdui-segmented-button>Tag</mdui-segmented-button>
  <mdui-segmented-button disabled>Woche</mdui-segmented-button>
  <mdui-segmented-button loading>Monat</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Jahr</mdui-segmented-button>
</mdui-segmented-button-group>

Quellcode

`mdui-segmented-button-group` API

Eigenschaften

Attribut	Property	Typ	Standard
`full-width`	`fullWidth`	`boolean`	`false`
Wenn gesetzt, dehnt sich die Segmented Button Group aus, um die Breite ihres Containers auszufüllen.
`selects`	`selects`	`'single' \| 'multiple'`	-
Steuert, ob die Segmented Button Group ausgewählt werden kann. Standardmäßig ist sie nicht auswählbar. Mögliche Werte: `single`: Es kann nur einer ausgewählt werden. `multiple`: Mehrfachauswahl ist erlaubt.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert die Segmented Button Group.
`required`	`required`	`boolean`	`false`
Erfordert eine Auswahl, wenn das Formular gesendet wird.
`form`	`form`	`string`	-
Verknüpft die Segmented Button Group mit einem `<form>`-Element. Setzen Sie dies auf die `id` eines `<form>`-Elements im selben Dokument. Wenn nicht angegeben, verwendet die Segmented Button Group ihr übergeordnetes `<form>`-Element, falls vorhanden. Dies ermöglicht es der Segmented Button Group, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem sie verschachtelt ist.
`name`	`name`	`string`	`''`
Der Name der Segmented Button Group, der mit Formulardaten übermittelt wird.
`value`	`value`	`string \| string[]`	`''`
Der Wert des ausgewählten `<mdui-segmented-button>`. Dieser Wert wird mit Formulardaten übermittelt. Hinweis: Das HTML-Attribut akzeptiert immer eine Zeichenfolge und kann nur als Anfangswert verwendet werden, wenn `selects="single"`. Die JavaScript-Eigenschaft ist eine Zeichenfolge, wenn `selects="single"`, und ein Array von Zeichenfolgen, wenn `selects="multiple"`. Wenn `selects="multiple"`, aktualisieren Sie die JavaScript-Eigenschaft, um diesen Wert zu ändern.
	`defaultValue`	`string \| string[]`	`''`
Der standardmäßig ausgewählte Wert. Die Gruppe setzt beim Zurücksetzen des Formulars auf diesen Zustand zurück. Nur JavaScript.
	`validity`	`ValidityState`	-
Ein `ValidityState`-Objekt, das die Gültigkeitszustände des Elements darstellt.
	`validationMessage`	`string`	-
Validierungsnachricht. Leere Zeichenfolge, wenn gültig.

Methoden

Name	Parameter	Rückgabewert
`checkValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst und `false` zurückgegeben. Wenn gültig, wird `true` zurückgegeben.
`reportValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst, `false` zurückgegeben und eine Validierungsnachricht angezeigt. Wenn gültig, wird `true` zurückgegeben.
`setCustomValidity`	`message: string`	`void`
Setzt eine benutzerdefinierte Fehlermeldung. Wenn die Nachricht nicht leer ist, wird das Feld als ungültig betrachtet.

Ereignisse

Name
`change`
Wird ausgelöst, wenn sich der ausgewählte Wert ändert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.

Slots

Name
Standard
`<mdui-segmented-button>`-Elemente.

CSS Custom Property

Name
`--shape-corner`
Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.

`mdui-segmented-button` API

Eigenschaften

Attribut	Property	Typ	Standard
`icon`	`icon`	`string`	-
Gibt den Namen des Material Icons für das linke Icon an. Alternativ können Sie `slot="icon"` verwenden.
`end-icon`	`endIcon`	`string`	-
Gibt den Namen des Material Icons für das rechte Icon an. Alternativ können Sie `slot="end-icon"` verwenden.
`selected-icon`	`selectedIcon`	`string`	-
Gibt den Namen des Material Icons für den ausgewählten Zustand an. Alternativ können Sie `slot="selected-icon"` verwenden.
`href`	`href`	`string`	-
Die URL für den Link. Wenn gesetzt, wird die Komponente als `<a>`-Element gerendert und unterstützt Link-bezogene Attribute.
`download`	`download`	`string`	-
Lädt die verlinkte URL herunter. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Legt fest, wo die verlinkte URL geöffnet wird. Mögliche Werte: `_blank`: Öffnet in einem neuen Tab oder Fenster. `_parent`: Öffnet im übergeordneten Browsing-Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. `_self`: Öffnet im aktuellen Browsing-Kontext (Standard). `_top`: Öffnet im obersten Browsing-Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Gibt die Beziehung der verlinkten URL als durch Leerzeichen getrennte Link-Typen an. Mögliche Werte: `alternate`: Eine alternative Version des aktuellen Dokuments. `author`: Der Autor des aktuellen Dokuments oder Artikels. `bookmark`: Der Permalink des übergeordneten Abschnitts. `external`: Das referenzierte Dokument ist nicht Teil derselben Website wie das aktuelle Dokument. `help`: Ein Link zu kontextsensitiver Hilfe. `license`: Inhalt, der durch die im referenzierten Dokument beschriebene Urheberrechtslizenz abgedeckt ist. `me`: Links zu Inhalten, die dem Autor des aktuellen Dokuments gehören. `next`: Das nächste Dokument in der Serie. `nofollow`: Gibt an, dass der ursprüngliche Autor oder Herausgeber des aktuellen Dokuments das referenzierte Dokument nicht unterstützt. `noreferrer`: Verhindert das Senden des `Referer`-Headers. Hat die gleiche Wirkung wie `noopener`. `opener`: Erstellt einen neuen Browsing-Kontext, wenn der Hyperlink ansonsten in einem obersten Kontext geöffnet würde, der nicht sekundär ist (z. B. wenn `target="_blank"` angegeben ist). `prev`: Das vorherige Dokument in der Serie. `search`: Links zu einer Ressource, die verwendet werden kann, um im aktuellen Dokument und seinen verwandten Seiten zu suchen. `tag`: Markiert das aktuelle Dokument mit dem angegebenen Tag. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`autofocus`	`autofocus`	`boolean`	`false`
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
`tabindex`	`tabIndex`	`number`	-
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert das Element.
`loading`	`loading`	`boolean`	`false`
Gibt an, dass sich das Element in einem Ladezustand befindet.
`name`	`name`	`string`	`''`
Der Button-Name, der mit Formulardaten übermittelt wird. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist.
`value`	`value`	`string`	`''`
Der Button-Wert, der mit Formulardaten übermittelt wird. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Gibt die Standardaktion des Buttons an. Standard: `button`. Mögliche Werte: `submit`: Sendet die Formulardaten an den Server. `reset`: Setzt alle Steuerelemente auf ihre Anfangswerte zurück. `button`: Führt standardmäßig keine Aktion aus. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist.
`form`	`form`	`string`	-
Verknüpft den Button mit einem `<form>`-Element. Setzen Sie dies auf die `id` eines `<form>`-Elements im selben Dokument. Wenn nicht angegeben, verwendet der Button sein übergeordnetes `<form>`-Element, falls vorhanden. Dadurch kann der Button jedes Formular im Dokument ansprechen, nicht nur das Formular, in dem er verschachtelt ist. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist.
`formaction`	`formAction`	`string`	-
Gibt die URL an, die die vom Button übermittelten Informationen verarbeitet. Überschreibt das `action`-Attribut des zugehörigen Formulars des Buttons. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist und `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Gibt an, wie die Formulardaten kodiert werden sollen. Mögliche Werte: `application/x-www-form-urlencoded`: Standard, wenn das Attribut weggelassen wird. `multipart/form-data`: Wird für `<input>`-Elemente mit `type="file"` verwendet. `text/plain`: Nützlich zum Debuggen, aber nicht für die eigentliche Formularübermittlung. Überschreibt das `enctype`-Attribut des zugehörigen Formulars des Buttons. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist und `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Gibt die HTTP-Methode für die Formularübermittlung an. Mögliche Werte: `post`: Sendet die Formulardaten im Anforderungstext. `get`: Hängt die Formulardaten an die `action`-URL an. Überschreibt das `method`-Attribut des zugehörigen Formulars des Buttons. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist und `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Gibt an, dass das Formular bei der Übermittlung nicht validiert werden soll. Überschreibt das `novalidate`-Attribut des zugehörigen Formulars des Buttons. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist und `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Gibt an, in welchem Kontext die Antwort nach der Formularübermittlung geöffnet werden soll. Mögliche Werte: `_self`: Aktueller Browsing-Kontext (Standard). `_blank`: Neuer Tab oder Fenster. `_parent`: Öffnet im übergeordneten Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. `_top`: Öffnet im obersten Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. Überschreibt das `target`-Attribut des zugehörigen Formulars des Buttons. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist und `type="submit"`.
	`validity`	`ValidityState`	-
Ein `ValidityState`-Objekt, das die Gültigkeitszustände des Elements darstellt.
	`validationMessage`	`string`	-
Die Validierungsnachricht. Gibt eine leere Zeichenfolge zurück, wenn das Element gültig ist.

Methoden

Name	Parameter	Rückgabewert
`click`		`void`
Simuliert einen Mausklick auf das Element.
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine `preventScroll`-Eigenschaft enthalten. Wenn `preventScroll` auf `true` gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
`blur`		`void`
Entfernt den Fokus vom Element.
`checkValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst und `false` zurückgegeben. Wenn gültig, wird `true` zurückgegeben.
`reportValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst, `false` zurückgegeben und eine Validierungsnachricht angezeigt. Wenn gültig, wird `true` zurückgegeben.
`setCustomValidity`	`message: string`	`void`
Setzt eine benutzerdefinierte Fehlermeldung. Wenn die Nachricht nicht leer ist, wird das Feld als ungültig betrachtet.

Ereignisse

Name
`focus`
Wird ausgelöst, wenn der Segmented Button den Fokus erhält.
`blur`
Wird ausgelöst, wenn der Segmented Button den Fokus verliert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.

Slots

Name
Standard
Textinhalt.
`icon`
Linkes Icon.
`selected-icon`
Icon für den ausgewählten Zustand.
`end-icon`
Rechtes Icon.

CSS Parts

Name
`button`
Internes `<button>`- oder `<a>`-Element.
`icon`
Linkes Icon.
`selected-icon`
Icon für den ausgewählten Zustand.
`end-icon`
Rechtes Icon.
`label`
Textinhalt.
`loading`
Das `<mdui-circular-progress>`-Element für den Ladezustand.

Vorherige Seite

Select

Nächste Seite

Slider

SegmentedButton

Verwendung

Beispiele

Volle Breite

Einfachauswahl-Modus

Mehrfachauswahl-Modus

Symbol

Link

Deaktivierter und Ladezustand

`mdui-segmented-button-group` API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Custom Property

`mdui-segmented-button` API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Parts