CSS: progress ​

.instui-progress · יציב — סרגל התקדמות קבוע עם מד צבעוני, גדלים ותווית ערך אופציונלית.

.value הוא אח/ות של .bar, שניהם ילדים של השורש — משקף כיצד progress-circle מקנן את חלקו .value. ל-InstUI אין מצב בלתי-מוחלט; :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צבע מד המדידה עבור רקע‑כהה (הפכי ראשי).
.-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טקסט הערך לצד הסרגל.

פיסואו־אלמנטים ​

פיסואו־אלמנטתיאור
:::indeterminateמותאם אישית, אינו חלק מ-InstUI. חל רק על native <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 — הצורה המעגלית של אותה התקדמות קבועה.