CSS: progress-circle

.instui-progress-circle · stable — Fáinne dul chun cinn ciorclach atá tiomáinte ag airíonna saincheaptha --value agus --value-max.

Is conic-gradient donut é an fáinne péinteáilte ar ::before agus scartha le masc radial-gradient; rialaíonn --value roinnte ag --value-max an arc. Cuir -should-animate leis agus luchtú an pointí iontrála idirghníomhaíochtaí chun é a ghníomhachtú ó nialas ar mount. Níl staid neamhshocraithe ag InstUI; is mheasúnacht mhaith í :indeterminate atá ar fáil i pantoken amháin (native <progress> gan tréith value), ag casadh an fháinne ag arc seasta agus ag cur i bhfolach .value mar níl aon uimhir chiallaithe le taispeáint. Níl staid neamhshocraithe ag <meter>, mar sin ní théann sé i bhfeidhm.

Source: progress-circle.css

TIP

Feabhsú JS — Léiríonn agus oibríonn CSS an chomhpháirte seo ina leith féin; péireáil é le @pantoken/interactions chun an iompar idirghníomhach a chur leis. Tá an modhnóir -should-animate á thiomáint ag an iompar sin. Féach an tábla modhnóirí thíos.

Inrochtaineacht

Úsáid <progress> bunaidh le haghaidh raon críochnaithe tasc bunaithe ar nialas agus <meter> nuair atá an íosmhéid neamh-nialasach. Tabhair ainm inacmhainne d’aon cheann de na heilimintí trína chur istigh i <label> nó trína nascleanúint le <label> ar leith trí mheaitseáil luachanna for agus id.

Úsáid

css

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

Samplaí

Nested label

html

<label>
  Uploading Document: <progress class="instui-progress-circle -size-sm" value="70">70%</progress>
</label>

External label

html

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

Struchtúr

// Variant: nested-label

text

label
  .instui-progress-circle
    .value

// Variant: external-label

text

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;

Modhnóirí

Modhnóir	Cur síos
`.-color-brand`	Dath meter branda.
`.-color-danger`	Dath meter contúirte.
`.-color-info`	Dath meter eolais.
`.-color-primary-inverse`	Dath meter ar dhorcha (inmhalartaithe bunúsach).
`.-color-success`	Dath meter rathúnais.
`.-color-warning`	Dath meter rabhaidh.
`.-meter-color-alert`	As dáta — use `.-color-warning`.
`.-meter-color-brand`	As dáta — use `.-color-brand`.
`.-meter-color-danger`	As dáta — use `.-color-danger`.
`.-meter-color-info`	As dáta — use `.-color-info`.
`.-meter-color-success`	As dáta — use `.-color-success`.
`.-meter-color-warning`	As dáta — 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`	Mór. Ainm fhadaaistear de `-size-lg`.
`.-size-lg`	Mór.
`.-size-md`	Meán (réamhshocraithe).
`.-size-medium`	Meán (réamhshocraithe). Ailias fhada ar `-size-md`.
`.-size-sm`	Beag.
`.-size-small`	Beag. Ainm fhadaaistear de `-size-sm`.
`.-size-x-small`	Breise-beag. Ainm fhadaaistear de `-size-xs`.
`.-size-xs`	Breise-beag.

Codanna

Cuid	Cur síos
`.value`	An téacs luach lárnaithe i bpócaire an fháinne.

Fo-eilimintí

Fo-eilimint	Cur síos
`:::indeterminate`	Saincheaptha, ní cuid d'InstUI é. I bhfeidhm amháin ar `<progress>` dúchais nach bhfuil a thréith `value` ann; casann sé `::before` ag arc seasta agus cuireann sé i bhfolach `.value`.
`::before`	Tarpaingíonn sé an fáinne féin: donut conic-gradient scartha le masc radial, a rianaíonn arc an `--value` airíonna saincheaptha.

Stáit

Stát	Cur síos
`:indeterminate`	—

Airíonna saincheaptha

Airí	Cineál	Réamhshocraithe	Cur síos
`--animation-delay`	`<number>`	—	Milsceanaillí le fanacht sula dtosaíonn an beochan mount (réamhshocraithe `0`).
`--max`	`<number>`	—	An luach uasta dul chun cinn (réamhshocraithe `100`).
`--min`	`<number>`	—	An luach íosta don meter (réamhshocraithe `0`).
`--pantoken-pc-fill`	`<color>`	—	Dath an arc lánaithe (meter); leagann na modhnóirí -color-* é.
`--pantoken-pc-stroke`	`<length>`	—	Leithead stróc an fháinne; leagann na modhnóirí -size-* é.
`--pantoken-pc-track`	`<color>`	—	Dath an rian nach bhfuil lánaithe.
`--value`	`<number>`	—	An luach reatha dul chun cinn; cláraithe le @property ionas go bhféadfadh sé trasnú.
`--value-max`	`<number>`	—	@alias {@link --max} An luach uasta dul chun cinn (réamhshocraithe `100`).
`--value-now`	`<number>`	—	@alias Ailias do `--value`.

Beochana

Beochan	Cur síos
`pantoken-progress-circle-indeterminate`	—

Tóicíní a úsáideadh

Token	Cineál	Luach
`--instui-component-progress-circle-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-component-progress-circle-color-inverse`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-progress-circle-meter-color-brand-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-danger`	`<color>`	`#E62429`
`--instui-component-progress-circle-meter-color-danger-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-info`	`<color>`	`#2B7ABC`
`--instui-component-progress-circle-meter-color-info-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-success`	`<color>`	`#03893D`
`--instui-component-progress-circle-meter-color-success-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-warning`	`<color>`	`#CF4A00`
`--instui-component-progress-circle-meter-color-warning-inverse`	`<color>`	LightDark`light-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>`	LightDark`light-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`

Tacaíocht bhrabhsálaí

Cláraíonn sé na hairíonna uimhriúla dul chun cinn le @property agus péinteálann sé le CSS mask agus conic-gradient; i gcás nach dtacaítear le trasnuithe airíonna saincheaptha, fós léirítear an fáinne ach ní bheidh beochan ann.

Gaolmhar

progress — An fhoirm barra líneach den dul chun cinn deimhnithe céanna.

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: progress-circle ​

Inrochtaineacht ​

Úsáid ​

Samplaí ​

Nested label ​

External label ​

Struchtúr ​

Modhnóirí ​

Codanna ​

Fo-eilimintí ​

Stáit ​

Airíonna saincheaptha ​

Beochana ​

Tóicíní a úsáideadh ​

Tacaíocht bhrabhsálaí ​

Gaolmhar ​