Was macht die Komponente?
Sie ist Teil der Autocomplete-Grid-Row-Komponente.
Wann soll die Komponente eingesetzt werden?
- Nur innerhalb der Autocomplete-Grid-Row-Komponente.
| Nummer | Typ | Beschreibung | Optional | Hinweis |
|---|---|---|---|---|
| 1 | Komponente | sbb-form-field | Nein | |
| 1a | Standard-HTML | label | Nein | |
| 1b | Standard-HTML | input | Nein | |
| 1c | Komponente | sbb-icon | Ja | Prefix |
| 1d | Komponente | sbb-icon | Ja | Suffix |
| 2 | Komponente | sbb-autocomplete-grid-optgroup | Ja | |
| 2a | Text | Label | Nein | |
| 2b | Komponente | sbb-divider | - | Erscheint bei einer sbb-autocomplete-grid-optgroup |
| 3 | Komponente | sbb-autocomplete-grid-row | Nein | |
| 4 | Komponente | sbb-autocomplete-grid-optgroup | Nein | |
| 4a | Text | Value | Nein | |
| 4b | Komponente | sbb-icon | Ja | |
| 5 | Komponente | sbb-autocomplete-grid-cell | Ja | |
| 6 | Komponente | sbb-autocomplete-grid-button | Ja |
The sbb-autocomplete-grid-optgroup is a component used to group more sbb-autocomplete-grid-option
within a sbb-autocomplete-grid.
A sbb-divider is displayed at the bottom of the component.
<sbb-form-field label="Label">
<input />
<sbb-autocomplete-grid>
<sbb-autocomplete-grid-optgroup>
<sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
<sbb-autocomplete-grid-cell>
<sbb-autocomplete-grid-button icon-name="pen-small"></sbb-autocomplete-grid-button>
</sbb-autocomplete-grid-cell>
</sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-option value="2">Option 2</sbb-autocomplete-grid-option>
<sbb-autocomplete-grid-cell>
<sbb-autocomplete-grid-button icon-name="trash-small"></sbb-autocomplete-grid-button>
</sbb-autocomplete-grid-cell>
</sbb-autocomplete-grid-row>
</sbb-autocomplete-grid-optgroup>
</sbb-autocomplete-grid>
</sbb-form-field>
Slots
It is possible to provide a set of sbb-autocomplete-grid-option via an unnamed slot;
the component has also a label property as name of the group.
<sbb-autocomplete-grid-optgroup label="Group">
<sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-option value="1" selected>1</sbb-autocomplete-grid-option>
</sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-option value="2">2</sbb-autocomplete-grid-option>
</sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-option value="3">3</sbb-autocomplete-grid-option>
</sbb-autocomplete-grid-row>
</sbb-autocomplete-grid-optgroup>
States
The component has a disabled property which sets all the sbb-autocomplete-grid-option in the group as disabled.
<sbb-autocomplete-grid-optgroup label="Disabled group" disabled>
<sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-option value="A">A</sbb-autocomplete-grid-option>
</sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-option value="B">B</sbb-autocomplete-grid-option>
</sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-row>
<sbb-autocomplete-grid-option value="C">C</sbb-autocomplete-grid-option>
</sbb-autocomplete-grid-row>
</sbb-autocomplete-grid-optgroup>
Slots
| Name | Description |
|---|---|
Use the unnamed slot to add sbb-autocomplete-grid-option elements to the sbb-autocomplete-grid-optgroup. |