CSS: progress ​

.instui-progress · stable — Renkli bir göstergesi, boyutları ve isteğe bağlı bir değer etiketi olan belirlenmiş ilerleme çubuğu.

.value, .bar'in kardeşidir; ikisi de kökün çocuklarıdır — bu, progress-circle'ın kendi .value parçasını iç içe koymasına benzer. InstUI'nin belirsiz (indeterminate) bir durumu yoktur; :indeterminate pantoken'e özgü en iyi tahmindir (yerel <progress>'ün value özniteliği olmadan); .bar'yı kayan bir segment olarak canlandırır ve gösterilecek anlamlı bir sayı olmadığından .value'yi gizler. <meter>'in belirsiz bir durumu yoktur, bu yüzden etkilenmez.

Source: progress.css

Erişilebilirlik ​

Sıfır tabanlı görev tamamlama aralığı için native <progress> kullanın ve minimum sıfır değilse <meter> kullanın. Her iki elemana da erişilebilir bir isim vermek için onu <label> içine yerleştirin veya ayrı bir <label> ile eşleşen for ve id değerleri aracılığıyla ilişkilendirin.

Kullanım ​

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

Örnekler ​

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>

Yapı ​

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

Değiştiriciler ​

DeğiştiriciAçıklama
.-color-brandMarka (brand) sayaç rengi.
.-color-dangerTehlike (danger) sayaç rengi.
.-color-infoBilgilendirici (informational) sayaç rengi.
.-color-inverseKoyu arka planlar için.
.-color-primary-inverseKoyu zeminde (primary inverse) sayaç rengi.
.-color-successBaşarılı (success) sayaç rengi.
.-color-warningUyarı (warning) sayaç rengi.
.-meter-color-alertKullanımdan kaldırıldı — use .-color-warning.
.-meter-color-brandKullanımdan kaldırıldı — use .-color-brand.
.-meter-color-dangerKullanımdan kaldırıldı — use .-color-danger.
.-meter-color-infoKullanımdan kaldırıldı — use .-color-info.
.-meter-color-successKullanımdan kaldırıldı — use .-color-success.
.-meter-color-warningKullanımdan kaldırıldı — use .-color-warning.
.-render-value-insideİz parçasının içinde, başlangıcına hizalanmış şekilde .value'ı render eder; metre renginin üzerindeki okunabilirlik için stil verin.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeBüyük. -size-lg'ın uzun biçimli takma adı.
.-size-lgBüyük.
.-size-mdOrta (varsayılan).
.-size-mediumOrta (varsayılan). -size-md için uzun biçimli takma ad.
.-size-smKüçük.
.-size-smallKüçük. -size-sm'ın uzun biçimli takma adı.
.-size-x-smallEkstra küçük. -size-xs'ın uzun biçimli takma adı.
.-size-xsEkstra küçük.

Bölümler ​

ParçaAçıklama
.barDoldurulmuş gösterge çubuğu.
.valueÇubuğun yanındaki değer metni.

Sözde elemanlar ​

Sözde elemanAçıklama
:::indeterminateÖzel, InstUI'nin parçası değil. Sadece value özniteliği eksik olan yerel bir <progress> için uygulanır; .bar'yi kayan bir segment olarak canlandırır ve .value'ü gizler.
::afterİz hattının alt kuralını metre üzerinde ayrı bir katman olarak çizer, böylece tam kenarlık ve alt kenarlık temalar arasında bağımsız kalır.

Durumlar ​

DurumAçıklama
:indeterminate—

Özel özellikler ​

ÖzellikTürVarsayılanAçıklama
--max<number>—Maksimum ilerleme değeri (varsayılan 100).
--min<number>—Minimum sayaç değeri (varsayılan 0).
--value<number>—Mevcut ilerleme değeri.
--value-max<number>—@alias {@link --max} Maksimum ilerleme değeri (varsayılan 100).
--value-now<number>—@alias --value için takma ad.

Animasyonlar ​

AnimasyonAçıklama
pantoken-progress-indeterminate—

Tüketilen tokenler ​

TokenTürDeğer
--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

Tarayıcı desteği ​

  • @scope at-kuralı ile metre parçası kurallarını kapsam içine alır; @scope desteği olmayan tarayıcılar bu kapsamlı kuralları yoksayar.

İlgili ​