Menüs
Menüs zeigen eine Liste von Auswahlmöglichkeiten auf temporären Oberflächen an.
A Menu displays a list of choices on a temporary surface. It appears when the user interacts with a button, or other control.
Einfaches Menü
Standardmäßig werden einfache Menüs über dem Ankerelement geöffnet (diese Option kann über Eigenschaften geändert werden). Wenn Sie sich nahe an einem Bildschirmrand befinden, richten sich einfache Menüs vertikal neu aus, um sicherzustellen, dass alle Menüelemente vollständig sichtbar sind.
Durch die Auswahl einer Option wird die Option sofort übernommen und das Menü geschlossen.
Begriffserklärung: Im Gegensatz zu einfachen Menüs können einfache Dialogfelder zusätzliche Details in Bezug auf die für ein Listenelement verfügbaren Optionen enthalten oder Navigations- oder orthogonale Aktionen in Bezug auf die primäre Aufgabe bereitstellen. Obwohl sie den gleichen Inhalt anzeigen können, werden einfache Menüs gegenüber einfachen Dialogen bevorzugt, da einfache Menüs den aktuellen Kontext des Benutzers weniger stören.
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
Ausgewählte Menüs
Bei der Elementauswahl versuchen einfache Menüs beim Öffnen, das aktuell ausgewählte Menüelement mit dem Ankerelement vertikal auszurichten, und der ursprüngliche Fokus wird auf das ausgewählte Menüelement gesetzt. Das aktuell ausgewählte Menüelement wird mit der Eigenschaft selected
(von ListItem) festgelegt. Um ein ausgewähltes Menüelement zu verwenden, ohne den anfänglichen Fokus oder die vertikale Positionierung des Menüs zu beeinflussen, setzen Sie die Eigenschaft variant
auf menu
.
MenuList-Zusammensetzung
Die Komponente Menü
verwendet intern die Komponente Popover
. Möglicherweise möchten Sie jedoch eine andere Positionierungsstrategie verwenden oder den Bildlauf nicht blockieren. Um diese Anforderungen zu erfüllen, stellen wir eine MenuList
Komponente bereit, die Sie zusammen mit Popper
erstellen können.
Die Hauptaufgabe der MenuList
Komponente besteht darin, den Fokus festzulegen.
Menüs anpassen
Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der Überschreibungsdokumentationsseite.
The MenuItem
is a wrapper around ListItem
with some additional styles. You can use the same list composition features with the MenuItem
component:
🎨 Wenn Sie nach Inspiration suchen, sehen sie sich MUI Treasury's Anpassungs-Beispiele an.
Maximale-Höhe Menüs
Wenn die Höhe eines Menüs die Anzeige aller Menüelemente verhindert, kann das Menü intern gescrollt werden.
Einschränkungen
Es gibt einen FlexBox bug, das verhindert, dass text-overflow: ellipsis
in einem FlexBox Layout funktioniert. Sie können die Komponente Typography
mit noWrap
benutzen, um dieses Problem zu umgehen:
<Button aria-controls="fade-menu" aria-haspopup="true" onClick={handleClick}>
Open with fade transition
</Button>
<Menu
id="fade-menu"
anchorEl={anchorEl}
keepMounted
open={open}
onClose={handleClose}
TransitionComponent={Fade}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.
Ergänzende Projekte
Für fortgeschrittenere Anwendungsfälle können Ihnen folgende Projekte helfen:
PopupState-Helfer
Es gibt ein Drittanbieter-Paket material-ui-popup-state
, das sich in den meisten Fällen um Popper Status kümmern kann.
<PopupState variant="popover" popupId="demo-popup-menu">
{(popupState) => (
<React.Fragment>
<Button variant="contained" color="primary" {...bindTrigger(popupState)}>
Open Menu
</Button>
<Menu {...bindMenu(popupState)}>
<MenuItem onClick={popupState.close}>Cake</MenuItem>
<MenuItem onClick={popupState.close}>Death</MenuItem>
</Menu>
</React.Fragment>
)}
</PopupState>