near_me
Erste Schritte
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Komponenten
keyboard_arrow_downlocal_mall
Ressourcen
keyboard_arrow_downDas neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.
Liste
Menüs lassen sich in einfache Menüs und kaskadierende Menüs gliedern. Einfache Menüs eignen sich für Smartphones und Tablets, kaskadierende Menüs für Desktop-Geräte.
Verwendung
Material Design-Richtlinien: Komponenten - Menü
Einfaches Menü
Einfaches Menü mit Icons
Kaskadierendes Menü
Stil
Durch Hinzufügen des <code><li class="mdui-divider"></li></code>-Elements kann ein Divider hinzugefügt werden.
Die Position des Menüs im Verhältnis zu dem Element, das es auslöst.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">Inbox</li>
<li class="mdui-list-item mdui-ripple">Starred</li>
<li class="mdui-list-item mdui-ripple">Send mail</li>
</ul><code>top</code>: Das Menü befindet sich oberhalb des auslösenden Elements.
Beispiel
<div class="mdui-list">
<a href="#" class="mdui-list-item mdui-ripple">Inbox</a>
<a href="#" class="mdui-list-item mdui-ripple">Starred</a>
<a href="#" class="mdui-list-item mdui-ripple">Send mail</a>
</div>Durch Hinzufügen der Klasse <code>.mdui-menu-cascade</code> zum Element <code><ul class="mdui-menu"></code> wird das Menü zu einem kaskadierenden Menü für Desktop-Geräte.
<code>bottom</code>: Das Menü befindet sich unterhalb des auslösenden Elements.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
<div class="mdui-list-item-content">Inbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">send</i>
<div class="mdui-list-item-content">Outbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
<div class="mdui-list-item-content">Trash</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">error</i>
<div class="mdui-list-item-content">Spam</div>
</li>
</ul><code>center</code>: Das Menü ist vertikal im Fenster zentriert.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Inbox</div>
<i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Outbox</div>
<i class="mdui-list-item-icon mdui-icon material-icons">send</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Trash</div>
<i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Spam</div>
<i class="mdui-list-item-icon mdui-icon material-icons">error</i>
</li>
</ul><code>auto</code>: Beurteilt die Position automatisch. Die Priorität lautet: <code>bottom</code> > <code>top</code> > <code>center</code>.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
<div class="mdui-list-item-content">Inbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">send</i>
<div class="mdui-list-item-content">Outbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon"></i>
<div class="mdui-list-item-content">Trash</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon"></i>
<div class="mdui-list-item-content">Spam</div>
</li>
</ul>Durch Hinzufügen eines weiteren Menüs innerhalb eines <code><li class="mdui-menu-item"></li></code>-Elements können Menüs verschachtelt werden. Theoretisch werden unendlich viele Verschachtelungsebenen unterstützt.
Die Ausrichtung des Menüs im Verhältnis zu dem Element, das es auslöst.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">Brendan Lim</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">me, Scott, Jennifer</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">Grace Ng</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar4.jpg"/>
</div>
<div class="mdui-list-item-content">Kerem Suer</div>
</li>
</ul><code>left</code>: Das Menü ist linksbündig mit dem auslösenden Element ausgerichtet.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Brendan Lim</div>
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">me, Scott, Jennifer</div>
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Grace Ng</div>
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Kerem Suer</div>
<div class="mdui-list-item-avatar">
<img src="avatar4.jpg"/>
</div>
</li>
</ul><code>right</code>: Das Menü ist rechtsbündig mit dem auslösenden Element ausgerichtet.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">Brendan Lim</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">me, Scott, Jennifer</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">Grace Ng</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar4.jpg"/>
</div>
<div class="mdui-list-item-content">Kerem Suer</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
</ul><code>center</code>: Das Menü ist horizontal im Fenster zentriert.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
<div class="mdui-list-item-content">Photos</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
<div class="mdui-list-item-content">Recipes</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">assignment</i>
<div class="mdui-list-item-content">Work</div>
</li>
</ul>Das Element <code><span class="mdui-menu-item-helper"></span></code> fügt einem Menüpunkt eine kurze Beschreibung hinzu.
auto: Beurteilt die Position automatisch. Die Priorität lautet: left > right > center.
Wie viel Abstand das Menü mindestens zum Fensterrand halten soll, in px.
- Art der Positionierung des Menüs
true: Das Menü verwendet fixed-Positionierung. Beim Scrollen der Seite bleibt das Menü an einer festen Position im Fenster und scrollt nicht mit der Bildlaufleiste mit.false: Das Menü verwendet absolute-Positionierung. Beim Scrollen der Seite scrollt das Menü mit der Seite mit.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">
<div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
<div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">
<div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
<div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
</div>
</li>
</ul>Das Element <code><span class="mdui-menu-item-more"></span></code> fügt einem Menüpunkt einen nach rechts weisenden Pfeil hinzu, der bei Menüpunkten mit Untermenüs verwendet wird.
Gibt an, ob das Menü das auslösende Element überdeckt.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">Inbox</li>
<li class="mdui-list-item mdui-ripple">Starred</li>
<li class="mdui-divider"></li>
<li class="mdui-list-item mdui-ripple">All mail</li>
<li class="mdui-list-item mdui-ripple">Trash</li>
</ul><code>true</code>: Das Menü überdeckt das auslösende Element.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Brunch this weekend?</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Summer BBQ</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Oui oui</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
</div>
</div>
</li>
</ul>Bei dieser Methode ist kein JavaScript-Code erforderlich. Fügen Sie einfach das Attribut <code>mdui-menu="<a href="#option">options</a>"</code> zu einem steuernden Element <small>(z. B. einem Button)</small> hinzu. Bei Verwendung benutzerdefinierter Attribute ist ein zusätzlicher Parameter <code>target</code> erforderlich, um das zu steuernde Menü anzugeben. Sein Wert ist der CSS-Selektor des zu steuernden Menüs.
<code>false</code>: Das Menü überdeckt das auslösende Element nicht.
Beispiel
<ul class="mdui-list">
<li class="mdui-subheader">Mail</li>
<li class="mdui-list-item mdui-ripple">Inbox</li>
<li class="mdui-list-item mdui-ripple">Sent</li>
<li class="mdui-subheader">Work</li>
<li class="mdui-list-item mdui-ripple">Family</li>
<li class="mdui-list-item mdui-ripple">Friends</li>
</ul><code>auto</code>: Einfache Menüs überdecken das auslösende Element. Kaskadierende Menüs überdecken das auslösende Element nicht.
Beispiel
<ul class="mdui-list">
<li class="mdui-subheader-inset">Friends</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">Brendan Lim</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">me, Scott, Jennifer</div>
</li>
<li class="mdui-subheader-inset">Family</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">Grace Ng</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar4.jpg"/>
</div>
<div class="mdui-list-item-content">Kerem Suer</div>
</li>
</ul><strong>Hinweis</strong>: Damit das Menü korrekt positioniert werden kann, müssen sich das Menü und das Element, das das Menü auslöst, auf derselben Ebene unter demselben Elternelement befinden.
Die Art und Weise, wie das Untermenü ausgelöst wird.
Beispiel
<ul class="mdui-list mdui-list-dense">
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
<div class="mdui-list-item-content">Inbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">send</i>
<div class="mdui-list-item-content">Outbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
<div class="mdui-list-item-content">Trash</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">error</i>
<div class="mdui-list-item-content">Spam</div>
</li>
</ul><code>click</code>: Das Untermenü wird beim Klicken ausgelöst.
Beispiel
<ul class="mdui-list mdui-list-dense">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Brunch this weekend?</div>
<div class="mdui-list-item-text mdui-list-item-two-line">
<span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood doing errands this weekend. Do you want ...
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Summer BBQ</div>
<div class="mdui-list-item-text mdui-list-item-two-line">
<span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could come, but I'm out of town this weekend.
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Oui oui</div>
<div class="mdui-list-item-text mdui-list-item-two-line">
<span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris recommendations? Have you ever been?
</div>
</div>
</li>
</ul>Instanziierung der Komponente:
<code>hover</code>: Das Untermenü wird beim Hovern mit der Maus ausgelöst.
Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-list-item-active mdui-ripple">Inbox</li>
<li class="mdui-list-item mdui-ripple">Starred</li>
<li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-list-item-active mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Brunch this weekend?</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Summer BBQ</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Oui oui</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
</div>
</div>
</li>
</ul>CSS-Klassenliste
| Klassenname | Beschreibung |
|---|---|
.mdui-list | Auslöseverzögerung des Untermenüs (in Millisekunden), dieser Parameter ist nur wirksam, wenn subMenuTrigger: hover ist. |
.mdui-list-dense | Öffnet das Menü. |
.mdui-list-item | Schließt das Menü. |
.mdui-list-item-active | Schaltet den Öffnungszustand des Menüs um. |
.mdui-list-item-icon | Das Ereignis wird ausgelöst, wenn das Menü mit der Öffnungsanimation beginnt. |
.mdui-list-item-avatar | <code>event._detail.inst</code>: Instanz |
.mdui-list-item-content | Das Ereignis wird ausgelöst, wenn das Menü die Öffnungsanimation beendet. |
.mdui-list-item-title | Das Ereignis wird ausgelöst, wenn das Menü mit der Schließanimation beginnt. |
.mdui-list-item-text | Das Ereignis wird ausgelöst, wenn das Menü die Schließanimation beendet. |
.mdui-list-item-one-line | Definiert eine Menü-Komponente. |
.mdui-list-item-two-line | Definiert kaskadierende Menüs. |
.mdui-list-item-three-line | Definiert Menüpunkte. |
anchorSelector stellt den CSS-Selektor oder das DOM-Element des Elements dar, das das Menü auslöst
menuSelector stellt den CSS-Selektor oder das DOM-Element des Menüs dar
Beispiel
<ul class="mdui-list">
<li class="mdui-subheader-inset">Folders</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Photos</div>
<div class="mdui-list-item-text">Jan 9, 2014</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons">info</i>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Recipes</div>
<div class="mdui-list-item-text">Jan 17, 2014</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Work</div>
<div class="mdui-list-item-text">Jan 28, 2014</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
</li>
<li class="mdui-subheader-inset">Files</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-blue mdui-text-color-white">assignment</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Photos</div>
<div class="mdui-list-item-text">Jan 9, 2014</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-yellow-600 mdui-text-color-white">assessment</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Kitchen remodel</div>
<div class="mdui-list-item-text">Jan 10, 2014</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
</li>
</ul>Beispiel
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">phone</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">(650) 555-1234</div>
<div class="mdui-list-item-text">Mobile</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon"></i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">(323) 555-6789</div>
<div class="mdui-list-item-text">Work</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
<li class="mdui-divider"></li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">email</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">[email protected]</div>
<div class="mdui-list-item-text">Personal</div>
</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon"></i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">[email protected]</div>
<div class="mdui-list-item-text">Work</div>
</div>
</li>
</ul>