CSS: progress ​

.instui-progress · stable — Egy meghatározott haladási sáv színezett mérővel, méretekkel és opcionális értékcímkével.

.value a .bar testvére, mindketten a gyökér gyermekei — tükrözve, ahogy a progress-circle beágyazza a saját .value részét. Az InstUI-nak nincs meghatározhatatlan állapota; :indeterminate csak pantoken-becslés (natív <progress> value attribútum nélkül), amely .bar-t csúszó szegmensként animálja és elrejti .value-t, mivel nincs értelmes szám megjeleníthető. <meter>-nek nincs meghatározhatatlan állapota, tehát nem érinti.

Source: progress.css

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 ​

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

Példák ​

Nested label ​

html
<label>
  Dokumentum feltöltése: <progress class="instui-progress -color-brand" value="70">70%</progress>
</label>

External label ​

html
<label for="storage-used">Használt tárhely</label>
<meter id="storage-used" class="instui-progress -color-warning" min="20" value="40" max="60">50%</meter>

Struktúra ​

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

Módosítók ​

MódosítóLeírás
.-color-brandMárka (brand) mérőszín.
.-color-dangerVeszély (danger) mérőszín.
.-color-infoInformációs mérőszín.
.-color-inverseSötét hátterekhez.
.-color-primary-inverseSötét háttérhez (primary inverse) való mérőszín.
.-color-successSiker (success) mérőszín.
.-color-warningFigyelmeztető (warning) mérőszín.
.-meter-color-alertElavult — use .-color-warning.
.-meter-color-brandElavult — use .-color-brand.
.-meter-color-dangerElavult — use .-color-danger.
.-meter-color-infoElavult — use .-color-info.
.-meter-color-successElavult — use .-color-success.
.-meter-color-warningElavult — use .-color-warning.
.-render-value-insideA .value-t a sín belsejében rendereli, a kezdőpontjához igazítva, ahelyett hogy mellette lenne; formázd olvashatóságért a mérő színe fölött.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeNagy. Hosszú forma alias az -size-lg-nak.
.-size-lgNagy.
.-size-mdKözepes (alapértelmezett).
.-size-mediumKözepes (alapértelmezett). Hosszú alakú aliasa -size-md-nak.
.-size-smKicsi.
.-size-smallKicsi. Hosszú forma alias az -size-sm-nak.
.-size-x-smallExtra kicsi. Hosszú forma alias az -size-xs-nak.
.-size-xsExtra kicsi.

Részek ​

RészLeírás
.barA kitöltött mérősáv.
.valueAz értékszöveg a sáv mellett.

Pseudo-elemek ​

Pseudo-elemLeírás
:::indeterminateEgyedi, nem része az InstUI-nak. Csak natív <progress>-re vonatkozik, ha hiányzik a value attribútum; .bar-t csúszó szegmensként animálja és elrejti .value-t.
::afterA sín alsó vonalát külön rétegként rajzolja a mérő fölé, így a teljes keret és az alsó keret független marad a témák között.

Állapotok ​

ÁllapotLeírás
:indeterminate—

Egyéni tulajdonságok ​

TulajdonságTípusAlapértelmezettLeírás
--max<number>—A maximális haladási érték (alapértelmezett 100).
--min<number>—A minimális mérőérték (alapértelmezett 0).
--value<number>—A jelenlegi haladási érték.
--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-indeterminate—

Fogyasztott tokenek ​

TokenTípusÉrték
--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>LightDarklight-dark(#F0C16C, #8C6400)
--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

Böngészőtámogatás ​

  • A mérőrész szabályait az @scope at-rule-lal korlátozza; azok a böngészők, amelyek nem támogatják @scope-t, figyelmen kívül hagyják ezeket a scoped szabályokat.

Kapcsolódó ​