Divider

Les séparateurs sont de fines lignes utilisées pour regrouper le contenu dans les listes et les conteneurs.

Utilisation

Importez le composant :

import 'mdui/components/divider.js';

Importez le type TypeScript correspondant :

import type { Divider } from 'mdui/components/divider.js';

Exemple d'utilisation :

<mdui-divider></mdui-divider>

Exemples

Séparateur vertical

Ajoutez l'attribut vertical pour afficher le séparateur verticalement.

<div style="height: 80px;padding: 0 20px">
  <mdui-divider vertical></mdui-divider>
</div>

Source

Retrait à gauche

Ajoutez l'attribut inset pour créer une indentation à gauche. Souvent utilisé dans les listes pour aligner le séparateur avec le texte.

Élément 1

Élément 2

<mdui-list>
  <mdui-list-item>Élément 1</mdui-list-item>
  <mdui-divider inset></mdui-divider>
  <mdui-list-item>Élément 2</mdui-list-item>
</mdui-list>

Source

Retrait des deux côtés

Ajoutez l'attribut middle pour créer une indentation des deux côtés.

Élément 1

Élément 2

<mdui-list>
  <mdui-list-item>Élément 1</mdui-list-item>
  <mdui-divider middle></mdui-divider>
  <mdui-list-item>Élément 2</mdui-list-item>
</mdui-list>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`vertical`	`vertical`	`boolean`	`false`
Si le Séparateur est vertical
`inset`	`inset`	`boolean`	`false`
Si un retrait à gauche doit être appliqué
`middle`	`middle`	`boolean`	`false`
Si un retrait à gauche et à droite doit être appliqué

Chapitre précédent

Dialog

Chapitre suivant

Dropdown