CSS: progress-circle
.instui-progress-circle · stable — A(z) --value és --value-max egyéni tulajdonságok által vezérelt körkörös folyamatjelző gyűrű.
A gyűrű egy conic-gradient fánk, amely a(z) ::before felületre van kirajzolva, és egy radial-gradient maszkkal van levágva; az ívet a(z) --value osztva a(z) --value-max értékkel vezérli. Adja hozzá a(z) -should-animate elemet, és töltse be az interakciók belépési pontját, hogy csatoláskor nulláról animálja. Az InstUI-nak nincs határozatlan állapota; a(z) :indeterminate egy pantoken-specifikus legjobb becslés (natív <progress> a(z) value attribútum nélkül), amely rögzített ívben forgatja a gyűrűt, és elrejti a(z) .value értéket, mivel nincs megjeleníthető értelmes szám. A(z) <meter> nem rendelkezik határozatlan állapottal, így arra nincs hatással.
Forrás: progress-circle.css
TIP
JS-bővítmény — Ennek a komponensnek a CSS-e önmagában is renderelődik és működik; párosítsa a(z) @pantoken/interactions elemmel az interaktív viselkedés hozzáadásához. A(z) -should-animate módosítóját ez a viselkedés vezérli. Lásd az alábbi módosítótáblázatot.
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
@import "@pantoken/components/components.css";
@import "@pantoken/components/progress-circle.css";Példák
Nested label
<label>
Uploading Document: <progress class="instui-progress-circle -size-sm" value="70">70%</progress>
</label>External label
<label for="score">Score</label>
<meter id="score" class="instui-progress-circle -color-success" min="20" value="40" max="60">50%</meter>Felépítés
// Variant: nested-label
label
.instui-progress-circle
.value// Variant: external-label
label
.instui-progress-circle
.valueMó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-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. |
.-shold-animate-on-mount | Alias — maps to .-should-animate. |
.-should-animate | Interaction — Animate the meter, ring, and centered value into place on mount. |
.-should-animate-on-mount | Alias — maps to .-should-animate. |
.-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 |
|---|---|
.value | Az érték szöveg középre helyezve a gyűrű furatában. |
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; rögzített ívben forgatja a(z) ::before elemet, és elrejti a(z) .value elemet. |
::before | Megrajzolja a gyűrűt: egy kúp-gradiens fánk vágva egy radiális maszkkal, amelynek ívét a --value egyéni tulajdonság követi. |
Állapotok
| Állapot | Leírás |
|---|---|
:indeterminate | — |
Egyéni tulajdonságok
| Tulajdonság | Típus | Alapértelmezett | Leírás |
|---|---|---|---|
--animation-delay | <number> | — | A csatolási animáció indítása előtt kivárandó ezredmásodpercek (alapértelmezett: 0). |
--max | <number> | — | A maximális folyamatérték (alapértelmezett: 100). |
--min | <number> | — | A minimális mérési érték (alapértelmezett: 0). |
--pantoken-pc-fill | <color> | — | A kitöltött ív (mérő) szín; a -color-* módosítók állítják be. |
--pantoken-pc-stroke | <length> | — | A gyűrű vonalvastagságának szélessége; a -size-* módosítók állítják be. |
--pantoken-pc-track | <color> | — | A kitöltetlen pálya szín. |
--value | <number> | — | Az aktuális folyamatérték; a @property segítségével regisztrálva, hogy képes legyen átmenetet végezni. |
--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-circle-indeterminate | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-progress-circle-color | <color> | LightDarklight-dark(#273540, #ffffff) |
--instui-component-progress-circle-color-inverse | <color> | LightDarklight-dark(#ffffff, #1C222B) |
--instui-component-progress-circle-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-progress-circle-font-weight | <integer> | 600 |
--instui-component-progress-circle-large-size | <length> | 9em |
--instui-component-progress-circle-large-stroke-width | <length> | 0.875em |
--instui-component-progress-circle-line-height | <percentage> | 125% |
--instui-component-progress-circle-medium-size | <length> | 7em |
--instui-component-progress-circle-medium-stroke-width | <length> | 0.625em |
--instui-component-progress-circle-meter-color-brand | <color> | LightDarklight-dark(#1D354F, #EEF4FD) |
--instui-component-progress-circle-meter-color-brand-inverse | <color> | LightDarklight-dark(#ffffff, #6A7883) |
--instui-component-progress-circle-meter-color-danger | <color> | #E62429 |
--instui-component-progress-circle-meter-color-danger-inverse | <color> | LightDarklight-dark(#ffffff, #6A7883) |
--instui-component-progress-circle-meter-color-info | <color> | #2B7ABC |
--instui-component-progress-circle-meter-color-info-inverse | <color> | LightDarklight-dark(#ffffff, #6A7883) |
--instui-component-progress-circle-meter-color-success | <color> | #03893D |
--instui-component-progress-circle-meter-color-success-inverse | <color> | LightDarklight-dark(#ffffff, #6A7883) |
--instui-component-progress-circle-meter-color-warning | <color> | #CF4A00 |
--instui-component-progress-circle-meter-color-warning-inverse | <color> | LightDarklight-dark(#ffffff, #6A7883) |
--instui-component-progress-circle-small-size | <length> | 5em |
--instui-component-progress-circle-small-stroke-width | <length> | 0.5em |
--instui-component-progress-circle-track-color | <color> | LightDarklight-dark(#ffffff, #10141A) |
--instui-component-progress-circle-track-color-inverse | <color> | #00000000 |
--instui-component-progress-circle-x-small-size | <length> | 3em |
--instui-component-progress-circle-x-small-stroke-width | <length> | 0.2em |
Böngészőtámogatás
- Regisztrálja a numerikus folyamattulajdonságokat a(z)
@propertysegítségével, és CSSmaskésconic-gradienthasználatával rajzol; ahol az egyéni tulajdonságok átmenetei nem támogatottak, a gyűrű továbbra is megjelenik, de nem fog animálódni.
Kapcsolódó
- progress — Az ugyanazon determinisztikus haladás lineáris sáv formája.