menuMDUIDocs
color_lens
Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Bottom Navigation

Nach dem Hinzufügen des Ripple-Effekts entsteht beim Klicken auf das Element ein nach außen diffundierender Wasserwellen-Effekt.

Verwendung

Fügen Sie einfach die Klasse <code>.mdui-ripple</code> hinzu, damit er wirksam wird.

Verwandte Themen

Material Design-Richtlinien: Animationen - Animationsgestaltung - Radiales Feedback

Stil

Verwendung

Ripple-Effekt hinzufügen

Farbname der Primärfarbe

codeplay_arrow
Beispiel
<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
    <label>Recents</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
    <label>Favorites</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
    <label>Nearby</label>
  </a>
</div>

Ripple-Effekt hinzufügen

codeplay_arrow
Beispiel
<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
  </a>
</div>

Ripple-Farbe festlegen

codeplay_arrow
Beispiel
<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">Recents</a>
  <a href="javascript:;" class="mdui-ripple">Favorites</a>
  <a href="javascript:;" class="mdui-ripple">Nearby</a>
</div>

Fügen Sie einfach die Klasse <code>.mdui-ripple</code> zum Element hinzu, und beim Klicken auf das Element entsteht ein Ripple-Effekt.

Ripple-Farbe festlegen

Durch Hinzufügen der Klasse <code>.mdui-video-fluid</code> zum <code>video</code>-Tag passt sich das Video automatisch der Breite des Elternelements an.

codeplay_arrow
Beispiel
<div class="mdui-bottom-nav mdui-bottom-nav-text-auto">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

Wenn Sie den Ripple-Effekt auf Tags wie <code>img</code> oder <code>input</code> verwenden möchten, die keine Kindelemente enthalten können, müssen Sie <code>.mdui-ripple</code> zum Elternelement hinzufügen.

Responsives Bild

codeplay_arrow
Beispiel
<div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-brown">
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

Standardmäßig ist der Ripple dunkel. Wenn eine Hintergrundfarbe über <code>.mdui-color-[color]</code> festgelegt wurde oder sich die Seite in einem dunklen Design befindet, ist der Ripple standardmäßig weiß.

Abgerundetes Bild

Kreisförmiges Bild

Die Ripple-Farbe kann durch Hinzufügen der Klasse <code>.mdui-ripple-[color]</code> festgelegt werden.

Responsives eingebettetes Video

Responsives HTML5-Video
  • Klicken auf dieses Element löst das Ereignis <code>cancel.mdui.dialog</code> aus.
  • Klicken auf dieses Element löst das Ereignis confirm.mdui.dialog aus.
<body class="mdui-bottom-nav-fixed">
  <div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
    ......
  </div>
</body>
Ausführen

Ereignis

EreignisnameZielBeschreibungParameter
change.mdui.bottomNav<div class="mdui-bottom-nav"></div>Komponente instanziieren:selector ist der CSS-Selektor, das DOM-Element oder der HTML-String des Dialogs.

CSS-Klassenliste

KlassennameBeschreibung
.mdui-bottom-navoptions sind die Konfigurationsparameter, siehe die Parameterliste unten.
.mdui-bottom-nav-activeOb beim Öffnen des Dialogs eine Maske (Overlay) angezeigt werden soll.
.mdui-bottom-nav-text-autoOb beim Öffnen des Dialogs ein URL-Hash hinzugefügt werden soll. Wenn true, kann der Dialog über die Zurück-Schaltfläche des Browsers oder die Zurück-Taste bei Android geschlossen werden.
.mdui-bottom-nav-fixedOb der Dialog modal sein soll. Bei false wird der Dialog geschlossen, wenn außerhalb des Dialogs geklickt wird, andernfalls nicht.
.mdui-bottom-nav-scroll-hideOb der Dialog durch Drücken der Esc-Taste geschlossen werden soll.
arrow_backPrevious
Navigation Drawer
arrow_forwardNext
Card