CSS: progress ​

.instui-progress · stable — Bar cynnydd pendant gyda mynegai lliwiedig, meintiau, a label gwerth dewisol.

.value yw brawd i .bar, i gyd yn blant i’r gwraidd — yn adlewyrchu sut mae progress-circle yn nesti ei ran .value ei hun. Nid oes gan InstUI gyflwr anhysbys; mae :indeterminate yn dyfalu gorau ar gyfer pantoken yn unig (native <progress> heb yr eiddo value), yn animeiddio .bar fel segment sleid a chuddio .value gan nad oes rhif ystyrlon i’w ddangos. Nid oes gan <meter> gyflwr anhysbys, felly ni chaiff ei effeithio.

Source: progress.css

Hygyrchedd ​

Defnyddiwch <progress> natifol ar gyfer ystod cwblhau tasg sy'n dechrau ar sero a <meter> pan nad yw'r lleiaf yn sero. Rhoddwch enw hygyrch i unrhyw elfen trwy ei chynnwys mewn <label> neu drwy gysylltu <label> ar wahân trwy werthoedd for a id cyfatebol.

Defnydd ​

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

Enghreifftiau ​

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>

Strwythur ​

// Variant: nested-label

text
label
  .instui-progress
    .bar
    .value

// Variant: external-label

text
label
.instui-progress
  .bar
  .value
flowchart 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;

Modyfiwyr ​

ModyfiwrDisgrifiad
.-color-brandLliw metrau brand.
.-color-dangerLliw metrau perygl.
.-color-infoLliw metrau gwybodaeth.
.-color-inverseAr gyfer cefndiroedd tywyll.
.-color-primary-inverseLliw metrau ar gefn du (gwrthwynebiad prifol).
.-color-successLliw metrau llwyddiant.
.-color-warningLliw metrau rhybudd.
.-meter-color-alertWedi'i henffurfio — use .-color-warning.
.-meter-color-brandWedi'i henffurfio — use .-color-brand.
.-meter-color-dangerWedi'i henffurfio — use .-color-danger.
.-meter-color-infoWedi'i henffurfio — use .-color-info.
.-meter-color-successWedi'i henffurfio — use .-color-success.
.-meter-color-warningWedi'i henffurfio — use .-color-warning.
.-render-value-insideYn rendro .value yn mewnol y trac, wedi’i alinio i’w ddechrau, yn hytrach nag ochr bynnag iddo; arddullia ef er mwyn ei ddarllenadwyedd wrth ei roi dros liw y mynegai.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeMawr. Enw hir ffurf -size-lg.
.-size-lgMawr.
.-size-mdCanol (diofyn).
.-size-mediumCanol (diofyn). Enw hir — ailgyfeiriad i -size-md.
.-size-smBach.
.-size-smallBach. Enw hir ffurf -size-sm.
.-size-x-smallEithriadol bach. Enw hir ffurf -size-xs.
.-size-xsEithriadol bach.

Rhannau ​

RhanDisgrifiad
.barY bar mynegai wedi’i lenwi.
.valueY testun gwerth wrth ymyl y bar.

Is-elfennau ​

Is-elfenDisgrifiad
:::indeterminateWedi’i haddasu, nid yn rhan o InstUI. Yn berthnasol yn unig i native <progress> sydd heb eiddo value; yn animeiddio .bar fel segment sleid a chuddio .value.
::afterYn tynnu rheol gwaelod y trac fel haen ei hun dros y mynegai, felly mae’r ffin lawn a’r ffin isaf yn aros yn annibynnol ar draws themâu.

Statwsau ​

StatwsDisgrifiad
:indeterminate—

Priodweddau arferiad ​

EiddoMathDiofynDisgrifiad
--max<number>—Y gwerth cynnydd uchaf (diofyn 100).
--min<number>—Y gwerth metar lleiaf (diofyn 0).
--value<number>—Y gwerth cynnydd presennol.
--value-max<number>—@alias {@link --max} Y gwerth cynnydd uchaf (diofyn 100).
--value-now<number>—@alias Ailgyfeiriad i --value.

Animeiddiadau ​

AnimeiddiadDisgrifiad
pantoken-progress-indeterminate—

Tocynnau a ddefnyddiwyd ​

TokenMathGwerth
--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

Cefnogaeth porwr ​

  • Yn amgáu rheolau’r rhan mynegai gyda’r at-rule @scope; mae porwyr heb gefnogaeth @scope yn anwybyddu’r rheolau amgáu hynny.

Perthnasol ​