near_me
Inizia
keyboard_arrow_downlayers
Stile
keyboard_arrow_downwidgets
Componenti
keyboard_arrow_downlocal_mall
Risorse
keyboard_arrow_downÈ disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.
Navigation Drawer
I Navigation Drawer in mdui possono scorrere dai lati sinistro o destro della pagina; una pagina può avere più Navigation Drawer.
I Navigation Drawer si comportano in modo diverso su telefoni, tablet e desktop; puoi osservare i cambiamenti del Navigation Drawer sul lato sinistro di questa pagina modificando la larghezza del browser:
- Altezza
- Su telefoni e tablet, l'altezza del Navigation Drawer è sempre del 100%.
- Sui dispositivi desktop, il Navigation Drawer per impostazione predefinita non copre l'App Bar, lasciando lo spazio dell'altezza di un'App Bar dalla parte superiore della pagina. Aggiungendo la classe
.mdui-drawer-full-heightè possibile impostare l'altezza del Navigation Drawer al 100%; in questo caso, il Navigation Drawer potrebbe coprire l'App Bar. È possibile aggiungere la classe.mdui-appbar-insetall'App Bar per evitare che venga coperta dal Navigation Drawer.
- Colore di sfondo e ombreggiatura
- Su telefoni e tablet, il Navigation Drawer ha per impostazione predefinita uno sfondo bianco con ombreggiatura.
- Sui dispositivi desktop, il Navigation Drawer ha per impostazione predefinita uno sfondo trasparente senza ombreggiatura. Aggiungendo la classe
.mdui-color-[color]è possibile impostare il colore di sfondo del Navigation Drawer e aggiungere un'ombreggiatura.
- Stato di visualizzazione
- Su telefoni e tablet, il Navigation Drawer è nascosto per impostazione predefinita.
- Sui dispositivi desktop, il Navigation Drawer è visualizzato per impostazione predefinita.
- Aggiungendo la classe
.mdui-drawer-openè possibile far sì che il Navigation Drawer sia visualizzato per impostazione predefinita su tutti i dispositivi; aggiungendo la classe.mdui-drawer-closeè possibile far sì che sia nascosto per impostazione predefinita su tutti i dispositivi.
- Overlay
- Su telefoni e tablet, l'overlay viene sempre mostrato quando si apre il Navigation Drawer.
- Sui dispositivi desktop, l'overlay non viene mostrato per impostazione predefinita quando si apre il Navigation Drawer. Impostando il parametro
overlaysutrue, è possibile mostrare l'overlay all'apertura. Se si imposta la visualizzazione dell'overlay, si dovrebbe aggiungere la classe.mdui-drawer-closeaffinché il Navigation Drawer sia nascosto per impostazione predefinita.
Modalità d'uso
- (Se il componente è generato dinamicamente, è necessario chiamare
mdui.mutation()per l'inizializzazione) - Chiamata via JavaScript
Letture correlate
Linee guida di design Material Design: Modelli - Navigation Drawer
Modalità d'uso
Struttura HTML
<!-- La classe mdui-drawer-body-left aggiunge padding-left al body; questa classe deve essere aggiunta finché c'è un Navigation Drawer aperto per impostazione predefinita sul lato sinistro. -->
<!-- La classe mdui-drawer-body-right aggiunge padding-right al body; questa classe deve essere aggiunta finché c'è un Navigation Drawer aperto per impostazione predefinita sul lato destro. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">
<!-- Navigation Drawer predefinito sul lato sinistro -->
<div class="mdui-drawer">
... drawer content ...
</div>
<!-- Se si desidera che il Navigation Drawer sia sul lato destro, è necessario aggiungere la classe mdui-drawer-right. -->
<div class="mdui-drawer mdui-drawer-right">
... drawer content ...
</div>
</body>Chiamata via attributi
Usando questo metodo non è necessario scrivere codice JavaScript. Basta aggiungere all'elemento di controllo (ad esempio: un pulsante) l'attributo mdui-drawer="options". Quando si chiama tramite attributi personalizzati, è necessario aggiungere un parametro target aggiuntivo per specificare il Navigation Drawer controllato; il valore è il selettore CSS del Navigation Drawer controllato.
<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>Agli elementi all'interno del Navigation Drawer possono essere aggiunti alcuni attributi per vincolare eventi; questi attributi possono essere utilizzati anche quando si usa il metodo di chiamata JavaScript.
| Attributo | Descrizione |
|---|---|
mdui-drawer-close | Facendo clic su questo elemento si attiverà l'evento close.mdui.drawer e si chiuderà il Navigation Drawer. |
Chiamata via JavaScript
// Il selettore è il selettore CSS del Navigation Drawer o l'elemento DOM
// options sono i parametri di configurazione, vedi l'elenco dei parametri qui sotto
var inst = new mdui.Drawer(selector, options);Parametro
| Nome | Tipo | Predefinito | Descrizione |
|---|---|---|---|
overlay | boolean | false | Se mostrare l'overlay all'apertura del Navigation Drawer. Questo parametro è valido solo per dispositivi con schermi medi o superiori; sugli schermi ultra-piccoli e piccoli l'overlay verrà sempre mostrato. |
swipe | boolean | false | Se abilitare le gesture di scorrimento. |
Metodo
| Nome metodo | Descrizione |
|---|---|
open | Mostra il Navigation Drawer. |
close | Nasconde il Navigation Drawer. |
toggle | Alterna lo stato di visualizzazione del Navigation Drawer. |
getState | Restituisce lo stato corrente del Navigation Drawer. Include quattro stati (opening, opened, closing, closed). |
Evento
| Nome evento | Descrizione | Target | Parametri |
|---|---|---|---|
open.mdui.drawer | L'evento verrà attivato quando il Navigation Drawer inizia l'animazione di apertura. | <div class="mdui-drawer"></div> | event._detail.inst: istanza |
opened.mdui.drawer | L'evento verrà attivato quando il Navigation Drawer completa l'animazione di apertura. | ||
close.mdui.drawer | L'evento verrà attivato quando il Navigation Drawer inizia l'animazione di chiusura. | ||
closed.mdui.drawer | L'evento verrà attivato quando il Navigation Drawer completa l'animazione di chiusura. |
Elenco classi CSS
| Nome classe | Descrizione |
|---|---|
.mdui-drawer | Definisce un Navigation Drawer. |
.mdui-drawer-right | Navigation Drawer sul lato destro della pagina. |
.mdui-drawer-full-height | Rende il Navigation Drawer ad altezza del 100%. |
.mdui-drawer-open | Rende il Navigation Drawer visualizzato per impostazione predefinita. |
.mdui-drawer-close | Rende il Navigation Drawer nascosto per impostazione predefinita. |
.mdui-drawer-body-left | Aggiunge padding-left al body. |
.mdui-drawer-body-right | Aggiunge padding-right al body. |