menuMDUIDocs
color_lens
mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Utilitaires

Marges

Cette série de classes permet d'ajouter des propriétés margin et padding à un élément, avec des valeurs par défaut multiples de 8px.

Le format des classes est : .mdui-{propriété}-{direction}-{taille}

Propriété :

  • m - définit margin
  • p - définit padding

Direction :

  • t - définit margin-top ou padding-top
  • b - définit margin-bottom ou padding-bottom
  • l - définit margin-left ou padding-left
  • r - définit margin-right ou padding-right
  • x - définit margin-left margin-right ou padding-left padding-right
  • y - définit margin-top margin-bottom ou padding-top padding-bottom
  • a - définit margin ou padding

Taille :

  • 0 - 0px
  • 1 - 8px
  • 2 - 16px
  • 3 - 24px
  • 4 - 32px
  • 5 - 40px
.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

Flottant rapide

  • .mdui-float-left fait flotter l'élément vers la gauche
  • .mdui-float-right fait flotter l'élément vers la droite
code
Exemple
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

Centrage horizontal

Ajoutez la classe .mdui-center à n'importe quel élément pour le centrer horizontalement.

code
Exemple
<div class="mdui-center" style="width: 200px">mdui-center</div>

Centrage vertical

Ajoutez la classe .mdui-valign à un élément pour centrer verticalement les éléments enfants de cet élément.

code
Exemple
<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

Alignement horizontal du texte

  • .mdui-text-left Aligner le texte à gauche.
  • .mdui-text-center Centrer le texte.
  • .mdui-text-right Aligner le texte à droite.
code
Exemple
<div class="mdui-text-left">This should be left aligned</div>
<div class="mdui-text-center">This should be center aligned</div>
<div class="mdui-text-right">This should be right aligned</div>

Transformation de la casse du texte

  • .mdui-text-lowercase Mettre le texte en minuscules.
  • .mdui-text-uppercase Mettre le texte en majuscules.
  • .mdui-text-capitalize Mettre la première lettre de chaque mot en majuscule.
code
Exemple
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

Troncature automatique du texte

.mdui-text-truncate Lorsque la longueur du texte dépasse la limite, il peut être tronqué automatiquement et remplacé par des points de suspension.

code
Exemple
<p class="mdui-text-truncate" style="max-width: 200px;">Ceci est un texte extrêmement, extrêmement, extrêmement, extrêmement, extrêmement, extrêmement, extrêmement, extrêmement, extrêmement long.</p>

Effacer les flottants

Ajoutez la classe .mdui-clearfix à l'élément parent pour effacer les flottants.

code
Exemple
<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

Masquer le contenu

  • .mdui-hidden masque un élément, comme si l'on ajoutait la règle CSS display: none;. L'élément masqué n'occupe plus d'espace dans la page.
  • .mdui-invisible rend un élément invisible mais continue à occuper de l'espace dans la page, comme si l'on ajoutait la règle CSS visibility: hidden;.

Utilitaires responsives

Ces utilitaires utilisent des requêtes média pour masquer du contenu sur différents appareils. Ces utilitaires incluent :

  • .mdui-hidden-* : masque sur un appareil d'une largeur donnée.
  • .mdui-hidden-*-up : masque sur un appareil d'une largeur donnée et au-delà.
  • .mdui-hidden-*-down : masque sur un appareil d'une largeur donnée et en dessous.
Très petits écrans
<600px		Petits écrans
>=600px - <1024px		Écrans moyens
>=1024px - <1440px		Grands écrans
>=1440px - <1920px		Très grands écrans
>=1920px
.mdui-hidden-xsVisibleVisibleVisibleVisible
.mdui-hidden-smVisibleVisibleVisibleVisible
.mdui-hidden-mdVisibleVisibleVisibleVisible
.mdui-hidden-lgVisibleVisibleVisibleVisible
.mdui-hidden-xlVisibleVisibleVisibleVisible
.mdui-hidden-xs-downVisibleVisibleVisibleVisible
.mdui-hidden-sm-downVisibleVisibleVisible
.mdui-hidden-md-downVisibleVisible
.mdui-hidden-lg-downVisible
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-upVisible
.mdui-hidden-md-upVisibleVisible
.mdui-hidden-lg-upVisibleVisibleVisible
.mdui-hidden-xl-upVisibleVisibleVisibleVisible

Redimensionnez la fenêtre du navigateur ou consultez l'exemple sur différents appareils. La zone sombre indique ce qui est visible dans la fenêtre du navigateur actuelle.

✔ .mdui-hidden-xs
✔ .mdui-hidden-sm
✔ .mdui-hidden-md
✔ .mdui-hidden-lg
✔ .mdui-hidden-xl
✔ .mdui-hidden-xs-down
✔ .mdui-hidden-sm-down
✔ .mdui-hidden-md-down
✔ .mdui-hidden-lg-down
✔ .mdui-hidden-xl-down
✔ .mdui-hidden-xs-up
✔ .mdui-hidden-sm-up
✔ .mdui-hidden-md-up
✔ .mdui-hidden-lg-up
✔ .mdui-hidden-xl-up
arrow_backPrevious
Médias
arrow_forwardNext
Ombres