Dropdown-Menüschaltfläche

Dropdown-Menüschaltfläche in Storybook

Verwendung

Demnächst verfügbar.

Code

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>

Importanweisung

import {
  DropdownMenuHeader,
  DropdownMenuButton,
  DropdownMenuSeparator,
} from '@jutro/components';
import { DropdownMenuLink } from '@jutro/router';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

iderforderlich

Typ

string

Beschreibung

Unique identifier for the component.

alignRight

Typ

boolean

Beschreibung

If set to true, the menu items are aligned to the right edge of the menu.

autoFocus

Typ

boolean

Beschreibung

If set to true, the first menu item gets focused after opening the dropdown menu.

buttonText

Typ

IntlMessageShape

Beschreibung

The text displayed on the button.

dropUp

Typ

boolean

Beschreibung

If set to true, the menu appears above the trigger component.

fullWidth

Typ

boolean

Beschreibung

If set to true, expands button container to parent's boundaries.

icon

Typ

string | Icon

Beschreibung

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

isOpen

Typ

boolean

Beschreibung

If set to true, the menu is currently opened.

menuClassName

Typ

string

Beschreibung

Override the class for the inner menu of the dropdown menu.

toggleButtonClassName

Typ

string

Beschreibung

Custom class name for the toggle button.

Untergeordnete Eigenschaften des Dropdown-Menüs

Dropdown menu Komponenten verwenden DropdownMenuHeader, DropdownMenuLink und DropdownMenuSeparator als untergeordnete Komponenten. Die Eigenschaften für diese Komponenten lauten wie folgt:

DropdownMenuHeader-Eigenschaften

children

Typ

React.ReactNode

Beschreibung

The component children, wrapped by the dropdown menu header component.

id

Typ

string

Beschreibung

Unique identifier for the component.

title

Typ

React.ReactNode | IntlMessageShape

Beschreibung

The element node representing the header title, in most cases it will be a plain string.

DropdownMenuLink-Eigenschaften

activeClassName

Typ

string

Beschreibung

The class to give the link when it is active.

children

Typ

string

Beschreibung

The children elements to render inside of the DropdownMenuLink.

className

Typ

string

Beschreibung

CSS class name for this component.

disabled

Typ

boolean

Beschreibung

If set to true, this link is disabled.

focused

Typ

string

Beschreibung

If set to true, the link is considered as the currently active one.

href

Typ

IntlMessageShape

Beschreibung

Used to specify an external link.

icon

Typ

string | Icon

Beschreibung

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

iconClassName

Typ

string

Beschreibung

Additional class names for the icon.

iconPosition

Typ

'left' | 'right'

Beschreibung

Where the icon is placed relative to the text.

id

Typ

string

Beschreibung

Unique identifier for the component.

onClick

Typ

function (React.MouseEvent<HTMLElement>)

Beschreibung

On click event handler.

rel

Typ

string

Beschreibung

Specifies the relationship between the current and an external document, like the HTML rel attribute.

target

Typ

string

Beschreibung

Specifies where to open the external link, like the HTML target attribute.

to

Typ

IntlMessageShape | {pathname?, hash?}

hash

Typ

IntlMessageShape

Beschreibung

Hash to put in the URL.

pathname

Typ

IntlMessageShape

Beschreibung

Link path.

Beschreibung

Used to specify an internal link.

visible

Typ

boolean

Beschreibung

If set to true, this link is visible.

DropdownMenuSeparator-Eigenschaften

className

Typ

string

Beschreibung

CSS class name for this component.

id

Typ

string

Beschreibung

Unique identifier for the component.

Hooks

Für Dropdown menu sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für Dropdown menu.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Verwendung der abgekündigten Schaltflächenkomponente

Als Schaltflächenkomponente in der Dropdown-Menüschaltfläche wird die abgekündigte Schaltflächenkomponente aus Versionen vor 10.0 verwendet. Daher kann es sein, dass sie anders aussieht und sich anders verhält als andere Schaltflächen in der Anwendung. Informationen zu dieser Legacy-Komponente finden Sie in Storybook.

Um eine einheitliche Darstellung zu gewährleisten, empfiehlt es sich, eine benutzerdefinierte Version zu erstellen, indem Sie die stabile Schaltflächenkomponente mit einem Dropdown-Menü kombinieren.

Beispiele

Die Komponente DropdownMenuButton rendert eine Schaltfläche. Wenn der Benutzer auf die Schaltfläche klickt, wird die Struktur eines der folgenden Elemente gerendert:

• DropdownMenuLink
• DropdownMenuSeparator
• DropdownMenuHeader

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Dropdown-Menüs und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Beispiel für ein einfaches Dropdown-Menü

Im folgenden Beispiel wird veranschaulicht, wie eine einfache DropdownMenuButton-Komponente erstellt wird.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>

Beispiel für Kopfzeilen und Trennzeichen

Mit Kopfzeilen und Trennzeichen können Sie Gruppen von Optionen trennen.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuLink>Separated menu item</DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuHeader title="Header text">
    <DropdownMenuLink>First header menu item</DropdownMenuLink>
    <DropdownMenuLink>Second header menu item</DropdownMenuLink>
  </DropdownMenuHeader>
</DropdownMenuButton>

Beispiel für ein Dropup

Sie können die Eigenschaft dropUp verwenden, um das Menü über der Schaltfläche darzustellen, wenn Sie darauf klicken.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button"
  dropUp={true}>
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>

Änderungsprotokoll

10.10.1

Für diese Komponente wurden zusätzliche Design-Token hinzugefügt.

10.9.0

• Es wurde eine neue Opt-in-Funktion eingeführt, die die automatische Ereignisveröffentlichung für die Komponente DropdownMenuButton deaktiviert. Sie können diese Funktion aktivieren, indem Sie der .env-Datei im Stammverzeichnis Ihrer Jutro-Anwendung JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true hinzufügen. Wenn diese Option aktiviert ist, veröffentlichen ältere Komponenten standardmäßig keine Ereignisse mehr. Weitere Informationen zu Ereignissen und zum Einrichten neuer Ereignisse finden Sie in der Dokumentation zu Ereignissen.

icon-Eigenschaftstyp erweitert

Der Typ der Eigenschaft icon wurde auf string | React.ComponentType erweitert.

Abkündigungen

Die Übergabe von string als Wert an die Eigenschaft icon wurde abgekündigt.