CSS: progress-circle ​

.instui-progress-circle · stable — Առանցքային պանրաձև առաջընթացի մատնիչ, որը ղեկավարվում է --value և --value-max օգտածված հատկություններով։

Չափը conic-gradient դոնաթ է, որն նկարվում է ::before-ով և կտրվում ռադիալ-gradient մասկով; --value բաժանված --value-max-ով շարժում է օղակը։ Ավելացրեք -should-animate և բեռնեք interactions մուտքի կետը՝ այն մոնտաժի վրա զրոյից անիմացնելու համար։ InstUI-ն չունի անորոշ स्थिति; :indeterminate-ը pantoken-ի միակ լավագույն ենթադրությունն է (բնական <progress> առանց value հատկանիշի), որը խաչակում է օղակը фиксացված ծայրը և 숨եցնում է .value-ը, քանի որ ցուցադրելու իմաստալից թիվ չկա։ <meter>-ը չունի անորոշ վիճակ, հետևաբար այն չի ազդում։

Source: progress-circle.css

TIP

JS բարելավում — Այս կոմպոնենտի CSS–ը ինքնուրույն հանգեցվում և գործում է; զույգավորեք այն @pantoken/interactions-ի հետ՝ ինտերակտիվ պահվածքները ավելացնելու համար։ Նրա -should-animate մոդիֆիկատորը ղեկավարվում է այդ պահվածքով։ Դիտեք մոդիֆիկատորների աղյուսակը։

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

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

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

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

Օրինակներ ​

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>

Կառուցվածք ​

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

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

ՄոդիֆիկատորՆկարագիր
.-color-brandԲրենդի մեթրի գույն։
.-color-dangerՄետրի վտանգավոր գույն։
.-color-infoՏեղեկատվական մետրի գույն։
.-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.
.-shold-animate-on-mountAlias — maps to .-should-animate.
.-should-animateInteraction — Animate the meter, ring, and centered value into place on mount.
.-should-animate-on-mountAlias — maps to .-should-animate.
.-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Արտահայտորեն փոքր։

Մասեր ​

ՄասՆկարագիր
.valueԱրժեքի տեքստը կենտրոնացված օղակի անցքում։

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

Պսևդո-էլեմենտՆկարագիր
:::indeterminateԱմրագրում, որը պատկանում է ոչ InstUI-ին։ Վիրաբերվում է միայն բնական <progress>-ին, որի value հատկանիշը բացակայում է; պտտեցնում է ::before-ը фиксացված ծայրով և 숨եցնում .value-ը։
::beforeՆկարում է հենց օղակը՝ կոնիկ-gradient դոնաթ, որը կտրված է ռադիալ մասկով, և որի օղակը հետևում է --value հատուկ հատկությանը։

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

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

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

ԱռանձնահատկությունՏիպԸնթացիկՆկարագիր
--animation-delay<number>—Միլիվարկվան վարկյաններ մոնտաժի անիմացիան սկսելուց առաջ սպասելու համար (ստանդարտ 0)։
--max<number>—Առավելագույն առաջընթացի արժեքը (ստանդարտ 100)։
--min<number>—Նվազագույն մետրի արժեքը (ստանդարտ 0)։
--pantoken-pc-fill<color>—Լցված օղակի (մետրի) գույնը; այն սահմանվում է -color-* մոդիֆիկատորներով։
--pantoken-pc-stroke<length>—Օղակի գծի հաստությունը; -size-* մոդիֆիկատորները սահմանում են այն։
--pantoken-pc-track<color>—Ալիք չլցված տրեկի գույնը։
--value<number>—Ընթացիկ առաջընթացի արժեքը; գրանցված է @property-ով՝ որպեսզի կարողանա անցում կատարել։
--value-max<number>—@alias {@link --max} Առավելագույն առաջընթացի արժեքը (ստանդարտ 100)։
--value-now<number>—@alias --value-ի ալիաս։

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

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

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

TokenՏիպԱրժեք
--instui-component-progress-circle-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-progress-circle-color-inverse<color>LightDarklight-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>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-progress-circle-meter-color-brand-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-danger<color>#E62429
--instui-component-progress-circle-meter-color-danger-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-info<color>#2B7ABC
--instui-component-progress-circle-meter-color-info-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-success<color>#03893D
--instui-component-progress-circle-meter-color-success-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-warning<color>#CF4A00
--instui-component-progress-circle-meter-color-warning-inverse<color>LightDarklight-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>LightDarklight-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

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

  • Գրանցում է թվային առաջընթացի հատկությունները @property-ի հետ և նկարագրում է CSS mask և conic-gradient-ով; այնտեղ, որտեղ օգտածված-հատկությունների անցումները չեն աջակցվում՝ օղակը դեռ պատկերվում է, բայց չի անիմացվում։

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

  • progress — Նույն որոշորոշված առաջընթացի գծային ձևը։