LinearProgress

L'indicateur de progression linéaire est un indicateur horizontal utilisé pour montrer la progression d'une tâche, comme le chargement de données ou l'envoi d'un formulaire.

Utilisation

Importez le composant :

import 'mdui/components/linear-progress.js';

Importez le type TypeScript correspondant :

import type { LinearProgress } from 'mdui/components/linear-progress.js';

Exemple d'utilisation :

<mdui-linear-progress></mdui-linear-progress>

Exemples

Progression déterminée

L'indicateur de progression linéaire est par défaut en mode indéterminé. Vous pouvez définir la progression actuelle avec l'attribut value (la valeur maximale par défaut est 1).

<mdui-linear-progress value="0.5"></mdui-linear-progress>

Source

Vous pouvez définir la valeur maximale avec l'attribut max.

<mdui-linear-progress value="30" max="100"></mdui-linear-progress>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`max`	`max`	`number`	`1`
Valeur maximale du Linear Progress. La valeur par défaut est `1`.
`value`	`value`	`number`	-
Valeur actuelle du Linear Progress. Si cette valeur n'est pas spécifiée, l'état est indéterminé.

CSS Parts

Nom
`indicator`
Partie indicatrice

Propriétés CSS personnalisées

Nom
`--shape-corner`
Taille des coins arrondis du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.

Chapitre précédent

Layout

Chapitre suivant

List