CSS: progress ​

.instui-progress · stable — Ákvarðaður framvindustika með litaðri mæli, stærðum og valfrjálsri gildistákni.

.value er systur við .bar, bæði börn rótarinnar — endurspeglun á því hvernig progress-circle inniheldur sitt eigið .value hluta. InstUI hefur engan óákveðinn (indeterminate) hátt; :indeterminate er aðeins pantoken-tilgáta (innfæddur <progress> án value attribute), áttunar .bar sem renndan hluta og falinn .value þar sem ekkert merkingarbært númer er til sýnis. <meter> hefur engan óákveðinn hátt, svo það er ekki snert.

Source: progress.css

Aðgengi ​

Notið innbyggða <progress> fyrir verkefnishlutfall sem byrjar á núlli og <meter> þegar lágmarkið er ekki núll. Gefið hvoru tveggja frumefnanna aðgengilegt nafn með því að innlima þau í <label> eða tengja aðskilið <label> með samsvarandi for- og id-gildum.

Notkun ​

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

Dæmi ​

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>

Uppbygging ​

// 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;

Breytingar ​

BreytiLýsing
.-color-brandLitur vörumerkjamælis.
.-color-dangerLitur hættumælis.
.-color-infoLitur upplýsingamælis.
.-color-inverseFyrir dökkar bakgrunner.
.-color-primary-inverseMælislitur fyrir dökkan bakgrunn (primary inverse).
.-color-successLitur árangursmælis.
.-color-warningLitur viðvörunarmælis.
.-meter-color-alertÚrelt — use .-color-warning.
.-meter-color-brandÚrelt — use .-color-brand.
.-meter-color-dangerÚrelt — use .-color-danger.
.-meter-color-infoÚrelt — use .-color-info.
.-meter-color-successÚrelt — use .-color-success.
.-meter-color-warningÚrelt — use .-color-warning.
.-render-value-insideSýnir .value innan stöðugrindarinnar, í samstillingu við byrjun hennar, í staðinn fyrir hliðstæðan stað; stílsettu það til að tryggja læsileika yfir lit mælisins.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeStór. Lengri alias af -size-lg.
.-size-lgStór.
.-size-mdMiðlungs (sjálfgefið).
.-size-mediumMedium (sjálfgefið). Lengra alias fyrir -size-md.
.-size-smLítill.
.-size-smallLítill. Lengri alias af -size-sm.
.-size-x-smallAuka lítill. Lengri alias af -size-xs.
.-size-xsAuka lítill.

Hlutar ​

HlutiLýsing
.barFyllti mælisreiturinn.
.valueGildistextinn við hlið stikana.

Sýndareiningar ​

SýndareiningLýsing
:::indeterminateSérsniðinn, ekki hluti af InstUI. Gildir aðeins fyrir innfæddan <progress> sem vantar value attribute; áttunar .bar sem renndan hluta og falinn .value.
::afterTeiknar neðri reglu brautarinnar sem sitt eigið lag yfir mælinum, þannig að fulla rammanum og neðri brún haldist sjálfstæðar milli þema.

Stöður ​

StaðaLýsing
:indeterminate—

Sérsniðnar eigindir ​

EiginleikiTegundSjálfgefiðLýsing
--max<number>—Hámarks framfaragildi (sjálfgefið 100).
--min<number>—Lágmarks gildi mælisins (sjálfgefið 0).
--value<number>—Núvirt framvindugildi.
--value-max<number>—@alias {@link --max} Hámarks gildi framvindu (sjálfgefið 100).
--value-now<number>—@alias Gervinafn fyrir --value.

Hreyfimyndir ​

HreyfimyndLýsing
pantoken-progress-indeterminate—

Notuð tákn ​

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

Vafrastuðningur ​

  • Skapar hlutarreglur mælisins með @scope at-rule; vafrar án @scope stuðnings hunsa þessar afmarkaðu reglur.

Tengdar ​