CSS: progress-circle

.instui-progress-circle · stable — Egy köralakú haladási gyűrű, melyet --value és --value-max egyéni tulajdonságok vezérelnek.

A gyűrű egy conic-gradient gyűrű, amelyet ::before-en festünk és egy radiális-gradient maszkkal metszenek; --value osztva --value-max-mal vezérli az ívet. Add hozzá -should-animate-t és töltsd be az interactions belépési pontját, hogy a komponens mountoláskor nulláról animálódjon. Az InstUI-nak nincs meghatározhatatlan állapota; :indeterminate csak pantoken-becslés (natív <progress> value attribútum nélkül), a gyűrűt rögzített ívvel forgatja és elrejti .value-t, mivel nincs értelmes szám megjeleníthető. <meter>-nek nincs meghatározhatatlan állapota, tehát nem érinti.

Source: progress-circle.css

TIP

JS kiegészítés — Ennek a komponensnek a CSS-e önmagában megjelenik és működik; párosítsd @pantoken/interactions-val az interaktív viselkedés hozzáadásához. A -should-animate módosítót ez a viselkedés vezérli. Lásd az alábbi módosító táblázatot.

Hozzáférhetőség

Használj natív <progress>-t nulla-alapú feladatkészültséghez és <meter>-t, ha a minimum nem nulla. Adj bármelyik elemnek hozzáférhető nevet úgy, hogy beágyazod <label>-be, vagy külön <label>-et társítasz egyező for és id értékekkel.

Használat

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

Példák

Nested label

<label>
  Dokumentum feltöltése: <progress class="instui-progress-circle -size-sm" value="70">70%</progress>
</label>

External label

<label for="score">Pontszám</label>
<meter id="score" class="instui-progress-circle -color-success" min="20" value="40" max="60">50%</meter>

Struktúra

// Variant: nested-label

label
  .instui-progress-circle
    .value

// Variant: external-label

label
.instui-progress-circle
  .value

flowchart TD subgraph sg0 ["nested-label"] n1["label"]:::cssdoc-root n2(".instui-progress-circle"):::cssdoc-part n3(".value"):::cssdoc-part end subgraph sg4 ["external-label"] n5["label"]:::cssdoc-root n6[".instui-progress-circle"]:::cssdoc-root n7(".value"):::cssdoc-part end n2 --> n3 n1 --> n2 n6 --> n7 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 (brand) mérőszín.
.-color-danger	Veszély (danger) mérőszín.
.-color-info	Információs mérőszín.
.-color-primary-inverse	Sötét háttérhez (primary inverse) való mérőszín.
.-color-success	Siker (success) mérőszín.
.-color-warning	Figyelmeztető (warning) 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 az -size-lg-nak.
.-size-lg	Nagy.
.-size-md	Közepes (alapértelmezett).
.-size-medium	Közepes (alapértelmezett). Hosszú alakú aliasa -size-md-nak.
.-size-sm	Kicsi.
.-size-small	Kicsi. Hosszú forma alias az -size-sm-nak.
.-size-x-small	Extra kicsi. Hosszú forma alias az -size-xs-nak.
.-size-xs	Extra kicsi.

Részek

Rész	Leírás
.value	Az értékszöveg a gyűrű lyukának közepén.

Pseudo-elemek

Pseudo-elem	Leírás
:::indeterminate	Egyedi, nem része az InstUI-nak. Csak natív <progress>-re vonatkozik, ha hiányzik a value attribútum; ::before-t rögzített ívvel forgatja és elrejti .value-t.
::before	A gyűrűt maga rajzolja: egy conic-gradient gyűrűt radiális maszkkal metszve, 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>	—	Milliszekundumok a mount animáció indítása előtt (alapértelmezett 0).
--max	<number>	—	A maximális haladási érték (alapértelmezett 100).
--min	<number>	—	A minimális mérőérték (alapértelmezett 0).
--pantoken-pc-fill	<color>	—	A kitöltött ív (mérő) színe; ezt a -color-* módosítók állítják be.
--pantoken-pc-stroke	<length>	—	A gyűrű vonalvastagsága; ezt a -size-* módosítók állítják be.
--pantoken-pc-track	<color>	—	A kitöltetlen sín (track) színe.
--value	<number>	—	A jelenlegi haladási érték; regisztrálva van PTK_INLINE_CODE_0-val, így átmenetet kaphat.
--value-max	<number>	—	@alias {@link --max} A maximális haladási érték (alapértelmezett 100).
--value-now	<number>	—	@alias Alias a --value számára.

Animációk

Animáció	Leírás
pantoken-progress-circle-indeterminate	—

Fogyasztott 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>	LightDarklight-dark(#F0C16C, #8C6400)
--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 haladási tulajdonságokat @property-val és fest CSS mask és conic-gradient használatával; ahol az egyéni tulajdonság átmenetek nem támogatottak, a gyűrű még mindig megjelenik, de nem animálódik.

Kapcsolódó

• progress — A meghatározott haladás ugyanazon lineáris sávformája.