Vorschau.

Was macht die Komponente?

Die Option ist ein auswählbarer Eintrag in einer Autocomplete- oder Select-Komponente. Optionen können mit einer Optgroup gruppiert werden. In Autocomplete kann zusätzlich ein Hinweis (Option-Hint) angezeigt werden.

Wann soll die Komponente eingesetzt werden?

• Nur innerhalb der Autocomplete- oder Select-Komponente.

Regeln.

• Jede Option ist kurz und eindeutig beschriftet und unterscheidet sich klar von den anderen.
• Zusammengehörige Optionen werden mit einer Optgroup gruppiert. Wird die Gruppe deaktiviert, sind alle ihre Optionen deaktiviert.
• Ein Icon ist optional.
• Bei der Suche in Autocomplete wird der gefundene Text fett hervorgehoben.
• Der Option-Hint (z.B. «Keine Treffer») ist nur in Autocomplete möglich. Er wird von Screenreadern nur als Text gelesen und muss bei Bedarf als Live-Region ausgezeichnet werden.

Elemente.

Diese Komponente umfasst mehrere Elemente, die eigenständig verwendet werden.

• sbb-option

  Mehrere sbb-option lassen sich mit sbb-optgroup zusammenfassen.

• sbb-option-hint

Spezifikation.

Web Components.

Die Web Component ist im Paket @sbb-esta/lyne-elements enthalten.

Dokumentation.

The <sbb-option> is a component which can be used to display items in components like
sbb-autocomplete or a sbb-select.

It is based on the native option element. As such, it can be labeled via its text content.
The component can optionally display an <sbb-icon> at the component start using the iconName property
or via custom content using the icon slot.

<sbb-option>Option label</sbb-option>

<sbb-option icon-name="info">Option label</sbb-option>

Like the native option, the component has a value property.

The state of the <sbb-option> can be configured via the selected and disabled attributes/properties.
When disabled, the selection via click is prevented.
If the <sbb-option> is nested in an <sbb-optgroup> component, it inherits the disabled state from
the parent.

<sbb-option value="value" selected>Option label</sbb-option>

<sbb-option value="value" disabled>Option label</sbb-option>

Events.

Consumers can listen to the optionselected event on the <sbb-option> component to react to the selected
value. The event is triggered if the element has been selected by user interaction. Alternatively,
the optionselectionchange event can be listened to, which is triggered if the element has either been
selected or deselected.

Style.

If the label slot contains only a text node, it is possible to search for text in the <sbb-option>
using the highlight method, passing the desired text; if the text is present it will be highlighted
in bold.

<!-- Supported scenario -->
<sbb-option> Highlightable caption</sbb-option>

<!-- Not supported scenarios -->
<sbb-option>
  <span>Not highlightable caption</span>
</sbb-option>

<sbb-option>
  <img src="..." />
  Highlightable caption
</sbb-option>

Complex Values.

This component supports any types of values, including complex objects.
The type can be specified using the generic type parameter T of SbbOption<T>.

const option = document.querySelector('sbb-option');
option.value = { value: 'value', name: 'name' };
option.textContent = 'Example';

sbb-optgroup.

The <sbb-optgroup> is a component used to group more <sbb-option> within an
sbb-autocomplete or an
sbb-select component.

The component has a label property as the name of the group.

<sbb-optgroup label="Group">
  <sbb-option value="1" selected>1</sbb-option>
  <sbb-option value="2">2</sbb-option>
  <sbb-option value="3">3</sbb-option>
</sbb-optgroup>

States.

The component has a disabled property which sets all the <sbb-option> in the group as disabled.

<sbb-optgroup label="Disabled group" disabled>
  <sbb-option value="A">A</sbb-option>
  <sbb-option value="B">B</sbb-option>
  <sbb-option value="C">C</sbb-option>
</sbb-optgroup>

sbb-option-hint.

The <sbb-option-hint> is an optional component used to show a hint message within an
sbb-autocomplete.

<sbb-autocomplete>
  <sbb-option value="1"> Option 1 </sbb-option>
  ...
  <sbb-divider></sbb-divider>
  <sbb-option-hint>42 more hits</sbb-option-hint>
</sbb-autocomplete>

Style.

The <sbb-option-hint> has a negative property which will be automatically inherited from the parent <sbb-autocomplete>.

<sbb-autocomplete>
  <sbb-option value="1">Option 1</sbb-option>
  ...
  <sbb-option-hint>42 more hits</sbb-option-hint>
</sbb-autocomplete>

A11y.

By default, the <sbb-option-hint> is treated as a simple text from screen readers, and it is not easily accessible by screen reader users.

If deemed necessary, the <sbb-option-hint> can be marked with the aria-live attribute.

Angular.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

class: SbbOptGroupElement, sbb-optgroup.

Properties.

Slots.

class: SbbOptionElement, sbb-option.

Properties.

Events.

CSS Properties.

Slots.

class: SbbOptionHintElement, sbb-option-hint.

Properties.

Slots.