Zum Hauptinhalt springen

Einführung in Dropdowns

Einführung in Dropdowns in Storybook

Beispiele​

Note: Weitere Beispiele für die Implementierung der einzelnen Dropdown-Komponenten finden Sie im entsprechenden Abschnitt der Dokumentation.

Auswählen

MultipleSelect

Combobox

MultipleCombobox

Select

<Select
  label="Your favorite character"
  initialValue={{ id: '1', label: 'Anakin' }}>
  <SelectOption
    value={{
      id: '1',
      label: 'Anakin',
    }}
  />
  <SelectOption
    value={{
      id: '2',
      label: 'Luke',
    }}
  />
</Select>

MultipleSelect

<MultipleSelect
  label="Your favorite characters"
  initialValue={[
    { id: '1', label: 'Anakin' },
    { id: '2', label: 'Luke' },
  ]}>
  <SelectOption
    value={{
      id: '1',
      label: 'Anakin',
    }}
  />
  <SelectOption
    value={{
      id: '2',
      label: 'Luke',
    }}
  />
  <SelectOption
    value={{
      id: '3',
      label: 'Yoda',
    }}
  />
</MultipleSelect>

Combobox

export function ComboWithFilter() {
  const CHARACTERS = [
    { id: '1', label: 'Anakin Skywalker' },
    { id: '2', label: 'Luke Skywalker' },
    { id: '3', label: 'Master Yoda' },
    { id: '4', label: 'Han Solo' },
  ];

  const { filteredOptions, onSearch, resetFilter } =
    useFilteredOptions(CHARACTERS);

  return (
    <Combobox
      label="Select 1 option"
      secondaryLabel="Options filtered by user input"
      onSearch={onSearch}
      onBlur={resetFilter}>
      {filteredOptions.map(({ id, label }) => (
        <ComboboxOption
          key={id}
          value={{ id, label }}
        />
      ))}
    </Combobox>
  );
}

MultipleCombobox

export function MultipleComboWithFilteAndInitial() {
  const CHARACTERS = [
    { id: '1', label: 'Anakin Skywalker' },
    { id: '2', label: 'Luke Skywalker' },
    { id: '3', label: 'Master Yoda' },
    { id: '4', label: 'Han Solo' },
  ];

  const { filteredOptions, onSearch, resetFilter } =
    useFilteredOptions(CHARACTERS);

  return (
    <MultipleCombobox
      label="Select options"
      secondaryLabel="Options filtered by user input"
      onSearch={onSearch}
      onBlur={resetFilter}
      initialValue={[CHARACTERS[1], CHARACTERS[2]]}>
      {filteredOptions.map(({ id, label }) => (
        <ComboboxOption
          key={id}
          value={{ id, label }}
        />
      ))}
    </MultipleCombobox>
  );
}