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.
Boční navigační panel
Boční navigační panel v mdui se může vysouvat z levé nebo pravé strany stránky a stránka může mít více bočních navigačních panelů.
Boční navigační panel se chová odlišně na telefonech, tabletech a stolních zařízeních. Změnou šířky prohlížeče můžete na této stránce sledovat změny levého bočního navigačního panelu:
- Výška
- Na telefonech a tabletech je výška bočního navigačního panelu vždy 100%.
- Na stolních zařízeních boční navigační panel ve výchozím nastavení nepřekrývá lištu aplikace a je od horního okraje stránky vzdálen o výšku lišty aplikace. Přidáním třídy
.mdui-drawer-full-heightlze bočnímu navigačnímu panelu zajistit výšku 100 %. V takovém případě může překrývat lištu aplikace. Na lištu aplikace můžete přidat třídu.mdui-appbar-inset, aby ji boční navigační panel nepřekrýval.
- Barva pozadí a stín
- Na telefonech a tabletech má boční navigační panel ve výchozím nastavení bílé pozadí a stín.
- Na stolních zařízeních má boční navigační panel ve výchozím nastavení průhledné pozadí bez stínu. Přidáním třídy
.mdui-color-[color]můžete nastavit barvu pozadí bočního navigačního panelu a přidat stín.
- Stav zobrazení
- Na telefonech a tabletech je boční navigační panel ve výchozím nastavení skrytý.
- Na stolních zařízeních je boční navigační panel ve výchozím nastavení viditelný.
- Přidáním třídy
.mdui-drawer-openbude boční navigační panel ve výchozím nastavení viditelný na všech zařízeních; přidáním třídy.mdui-drawer-closebude boční navigační panel ve výchozím nastavení skrytý na všech zařízeních.
- Překrytí (overlay)
- Na telefonech a tabletech se překrytí (overlay) vždy zobrazí při otevření bočního navigačního panelu.
- Na stolních zařízeních se při otevření bočního navigačního panelu ve výchozím nastavení nezobrazuje překrytí (overlay). Nastavením parametru
overlaynatruese při otevření bočního navigačního panelu překrytí zobrazí. Pokud je překrytí zapnuté, měli byste přidat třídu.mdui-drawer-close, aby byl boční navigační panel ve výchozím nastavení skrytý.
Způsob volání
- (Pokud je komponenta dynamicky generována, musíte zavolat
mdui.mutation()pro inicializaci) - Volání přes JavaScript
Související čtení
Designové zásady Material Design: Vzory - Boční navigační panel
Způsob volání
Struktura HTML
<!-- Třída mdui-drawer-body-left přidá padding-left do body. Tuto třídu musíte přidat, pokud existuje výchozí otevřený boční navigační panel na levé straně. -->
<!-- Třída mdui-drawer-body-right přidá padding-right do body. Tuto třídu musíte přidat, pokud existuje výchozí otevřený boční navigační panel na pravé straně. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">
<!-- Boční navigační panel je ve výchozím nastavení na levé straně -->
<div class="mdui-drawer">
... drawer content ...
</div>
<!-- Chcete-li umístit boční navigační panel na pravou stranu, musíte přidat třídu mdui-drawer-right. -->
<div class="mdui-drawer mdui-drawer-right">
... drawer content ...
</div>
</body>Volání přes atributy
Tímto způsobem není nutné psát kód v JavaScriptu. Stačí přidat atribut mdui-drawer="options" na prvek, který jej ovládá(například: tlačítko). Při volání přes vlastní atribut musíte přidat další parametr target pro určení řízeného bočního navigačního panelu, jeho hodnota je CSS selektor řízeného bočního navigačního panelu.
<body class="mdui-drawer-body-right">
<button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>
<div class="mdui-drawer" id="left-drawer">
... left drawer content ...
<button class="mdui-btn" mdui-drawer-close>close</button>
</div>
</body>Na prvky uvnitř bočního navigačního panelu můžete přidat některé atributy pro vázání událostí, které lze použít i při volání metodou JavaScript.
| Atribut | Popis |
|---|---|
mdui-drawer-close | Kliknutím na tento prvek se spustí událost close.mdui.drawer a boční navigační panel se zavře. |
Volání přes JavaScript
// selector je CSS selektor nebo prvek DOM bočního navigačního panelu
// options je konfigurační parametr, viz seznam parametrů níže
var inst = new mdui.Drawer(selector, options);Parametr
| Název parametru | Typ | Výchozí hodnota | Popis |
|---|---|---|---|
overlay | boolean | false | Zda se má zobrazit překrytí (overlay) při otevření bočního navigačního panelu. Tento parametr platí pouze pro střední a větší zařízení. Na velmi malých a malých zařízeních se překrytí (overlay) vždy zobrazí. |
swipe | boolean | false | Zda je povoleno gesto tažení. |
Metoda
| Název metody | Popis |
|---|---|
open | Zobrazit boční navigační panel. |
close | Skrýt boční navigační panel. |
toggle | Přepnout stav zobrazení bočního navigačního panelu. |
getState | Vrátit aktuální stav bočního navigačního panelu. Existují čtyři stavy (opening, opened, closing, closed). |
Událost
| Název události | Popis | Cíl | Parametry |
|---|---|---|---|
open.mdui.drawer | Událost bude spuštěna, když se spustí animace otevírání bočního navigačního panelu. | <div class="mdui-drawer"></div> | event._detail.inst: Instance |
opened.mdui.drawer | Událost bude spuštěna, když se animace otevírání bočního navigačního panelu dokončí. | ||
close.mdui.drawer | Událost bude spuštěna, když se spustí animace zavírání bočního navigačního panelu. | ||
closed.mdui.drawer | Událost bude spuštěna, když se animace zavírání bočního navigačního panelu dokončí. |
Seznam CSS tříd
| Název třídy | Popis |
|---|---|
.mdui-drawer | Definuje boční navigační panel. |
.mdui-drawer-right | Boční navigační panel na pravé straně stránky. |
.mdui-drawer-full-height | Nastaví výšku bočního navigačního panelu na 100 %. |
.mdui-drawer-open | Nastavit boční navigační panel na zobrazení ve výchozím nastavení. |
.mdui-drawer-close | Nastavit boční navigační panel na skrytí ve výchozím nastavení. |
.mdui-drawer-body-left | Přidat padding-left do body. |
.mdui-drawer-body-right | Přidat padding-right do body. |