LinearProgress

Linear Progress ist eine horizontale Anzeige, die dem Benutzer den Fortschritt einer Aufgabe zeigt, z. B. beim Laden von Daten oder beim Absenden eines Formulars.

Verwendung

Importieren Sie die Komponente nach Bedarf:

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

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

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

Beispiel:

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

Beispiele

Fortschritt festlegen

Linear Progress hat standardmäßig einen unbestimmten Fortschritt. Sie können den aktuellen Fortschritt mit dem Attribut value festlegen. Der Standardmaximalwert des Fortschritts ist 1.

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

Quellcode

Sie können den Maximalwert des Fortschritts mit dem Attribut max festlegen.

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

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`max`	`max`	`number`	`1`
Legt den Maximalwert für die Fortschrittsanzeige fest. Der Standardwert ist `1`.
`value`	`value`	`number`	-
Legt den aktuellen Wert der Fortschrittsanzeige fest. Wenn nicht angegeben, befindet sich die Fortschrittsanzeige in einem unbestimmten Zustand.

CSS Parts

Name
`indicator`
Indikator

CSS Custom Property

Name
`--shape-corner`
Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.

Vorherige Seite

Layout

Nächste Seite

List