CSS: progress ​

.instui-progress · stable — Սահմանված առաջընթացի սանդուղք՝ գունավոր ցուցիչով, չափերով և կամայական արժեքի պիտակով։

.value-ը .bar-ի զեղումը է, երկուսն էլ արմատային երեխա են — կրկնօրինակելով այն, թե ինչպես է progress-circle-ը ներսում բաշխում իր .value մասը։ InstUI-ում չկա անորոշ (indeterminate) վիճակ; :indeterminate-ը միայն pantoken-ի լավագույն ենթադրությունն է (native <progress>՝ առանց value հատկանիշի), որը անիմացնում է .bar-ը որպես սահող հատված և թաքցնում .value-ը, քանի որ ցույց տալու իմաստալից թիվ չկա։ <meter>-ը անորոշ վիճակ չունի, այնպես որ այն անփոփոխ է։

Source: progress.css

Մուտքականություն ​

Սա Native <progress>-ն օգտագործեք զրոյական վրա հիմնված առաջադրանքի ավարտման միջակայքի համար և <meter>-ը՝ երբ նվազագույնը ոչ զրո է։ Տվեք որևէ էլեմենտին մատչելի անվանում՝ տեղավորելով այն <label>-ի մեջ կամ կապելով առանձին <label>-ի հետ՝ համապատասխանող for և id արժեքներով։

Օգտագործում ​

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

Օրինակներ ​

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>

Կառուցվածք ​

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

Մոդիֆիկատորներ ​

ՄոդիֆիկատորՆկարագիր
.-color-brandԲրենդի մեթրի գույն։
.-color-dangerՄետրի վտանգավոր գույն։
.-color-infoՏեղեկատվական մետրի գույն։
.-color-inverseՄուգ ֆոնների համար։
.-color-primary-inverseՄուգ ֆոնի վրա (այդպես կոչված primary inverse) մետրի գույն։
.-color-successՀաջողության մետրի գույն։
.-color-warningԵռուշաբթի մետրի գույն։
.-meter-color-alertՀնացած — use .-color-warning.
.-meter-color-brandՀնացած — use .-color-brand.
.-meter-color-dangerՀնացած — use .-color-danger.
.-meter-color-infoՀնացած — use .-color-info.
.-meter-color-successՀնացած — use .-color-success.
.-meter-color-warningՀնացած — use .-color-warning.
.-render-value-insideՆերբեռնում է .value-ը տրեքի ներսում, վերադասավորված նրա սկսման մասին, այլ ոչ թե կողքին; ձևափոխեք այն՝ meter-ի գույնի վրա ընթեռնելի լինելու համար։
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeՄեծ։ -size-lg–ի երկարաձգված անունը։
.-size-lgՄեծ։
.-size-mdՄիջին (ստանդարտ).
.-size-mediumՄիջին (ստանդարտ). -size-md-ի երկար ձևի ալիաս։
.-size-smՓոքր։
.-size-smallՓոքր. -size-sm–ի երկարաձգված անունը։
.-size-x-smallԱրտաքին փոքր։ -size-xs–ի երկարաձգված անունը։
.-size-xsԱրտահայտորեն փոքր։

Մասեր ​

ՄասՆկարագիր
.barԼցված ցուցիչի սանդուղքը։
.valueԲարիքի տեքստը սանդուղքի կողքին։

Պսևդո-էլեմենտներ ​

Պսևդո-էլեմենտՆկարագիր
:::indeterminateԱնհատական, չի պատկանում InstUI-ին։ Գործածվում է միայն այն native <progress>-ի դեպքում, որը բացակայում է value հատկանիշը; անիմացնում է .bar-ը որպես սահող հատված և թաքցնում .value-ը։
::afterՏվյալ տրեկի ստորին կանոնը նկարազարդում է իր սեփական շերտը meter-ի վրա, այնպես որ ամբողջ եզրագիծը և ստորին եզրագիծը կմնան անկախ թեմաների միջով։

Փոփոխական վիճակներ ​

ՎիճակՆկարագիր
:indeterminate—

Անհատական հատկություններ ​

ԱռանձնահատկությունՏիպԸնթացիկՆկարագիր
--max<number>—Առավելագույն առաջընթացի արժեքը (ստանդարտ 100)։
--min<number>—Նվազագույն մետրի արժեքը (ստանդարտ 0)։
--value<number>—Ներկայիս առաջընթացի արժեքը։
--value-max<number>—@alias {@link --max} Առավելագույն առաջընթացի արժեքը (ստանդարտ 100)։
--value-now<number>—@alias --value-ի ալիաս։

Անիմացիաներ ​

ԱնիմացիաՆկարագիր
pantoken-progress-indeterminate—

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--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

Բրաուզերի աջակցություն ​

  • Սահմանում է meter մասի կանոնները @scope at-rule-ով; այն բրաուզերները, որոնք չունեն @scope աջակցություն, չի նկատում այդ սահմանված կանոնները։

Ավելին կապված ​

  • progress-circle — նույն սահմանված առաջընթացի շրջանաձև տարբերակը։