LinearProgressLiniowy wskaźnik postępu

Liniowy wskaźnik postępu pokazuje postęp zadania, takiego jak ładowanie danych lub wysyłanie formularza.

Sposób użycia

Zaimportuj komponent:

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

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

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

Przykłady

Postęp

Liniowy wskaźnik postępu domyślnie ma nieokreślony postęp. Możesz ustawić bieżący postęp za pomocą atrybutu value. Domyślna maksymalna wartość postępu to 1.

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

Źródło

Maksymalną wartość postępu można ustawić za pomocą atrybutu max.

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

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`max`	`max`	`number`	`1`
Maksymalna wartość wskaźnika postępu. Domyślnie `1`
`value`	`value`	`number`	-
Bieżąca wartość wskaźnika postępu. Jeśli wartość nie jest określona, znajduje się w stanie nieokreślonym

CSS Parts

Nazwa
`indicator`
Część wskaźnika

Właściwości niestandardowe CSS

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych

Poprzedni rozdział

Layout Układ

Następny rozdział

List Lista