Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Indikátor průběhu

Indikátor průběhu zahrnuje lineární a kruhový indikátor.

Způsob volání

Lineární indikátor je napsán v čistém CSS a stačí napsat HTML kód.

Kruhový indikátor se automaticky inicializuje po načtení stránky. U dynamicky generovaných kruhových indikátorů je potřeba zavolat mdui.mutation() pro inicializaci.

Barvy

Lineární indikátor používá primární barvu.

Kruhový indikátor používá primární nebo barevný režim.

Související čtení

Designové zásady Material Design: Komponenty - Indikátor průběhu a stav činnosti

Lineární indikátor

Neurčitý průběh

Tento indikátor se používá pro situace, kdy není známa přesná hodnota průběhu.

Příklad

<div class="mdui-progress">
  <div class="mdui-progress-indeterminate"></div>
</div>

Určitý průběh

Tento indikátor se používá pro situace, kdy je známa přesná hodnota průběhu.

Upravte hodnotu vlastnosti width prvku <div class="mdui-progress-determinate"></div> a aktualizujte tak průběh.

Příklad

<div class="mdui-progress">
  <div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>

Kruhový indikátor (Spinner)

Stačí přidat prvek <div class="mdui-spinner"></div> a vygeneruje se kruhový indikátor. Přidáním třídy .mdui-spinner-colorful se vygeneruje barevný kruhový indikátor.

Velikost kruhového indikátoru můžete upravit změnou hodnot stylů width a height u třídy .mdui-spinner, ale ujistěte se, že hodnoty width a height jsou stejné.

Jednobarevný

Příklad

<div class="mdui-spinner"></div>

Barevný

Příklad

<div class="mdui-spinner mdui-spinner-colorful"></div>

Dynamicky generovaný kruhový indikátor

Pokud je vaše komponenta kruhového indikátoru dynamicky generována, musíte pro její inicializaci zavolat mdui.mutation().

Pokud potřebujete aktualizovat existující komponentu kruhového indikátoru, musíte zavolat metodu mdui.updateSpinners(), která komponentu znovu inicializuje. Tato metoda může přijmout CSS selektor (který by měl obsahovat třídu .mdui-spinner), DOM prvek nebo pole DOM prvků jako parametr, což znamená, že budou znovu inicializovány pouze určené kruhové indikátory. Pokud není předán žádný parametr, budou znovu inicializovány všechny kruhové indikátory na stránce.

Seznam CSS tříd

Název třídy	Popis
`.mdui-progress`	Definuje lineární indikátor průběhu.
`.mdui-progress-indeterminate`	Lineární indikátor s neurčitým průběhem.
`.mdui-progress-determinate`	Lineární indikátor s určitým průběhem.
`.mdui-spinner`	Definuje kruhový indikátor průběhu.
`.mdui-spinner-colorful`	Barevný kruhový indikátor.

Nabídka

Collapse