Zum Hauptinhalt springen

MultipleSelect

MultipleSelect in Storybook
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie MultipleSelect verwenden können. Auf den speziellen Registerkarten finden Sie Einzelheiten zu den von der Komponente bereitgestellten Funktionen.

Note: Die meisten Funktionen und Eigenschaften der vier verfügbaren Dropdown-Komponenten unterscheiden sich bei der Verwendung nicht. Einige Beispiele aus anderen Komponenten können auch für MultipleSelect relevant sein.

Mit einem Initialwert​

Beispiel für die Festlegung einer einfachen MultipleSelect-Komponente mit einem zugewiesenen Initialwert.

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

Kein Initialwert​

Einfache MultipleSelect-Komponente ohne Initialwert.

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

Deaktivierte Dropdown-Komponente oder Optionen​

Sie können jede der Dropdown-Komponenten vollständig deaktivieren, indem Sie die Eigenschaft disabled auf true setzen. Mit der Eigenschaft disabled der Komponenten SelectOption und ComboboxOption können Sie auch nur die speziellen Optionen deaktivieren. Wenn die gesamte Komponente deaktiviert ist, hat die Eigenschaft disabled der Optionen keine Auswirkungen.

Deaktivierte Dropdown-Komponente​

Beispiel für eine deaktivierte Dropdown-Komponente unter Verwendung der MultipleSelect-Komponente.

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

Deaktivierte Optionen​

Beispiel für die MultipleSelect-Komponente mit einigen deaktivierten Dropdown-Optionen:

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

DisplayOnly-Dropdown​

Durch Festlegen der Eigenschaft displayOnly auf true wird der Komponentenwert als Klartext angezeigt.

Hier ein Beispiel:

<MultipleSelect
  label="Your favorite characters (Multiple Select component)"
  initialValue={[{ id: '1', label: 'Anakin' }]}
  displayOnly={true}>
  <SelectOption
    value={{
      id: '1',
      label: 'Anakin',
    }}
  />
</MultipleSelect>

Kontrollierte Komponente​

Dieses Verhalten ist bei allen Dropdown-Komponenten gleich: Wenn die value-Eigenschaft festgelegt ist, kann der Benutzer die Komponente nicht direkt ändern. Stattdessen wird sie vollständig über die Implementierung durch Entwickler verwaltet.

Dieses Beispiel gilt für alle Dropdown-Komponenten:

export function MultiSelectControlled() {
  const [updatedValue, setNewValue] = useState([]);

  const onChange = (e, newValue) => {
    setNewValue(newValue);
  };

  const options = [
    <SelectOption
      value={{
        id: '1',
        label: 'Option 1',
      }}
    />,
    <SelectOption
      value={{
        id: '2',
        label: 'Option 2',
      }}
    />,
    <SelectOption
      value={{
        id: '3',
        label: 'Option 3',
      }}
    />,
    <SelectOption
      value={{
        id: '4',
        label: 'Option 4',
      }}
    />,
    <SelectOption
      value={{
        id: '5',
        label: 'Option 5',
      }}
    />,
  ];

  return (
    <div>
      <MultipleSelect
        label="Choose values"
        secondaryLabel="This value will be passed to the list of options below"
        onChange={onChange}>
        {options}
      </MultipleSelect>
      <br />
      <MultipleSelect
        label="Changes with the above"
        value={updatedValue}>
        {options}
      </MultipleSelect>
    </div>
  );
}

Fokus auf die Dropdown-Komponente setzen​

Mit der Eigenschaft ref und den imperativen Handlern („focus“, „blur“ und „scrollIntoView“) ist es möglich, verschiedene native Aktionen auszuführen. Ein Beispiel ist, die Komponente zu fokussieren.

Siehe folgendes Beispiel mit der Komponente Select:

export function MultiSelectRef() {
  const selectRef = useRef(null);

  const setFocus = (e) => {
    selectRef?.current?.focus();
  };

  return (
    <div>
      <Button
        label="Set focus on Select"
        onClick={setFocus}></Button>
      <Select
        label="Get the focus from the button"
        ref={selectRef}>
        <SelectOption
          value={{
            id: '1',
            label: 'Option 1',
          }}
        />
        <SelectOption
          value={{
            id: '2',
            label: 'Option 2',
          }}
        />
      </Select>
    </div>
  );
}

Komponentenvalidierung​

In den Dropdown-Komponenten lässt sich der Validierungsprozess nicht durchführen, aber Sie können den Fehlerstatus und die anzuzeigenden Meldungen über die Eigenschaft stateMessages bearbeiten.

Die Logik der Statusmeldungen gilt für alle Dropdown-Komponenten. Nachfolgend ein Beispiel für MultipleSelect:

