CSS: progress ​

.instui-progress · stable — یک نوار پیشرفت معین با یک نشانگر رنگی، اندازه‌ها و برچسب مقدار اختیاری.

.value یک هم‌ردیف از .bar است، هر دو فرزندان ریشه — همان‌طور که progress-circle بخش .value خود را تو در تو می‌کند. InstUI حالت نامعیّن ندارد؛ :indeterminate صرفاً حدس بهترینِ pantoken است (نسخهٔ بومی <progress> بدون ویژگی value) که .bar را به‌صورت یک قطعهٔ کشویی متحرک می‌کند و .value را پنهان می‌سازد زیرا عدد معناداری برای نمایش وجود ندارد. <meter> حالت نامعیّن ندارد، لذا بدون تغییر می‌ماند.

Source: progress.css

دسترس‌پذیری ​

برای بازهٔ تکمیل وظیفه بر پایهٔ صفر از <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رنگ سنج برای پس‌زمینهٔ تیره (برعکس اصلی).
.-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 را در داخل تراک، هم‌تراز با ابتدای آن، به‌جای کنار آن انجام می‌دهد؛ برای خوانایی روی رنگ نشانگر آن را استایل‌دهی کنید.
.-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متن مقدار کنار نوار.

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
:::indeterminateسفارشی، جزئی از InstUI نیست. فقط در مورد یک <progress> بومی که ویژگی value را ندارد اعمال می‌شود؛ .bar را به‌صورت یک قطعهٔ کشویی متحرک می‌کند و .value را پنهان می‌سازد.
::afterقاعدهٔ پایینیِ تراک را به‌عنوان لایه‌ای جدا روی نشانگر رسم می‌کند، بنابراین حاشیهٔ کامل و حاشیهٔ پایین در سراسر تم‌ها مستقل باقی می‌مانند.

حالت‌ها ​

وضعیتتوضیحات
: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

پشتیبانی مرورگر ​

  • قوانین بخش نشانگر را با قاعدهٔ at-rule @scope محدوده‌بندی می‌کند؛ مرورگرهایی که از @scope پشتیبانی نمی‌کنند آن قوانین محدوده‌شده را نادیده می‌گیرند.

مرتبط ​

  • progress-circle — شکل دایره‌ای همان نوار پیشرفت معین.