CSS: progress
.instui-progress · stable — Határozott állapotú folyamatjelző sáv színes mérősávval, méretekkel és opcionális értékcímkével.
A(z) .value a(z) .bar testvéreleme, mindkettő a gyökérelem gyermeke — leképezve azt, ahogyan a progress-circle beágyazza a saját .value részét. Az InstUI nem rendelkezik határozatlan állapottal; a(z) :indeterminate egy csak pantoken-alapú legjobb becslés (natív <progress> a(z) value attribútum nélkül), amely a(z) .bar elemet csúszó szegmensként animálja, és elrejti a(z) .value elemet, mivel nincs értelmezhető megjelenítendő szám. A(z) <meter> nem rendelkezik határozatlan állapottal, így nem érintett.
Forrás: progress.css
Akadálymentesség
Használja a natív <progress> elemet nulla alapú feladatteljesítési tartományhoz, és a(z) <meter> elemet, ha a minimum nem nulla. Adjon bármelyik elemnek akadálymentes nevet úgy, hogy beágyazza a(z) <label> elembe, vagy társít hozzá egy különálló <label> elemet a megegyező for és id értékeken keresztül.
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/progress.css";Példák
Nested label
html
<label>
Uploading Document: <progress class="instui-progress -color-brand" value="70">70%</progress>
</label>External label
html
<label for="storage-used">Storage used</label>
<meter id="storage-used" class="instui-progress -color-warning" min="20" value="40" max="60">50%</meter>Felépítés
// Variant: nested-label
text
label
.instui-progress
.bar
.value// Variant: external-label
text
label
.instui-progress
.bar
.valueflowchart TD
subgraph sg0 ["nested-label"]
n1["label"]:::cssdoc-root
n2(".instui-progress"):::cssdoc-part
n3(".bar"):::cssdoc-part
n4(".value"):::cssdoc-part
end
subgraph sg5 ["external-label"]
n6["label"]:::cssdoc-root
n7[".instui-progress"]:::cssdoc-root
n8(".bar"):::cssdoc-part
n9(".value"):::cssdoc-part
end
n2 --> n3
n2 --> n4
n1 --> n2
n7 --> n8
n7 --> n9
classDef cssdoc-root stroke-width:1px;
classDef cssdoc-part stroke-width:1px;
classDef cssdoc-slot stroke-width:1px;
classDef cssdoc-component stroke-width:1px;
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. |
.-render-value-inside | A(z) .value elemet a sávon belül, annak kezdetéhez igazítva jeleníti meg a mellette lévő elhelyezés helyett; formázza úgy, hogy jól olvasható legyen a mérő színe felett. |
.-should-animate | Interaction — Animate meter changes over half a second. |
.-size-large | Nagy. Hosszú forma alias a -size-lg. |
.-size-lg | Nagy. |
.-size-md | Közepes (alapértelmezett). |
.-size-medium | Közepes (alapértelmezett). A(z) -size-md hosszú formátumú aliasa. |
.-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. |
.value | A sáv melletti értékszöveg. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
:::indeterminate | Egyéni, nem része az InstUI-nak. Csak olyan natív <progress> elemre vonatkozik, amelyből hiányzik a(z) value attribútum; a(z) .bar elemet csúszó szegmensként animálja, és elrejti a(z) .value elemet. |
::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. |
Állapotok
| Állapot | Leírás |
|---|---|
:indeterminate | — |
Egyéni tulajdonságok
| Tulajdonság | Típus | Alapértelmezett | Leírás |
|---|---|---|---|
--max | <number> | — | A maximális folyamatérték (alapértelmezett: 100). |
--min | <number> | — | A minimális mérési érték (alapértelmezett: 0). |
--value | <number> | — | Az aktuális folyamatérték. |
--value-max | <number> | — | @alias {@link --max} A maximális előrehaladási érték (alapértelmezett: 100). |
--value-now | <number> | — | @alias A(z) --value aliasa. |
Animációk
| Animáció | Leírás |
|---|---|
pantoken-progress-indeterminate | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-color-background-brand | <color> | LightDarklight-dark(#1D354F, #EEF4FD) |
--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> | LightDarklight-dark(#1D354F, #EEF4FD) |
--instui-component-progress-bar-border-color-inverse | <color> | LightDarklight-dark(#ffffff, #6A7883) |
--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> | LightDarklight-dark(#ffffff, #10141A) |
--instui-component-progress-bar-small-height | <length> | 1rem |
--instui-component-progress-bar-text-color | <color> | LightDarklight-dark(#576773, #AAB0B5) |
--instui-component-progress-bar-text-color-inverse | <color> | LightDarklight-dark(#ffffff, #1C222B) |
--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
@scopeat-rule-lal hatóköri; böngészők@scopetá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.