CSS: progress ​

.instui-progress · stable — Thanh tiến trình xác định với thanh đo có màu, các kích thước, và nhãn giá trị tùy chọn.

.value là một phần cùng cấp với .bar, cả hai đều là con của root — phản chiếu cách progress-circle lồng phần .value của nó. InstUI không có trạng thái indeterminate; :indeterminate là ước đoán tốt nhất chỉ dành cho pantoken (native <progress> không có thuộc tính value), làm hoạt ảnh .bar như một đoạn trượt và ẩn .value vì không có số ý nghĩa để hiển thị. <meter> không có trạng thái indeterminate, nên không bị ảnh hưởng.

Source: progress.css

Khả năng truy cập ​

Dùng native <progress> cho phạm vi hoàn thành công việc bắt đầu từ không và <meter> khi giá trị tối thiểu khác không. Đặt tên truy cập cho phần tử bằng cách lồng nó trong <label> hoặc liên kết một <label> riêng bằng cách ghép các giá trị for và id tương ứng.

Sử dụng ​

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

Các ví dụ ​

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>

Cấu trúc ​

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

Bộ sửa ​

Bộ sửaMô tả
.-color-brandMàu hiển thị meter thương hiệu.
.-color-dangerMàu hiển thị meter nguy hiểm.
.-color-infoMàu hiển thị meter thông tin.
.-color-inverseDành cho nền tối.
.-color-primary-inverseMàu hiển thị meter trên nền tối (primary inverse).
.-color-successMàu hiển thị meter thành công.
.-color-warningMàu hiển thị meter cảnh báo.
.-meter-color-alertKhông khuyến nghị — use .-color-warning.
.-meter-color-brandKhông khuyến nghị — use .-color-brand.
.-meter-color-dangerKhông khuyến nghị — use .-color-danger.
.-meter-color-infoKhông khuyến nghị — use .-color-info.
.-meter-color-successKhông khuyến nghị — use .-color-success.
.-meter-color-warningKhông khuyến nghị — use .-color-warning.
.-render-value-insideHiển thị .value bên trong track, căn về phía bắt đầu của nó thay vì hiển thị cạnh bên; định kiểu để dễ đọc trên màu của thanh đo.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeLớn. Bút danh dài của -size-lg.
.-size-lgLớn.
.-size-mdTrung bình (mặc định).
.-size-mediumTrung bình (mặc định). Bản alias dài của -size-md.
.-size-smNhỏ.
.-size-smallNhỏ. Bút danh dài của -size-sm.
.-size-x-smallCực nhỏ. Bút danh dài của -size-xs.
.-size-xsCực nhỏ.

Phần ​

PhầnMô tả
.barThanh đo đã được lấp đầy.
.valueVăn bản giá trị bên cạnh thanh.

Phần tử giả ​

Phần tử giảMô tả
:::indeterminateTùy chỉnh, không phải một phần của InstUI. Chỉ áp dụng cho phần tử <progress> native khi thiếu thuộc tính value; thực hiện hoạt ảnh .bar như một đoạn trượt và ẩn .value.
::afterVẽ đường đáy của track như một lớp riêng nằm phía trên meter, để viền toàn bộ và viền dưới vẫn giữ độc lập giữa các chủ đề.

Trạng thái ​

Trạng tháiMô tả
:indeterminate—

Thuộc tính tuỳ chỉnh ​

Thuộc tínhKiểuMặc địnhMô tả
--max<number>—Giá trị tiến độ tối đa (mặc định 100).
--min<number>—Giá trị meter tối thiểu (mặc định 0).
--value<number>—Giá trị tiến độ hiện tại.
--value-max<number>—@alias {@link --max} Giá trị tiến độ tối đa (mặc định 100).
--value-now<number>—@alias Bí danh cho --value.

Hoạt ảnh ​

Hoạt ảnhMô tả
pantoken-progress-indeterminate—

Token tiêu thụ ​

TokenKiểuGiá trị
--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

Hỗ trợ trình duyệt ​

Phạm vi các quy tắc phần meter bằng at-rule @scope; các trình duyệt không hỗ trợ @scope sẽ bỏ qua những quy tắc được phạm vi đó.

Liên quan ​

  • progress-circle — Dạng vòng của cùng một thanh tiến trình xác định.