CSS: progress-circle
.instui-progress-circle — Egy kör alakú haladási gyűrű, amelyet egy --value (0–100) egyéni tulajdonság vezérel.
A gyűrű egy conic-gradient fánk festve ::before-re és radiális-gradiens maszkkal vágva; a --value egyéni tulajdonság vezérli az ívet.
Forrás: progress-circle.css
Akadálymentesség
Adjon neki role="img" és egy aria-label-t a százalékkal, mivel a gyűrű CSS-ben van rajzolva.
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/progress-circle.css";Példák
html
<span class="instui-progress-circle -size-sm" role="img" aria-label="25 percent">
<span class="value">25%</span>
</span>25%
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-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 |
|---|---|
.value | Az érték szöveg középre helyezve a gyűrű furatában. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::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. |
Egyéni tulajdonságok
| Tulajdonság | Típus | Alapértelmezett | Leírás |
|---|---|---|---|
--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> | 0 | Az ív által vezérelt haladási százalék (0–100); regisztrálva @property-vel, így átmozoghat. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-progress-circle-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-progress-circle-color-inverse | <color> | light-dark(#ffffff, #1C222B)LightDark |
--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> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-component-progress-circle-meter-color-brand-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-component-progress-circle-meter-color-danger | <color> | #E62429 |
--instui-component-progress-circle-meter-color-danger-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-component-progress-circle-meter-color-info | <color> | #2B7ABC |
--instui-component-progress-circle-meter-color-info-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-component-progress-circle-meter-color-success | <color> | #03893D |
--instui-component-progress-circle-meter-color-success-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-component-progress-circle-meter-color-warning | <color> | #CF4A00 |
--instui-component-progress-circle-meter-color-warning-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--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> | light-dark(#ffffff, #10141A)LightDark |
--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ál
--value-t@property-vel (így az ív átmozoghat) és CSSmaskésconic-gradient-val fest; ahol@propertynem támogatott, a gyűrű még mindig renderel, de nem animál.
Kapcsolódó
- progress — Az ugyanazon determinisztikus haladás lineáris sáv formája.