Grille réactive
mdui fournit un système de grille réactif en 12 colonnes, conçu pour les appareils mobiles d’abord.
Lecture associée
Spécifications Material Design : Layout - Interface réactive
Conteneur de layout
mdui nécessite de placer le contenu de la page et le système de grille dans un conteneur .mdui-container. Nous fournissons deux classes pour cela.
La classe .mdui-container occupe 92 % à 96 % de la largeur de l’écran, avec une largeur maximale de 1280 px.
<body>
<div class="mdui-container">
...
</div>
</body>La classe .mdui-container-fluid occupe toujours 100 % de la largeur de l’écran.
<body>
<div class="mdui-container-fluid">
...
</div>
</body>Grille de base
La classe .mdui-row doit être placée à l’intérieur de .mdui-container ou .mdui-container-fluid pour lui donner un alignement et un remplissage appropriés.
Inclure plusieurs classes .mdui-col-xs-[1-12] dans .mdui-row ; le chiffre dans .mdui-col-xs-[1-12] indique le nombre de colonnes occupées par l’élément.
Si une ligne contient plus de 12 colonnes, les colonnes excédentaires sont disposées sur une ligne suivante.
<div class="mdui-row">
<div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>
Grille réactive
.mdui-col-xs-[1-12]S’applique à tous les appareils, tels que les téléphones et les ordinateurs..mdui-col-sm-[1-12]S’applique aux appareils de petite taille et plus, tels que les tablettes..mdui-col-md-[1-12]S’applique aux appareils de taille moyenne et plus, tels que les ordinateurs portables..mdui-col-lg-[1-12]S’applique aux grands écrans et plus, tels que les ordinateurs de bureau..mdui-col-xl-[1-12]S’applique aux très grands écrans, tels que les téléviseurs.
Le mélange de ces classes permet d’obtenir un effet réactif.
Les breakpoints réactifs sont les suivants :
| class | Plage | Gouttière |
|---|---|---|
.mdui-col-xs-[1-12] | > 0px | 16 px (8 px de chaque côté) |
.mdui-col-sm-[1-12] | > 600px | |
.mdui-col-md-[1-12] | > 1024px | |
.mdui-col-lg-[1-12] | > 1440px | |
.mdui-col-xl-[1-12] | > 1920px |
<!-- Sur les appareils très petits, la première colonne fait 100 % de largeur et la seconde 50 %. Sur les appareils de petite taille et plus, la première colonne fait 66,6 % et la seconde 33,3 %. -->
<div class="mdui-row">
<div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- Sur les appareils très petits, chaque colonne fait 50 % de largeur ; sur les appareils de petite taille et plus, chaque colonne fait 33,3 %. -->
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- Sur tous les appareils, chaque colonne fait 50 % de largeur. -->
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>Espacement entre colonnes
Une marge de 16 px est ajoutée par défaut entre les colonnes. Il suffit d’ajouter la classe .mdui-row-gapless à .mdui-row pour supprimer cet espacement.
<div class="mdui-row mdui-row-gapless">
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>Décalage des colonnes
Utilisez .mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12] et .mdui-col-offset-xl-[1-12] pour décaler les colonnes vers la droite ; le chiffre dans le nom de la classe indique le nombre de colonnes de décalage.
<div class="mdui-row">
<div class="mdui-col-md-4">.mdui-col-md-4</div>
<div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>Colonnes imbriquées
Les colonnes peuvent être imbriquées en ajoutant de nouveaux éléments .mdui-row et .mdui-col-[*] à l’intérieur de colonnes existantes. Les colonnes contenues dans une ligne imbriquée ne peuvent pas dépasser 12.
<div class="mdui-row">
<div class="mdui-col-xs-9">
Level 1: .col-xs-9
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
<div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
</div>
</div>
</div>Colonnes égales
Inclure plusieurs éléments avec la classe .mdui-col dans .mdui-row-xs-[1-12] ; ces éléments seront répartis de manière égale. Par exemple, chaque élément .mdui-col dans .mdui-row-xs-5 occupe 20 % de la largeur.
<div class="mdui-row-xs-5">
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
</div>Le mélange de .mdui-row-xs-[1-12], .mdui-row-sm-[1-12], .mdui-row-md-[1-12], .mdui-row-lg-[1-12] et .mdui-row-xl-[1-12] permet de créer des layouts réactifs.
Classes CSS
| Nom de classe | Description |
|---|---|
.mdui-container | Conteneur de layout avec largeur limitée |
.mdui-container-fluid | Conteneur de layout sur 100 % de largeur |
.mdui-row | Définir une ligne |
.mdui-col-[xs|sm|md|lg|xl]-[1-12] | Définir une colonne |
.mdui-row-gapless | Supprimer l’espacement entre les colonnes |
.mdui-col-offset-[xs|sm|md|lg|xl]-[1-12] | Décalage des colonnes |
.mdui-row-[xs|sm|md|lg|xl]-[1-12] | Colonnes égales |