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

Utilitaires

Le composant slider de mdui est implémenté avec le champ de saisie HTML5 <code>&lt;input type=&quot;range&quot; /&gt;</code>.

Slider continu :

Valeur par défaut de 0

Valeur par défaut différente de 0

  • Slider discret :
  • Si votre composant slider est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.

Si vous modifiez dynamiquement la valeur d’un slider, vous devez appeler la méthode <code>mdui.updateSliders()</code> pour réinitialiser le composant. Cette méthode accepte un paramètre qui peut être un sélecteur CSS contenant la classe <code>.mdui-slider</code>, un élément DOM ou un tableau d’éléments DOM, afin de spécifier les sliders à réinitialiser. Si aucun argument n’est fourni, tous les sliders de la page sont réinitialisés.

  • Définir un composant slider.
  • Définir un slider discret.
  • Définir le composant carte.
  • Définir l’en-tête de la carte.
  • Définir l’avatar de l’en-tête de la carte.
  • Définir le titre de l’en-tête de la carte.
  • Définir le sous-titre de l’en-tête de la carte.

Définir l’élément multimédia de la carte.

  • 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;
}

Le composant slider s’initialise automatiquement après le chargement de la page. Pour les sliders générés dynamiquement, vous devez appeler <a href="/fr/docs/1/global#mutation"><code>mdui.mutation()</code></a> pour l’initialiser.

  • Définir le contenu superposé à l’élément multimédia.
  • Placer la couche superposée en haut de l’élément multimédia.
code
Exemple
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

Couleurs

Donner à la couche superposée un arrière-plan transparent.

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

Utiliser la couleur d’accentuation.

Donner à la couche superposée un arrière-plan dégradé.

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

Spécifications Material Design : composants - slider

  • .mdui-text-left Définir le menu dans le coin supérieur droit de la carte.
  • .mdui-text-center Définir la zone du titre et du sous-titre de la carte.
  • .mdui-text-right Définir le titre de la carte.
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>

Slider continu

  • .mdui-text-lowercase Définir le sous-titre de la carte.
  • .mdui-text-uppercase Définir le contenu de la carte.
  • .mdui-text-capitalize Définir la barre d’actions de la carte.
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>

Slider discret

.mdui-text-truncate Disposer la barre d’actions verticalement.

code
Exemple
<p class="mdui-text-truncate" style="max-width: 200px;">Détruire la boîte de dialogue.</p>

État désactivé

Réajuster la position de la boîte de dialogue et la hauteur de la barre de défilement. Si le contenu de la boîte de dialogue est modifié après son ouverture, cette méthode doit être appelée.

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>

Slider généré dynamiquement

  • L’événement sera déclenché lorsque l’animation d’ouverture de la boîte de dialogue commencera.
  • event._detail.inst : instance

Ajoutez l’attribut <code>disabled</code> à l’élément <code>input</code> du slider continu ou discret pour le désactiver.

L’événement sera déclenché lorsque l’animation d’ouverture de la boîte de dialogue se terminera.

  • L’événement sera déclenché lorsque l’animation de fermeture de la boîte de dialogue commencera.
  • L’événement sera déclenché lorsque l’animation de fermeture de la boîte de dialogue se terminera.
  • L’événement sera déclenché lorsque le bouton d’annulation sera pressé.
L’événement sera déclenché lorsque le bouton de confirmation sera pressé.
<600px		mdui a intégré plusieurs boîtes de dialogue prédéfinies pour les scénarios courants. Ces boîtes de dialogue prédéfinies ne sont appelées que via JavaScript et ne nécessitent pas d’écrire du code HTML.
>=600px - <1024px		Ces fonctions renvoient toutes une instance de boîte de dialogue.
>=1024px - <1440px		Ouvre une boîte de dialogue où le titre, le contenu, les boutons, etc. peuvent être personnalisés. Cette méthode est générique, et <code>mdui.alert()</code>, <code>mdui.confirm()</code> et <code>mdui.prompt()</code> sont toutes implémentées via elle.
>=1440px - <1920px		Le titre de la boîte de dialogue.
>=1920px
.mdui-hidden-xsUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-smUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-mdUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-lgUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-xlUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-xs-downUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-sm-downUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-md-downUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-lg-downUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-upUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-md-upUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-lg-upUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
.mdui-hidden-xl-upUn tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).

Indique si les boutons doivent être empilés verticalement.

✔ .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