export function MultiSelectValidation() {
  const [validationMessages, setValidationMessages] = useState({});

  const onChange = useCallback((e, newValue) => {
    setValidationMessages({});

    if (newValue && newValue.length < 2) {
      setValidationMessages({
        error: ['Select at least 2 options'],
      });
    }
  }, []);

  return (
    <MultipleSelect
      label="Select at least 2 options"
      stateMessages={validationMessages}
      onChange={onChange}>
      <SelectOption
        value={{
          id: '1',
          label: 'Option 1',
        }}
      />
      <SelectOption
        value={{
          id: '2',
          label: 'Option 2',
        }}
      />
      <SelectOption
        value={{
          id: '3',
          label: 'Option 3',
        }}
      />
      <SelectOption
        value={{
          id: '4',
          label: 'Option 4',
        }}
      />
      <SelectOption
        value={{
          id: '5',
          label: 'Option 5',
        }}
      />
    </MultipleSelect>
  );
}

Erweiterte oder reduzierte Tags​

Das Standardverhalten der MultipleSelect-Komponente besteht darin, Options-Tags zu reduzieren, wenn sie nicht in eine einzige Zeile passen. Die Komponente wird zu einer Ansicht mit mehreren Zeilen erweitert, wenn Sie auf das Tag mit den zusammengeführten Optionen klicken. Dieses Verhalten wird über die Eigenschaft tagsAlwaysExpanded gesteuert, die standardmäßig auf false festgelegt ist.

export function MultiSelectAlwaysExpandedFalse() {
  return (
    <div>
      <MultipleSelect
        label="Select options"
        initialValue={[
          { id: '1', label: 'Option 1' },
          { id: '2', label: 'Option 2' },
          { id: '3', label: 'Option 3' },
          { id: '4', label: 'Option 4' },
          { id: '5', label: 'Option 5' },
          { id: '6', label: 'Option 6' },
          { id: '7', label: 'Option 7' },
          { id: '8', label: 'Option 8' },
        ]}>
        <SelectOption
          value={{
            id: '1',
            label: 'Option 1',
          }}
        />
        <SelectOption
          value={{
            id: '2',
            label: 'Option 2',
          }}
        />
        <SelectOption
          value={{
            id: '3',
            label: 'Option 3',
          }}
        />
        <SelectOption
          value={{
            id: '4',
            label: 'Option 4',
          }}
        />
        <SelectOption
          value={{
            id: '5',
            label: 'Option 5',
          }}
        />
        <SelectOption
          value={{
            id: '6',
            label: 'Option 6',
          }}
        />
        <SelectOption
          value={{
            id: '7',
            label: 'Option 7',
          }}
        />
        <SelectOption
          value={{
            id: '8',
            label: 'Option 8',
          }}
        />
      </MultipleSelect>
    </div>
  );
}

Um alle Options-Tags dauerhaft in einer erweiterten Ansicht anzuzeigen, legen Sie die Eigenschaft tagsAlwaysExpanded auf true fest.

export function MultiSelectAlwaysExpanded() {
  return (
    <div>
      <MultipleSelect
        label="Select options"
        tagsAlwaysExpanded={true}
        initialValue={[
          { id: '1', label: 'Option 1' },
          { id: '2', label: 'Option 2' },
          { id: '3', label: 'Option 3' },
          { id: '4', label: 'Option 4' },
          { id: '5', label: 'Option 5' },
          { id: '6', label: 'Option 6' },
          { id: '7', label: 'Option 7' },
          { id: '8', label: 'Option 8' },
        ]}>
        <SelectOption
          value={{
            id: '1',
            label: 'Option 1',
          }}
        />
        <SelectOption
          value={{
            id: '2',
            label: 'Option 2',
          }}
        />
        <SelectOption
          value={{
            id: '3',
            label: 'Option 3',
          }}
        />
        <SelectOption
          value={{
            id: '4',
            label: 'Option 4',
          }}
        />
        <SelectOption
          value={{
            id: '5',
            label: 'Option 5',
          }}
        />
        <SelectOption
          value={{
            id: '6',
            label: 'Option 6',
          }}
        />
        <SelectOption
          value={{
            id: '7',
            label: 'Option 7',
          }}
        />
        <SelectOption
          value={{
            id: '8',
            label: 'Option 8',
          }}
        />
      </MultipleSelect>
    </div>
  );
}

Löschbare Eingabe​

To enable clearing the input with a single click on the icon button, set the clearable property to true. The button appears when at least one option is selected. It allows the user to unselect the selected options at once.
export function MultiSelectClearable() {
  return (
    <MultipleSelect
      label="Select characters"
      clearable={true}>
      <SelectOption value={{ id: '1', label: 'Anakin Skywalker' }} />
      <SelectOption value={{ id: '2', label: 'Luke Skywalker' }} />
      <SelectOption value={{ id: '3', label: 'Master Yoda' }} />
      <SelectOption value={{ id: '4', label: 'Han Solo' }} />
    </MultipleSelect>
  );
}