near_me
Rozpoczęcie
keyboard_arrow_downlayers
Styl
keyboard_arrow_downwidgets
Komponenty
keyboard_arrow_downlocal_mall
Zasoby
keyboard_arrow_downNowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.
Pasek narzędzi
Pasek narzędzi to zestaw komponentów ułożonych w poziomie, który może zawierać takie elementy jak tekst, linki, przyciski, przyciski z ikonami itd.
Sposób użycia
Komponent paska narzędzi napisany jest w czystym CSS; wystarczy napisać kod HTML, aby zaczął działać.
Kolory
Domyślnie tło jest przezroczyste, dodanie klasy .mdui-color-[color] pozwala ustawić kolor tła.
Styl
Podstawowe style
W pasku narzędzi można umieścić:
- Tekst:
<span>Tytuł</span> - Linki:
<a href="#">Link</a> - Przyciski:
<a href="#" class="mdui-btn">przycisk</a> - Przyciski z ikonami:
<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a> - Ikony:
<i class="mdui-icon material-icons">menu</i>
Dodanie <div class="mdui-toolbar-spacer"></div> wypchnie zawartość po obu stronach tego elementu na boki.
Przykład
<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>Przykład
<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>