CSS: progress

.instui-progress — Egy determinisztikus haladási sáv színes mérővel, méretekkel és egy opcionális érték címkével.

Az érték címke egy külön testvér elem (.instui-progress-value), nem a sáv gyermeke.

Forrás: progress.css

Akadálymentesség

Tegyük elérhetővé a haladást role="progressbar"-n keresztül aria-valuenow, aria-valuemin és aria-valuemax-vel (vagy role="img" plusz aria-label-vel), tükrözve, hogy a progress-circle van felirattal.

Használat

@import "@pantoken/components/components.css";
@import "@pantoken/components/progress.css";

Példák

<div class="instui-progress -color-brand">
  <div class="bar"></div>
</div>

Módosítók

Módosító	Leírás
.-color-brand	Márka mérő szín.
.-color-danger	Veszély mérő szín.
.-color-info	Tájékoztató mérő szín.
.-color-inverse	Sötét hátterűek számára.
.-color-primary-inverse	Sötét (elsődleges inverz) mérő szín.
.-color-success	Sikeres mérő szín.
.-color-warning	Figyelmeztetés mérő szín.
.-meter-color-alert	Elavult — use .-color-warning.
.-meter-color-brand	Elavult — use .-color-brand.
.-meter-color-danger	Elavult — use .-color-danger.
.-meter-color-info	Elavult — use .-color-info.
.-meter-color-success	Elavult — use .-color-success.
.-meter-color-warning	Elavult — use .-color-warning.
.-size-large	Nagy. Hosszú forma alias a -size-lg.
.-size-lg	Nagy.
.-size-sm	Kicsi.
.-size-small	Kicsi. Hosszú forma alias a -size-sm.
.-size-x-small	Nagyon kicsi. Hosszú forma alias a -size-xs.
.-size-xs	Nagyon kicsi.

Részek

Rész	Leírás
.bar	A kitöltött mérő sáv.

Pszeudoelemek

Pszeudoelem	Leírás
::after	A pálya alsó szabályát a saját rétegként rajzolja meg a mérő felett, így a teljes határ és az alsó határ független marad a témák között.

Felhasznált tokenek

Token	Típus	Érték
--instui-color-background-brand	<color>	light-dark(#1D354F, #EEF4FD)LightDark
--instui-color-background-error	<color>	#E62429
--instui-color-background-info	<color>	#2B7ABC
--instui-color-background-success	<color>	#03893D
--instui-color-background-warning	<color>	#CF4A00
--instui-component-progress-bar-border-color	<color>	light-dark(#1D354F, #EEF4FD)LightDark
--instui-component-progress-bar-border-color-inverse	<color>	light-dark(#ffffff, #6A7883)LightDark
--instui-component-progress-bar-border-radius	<length>	0.5rem
--instui-component-progress-bar-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-progress-bar-font-weight	<integer>	400
--instui-component-progress-bar-large-height	<length>	2rem
--instui-component-progress-bar-line-height	<percentage>	125%
--instui-component-progress-bar-medium-height	<length>	1.5rem
--instui-component-progress-bar-medium-value-font-size	<length>	1rem
--instui-component-progress-bar-meter-color-brand-inverse	<color>	light-dark(#ffffff, #10141A)LightDark
--instui-component-progress-bar-small-height	<length>	1rem
--instui-component-progress-bar-text-color	<color>	light-dark(#576773, #AAB0B5)LightDark
--instui-component-progress-bar-text-color-inverse	<color>	light-dark(#ffffff, #1C222B)LightDark
--instui-component-progress-bar-track-bottom-border-color	<color>	#00000000
--instui-component-progress-bar-track-bottom-border-color-inverse	<color>	#00000000
--instui-component-progress-bar-track-bottom-border-width	<length>	0.0625rem
--instui-component-progress-bar-track-color	<color>	#00000000
--instui-component-progress-bar-track-color-inverse	<color>	#00000000
--instui-component-progress-bar-value-padding	<length>	0.5rem
--instui-component-progress-bar-x-small-height	<length>	0.5rem

Böngészőtámogatás

• A mérő rész szabályait a @scope at-rule-lal hatóköri; böngészők @scope támogatás nélkül figyelmen kívül hagyják ezeket a hatóköri szabályokat.

Kapcsolódó

• progress-circle — Az ugyanazon determinisztikus haladás kör alakú formája.