near_me
Začínáme
keyboard_arrow_downlayers
Styl
keyboard_arrow_downwidgets
Komponenty
keyboard_arrow_downlocal_mall
Zdroje
keyboard_arrow_downZcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.
Nástrojová lišta
Nástrojová lišta je sada vodorovně uspořádaných prvků, která může obsahovat text, odkazy, tlačítka, ikony a další.
Způsob volání
Komponenta nástrojové lišty je napsána v čistém CSS, takže k její funkci stačí jen HTML kód.
Barva
Ve výchozím nastavení má průhledné pozadí. Barvu pozadí lze nastavit přidáním třídy .mdui-color-[barva].
Styl
Základní styl
Do nástrojové lišty lze umístit:
- Text:
<span>Nadpis</span> - Odkaz:
<a href="#">Odkaz</a> - Tlačítko:
<a href="#" class="mdui-btn">tlačítko</a> - Tlačítko s ikonou:
<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a> - Ikona:
<i class="mdui-icon material-icons">menu</i>
Vložením prvku <div class="mdui-toolbar-spacer"></div> odtlačíte obsah po obou stranách tohoto prvku k okrajům lišty.
Příklad
<div class="mdui-toolbar">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<span class="mdui-typo-title">Title</span>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>Příklad
<div class="mdui-toolbar mdui-color-theme">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<span class="mdui-typo-title">Title</span>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>