CSS: progress

.instui-progress · stable — Μια προσδιορισμένη γραμμή προόδου με έγχρωμο μετρητή, μεγέθη και προαιρετική ετικέτα τιμής.

.value είναι αδελφικό στοιχείο του .bar, και τα δύο παιδιά της ρίζας — αντικατοπτρίζοντας το πώς το progress-circle εμφωλεύει το δικό του μέρος .value. Το InstUI δεν έχει ακαθόριστη κατάσταση· το :indeterminate είναι μια εκτίμηση μόνο για pantoken (native <progress> χωρίς το χαρακτηριστικό value), που κινούμενο κάνει το .bar να λειτουργεί ως κινούμενο τμήμα και κρύβει το .value επειδή δεν υπάρχει ουσιαστικός αριθμός για εμφάνιση. Το <meter> δεν έχει ακαθόριστη κατάσταση, οπότε δεν επηρεάζεται.

Source: progress.css

Προσβασιμότητα

Χρησιμοποιήστε native <progress> για εύρος ολοκλήρωσης εργασίας που ξεκινάει από μηδέν και <meter> όταν το ελάχιστο δεν είναι μηδέν. Δώστε σε οποιοδήποτε από τα στοιχεία προσβάσιμη ονομασία, εμβάλλοντάς το μέσα σε <label> ή συνδέοντας ένα ξεχωριστό <label> μέσω ταιριαστών τιμών for και id.

Χρήση

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

Παραδείγματα

Nested label

<label>
  Uploading Document: <progress class="instui-progress -color-brand" value="70">70%</progress>
</label>

External label

<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

label
  .instui-progress
    .bar
    .value

// Variant: external-label

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	Χρώμα μετρητή για το brand.
.-color-danger	Χρώμα μετρητή κινδύνου.
.-color-info	Χρώμα πληροφοριακού μετρητή.
.-color-inverse	Για σκούρα φόντα.
.-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.
.-render-value-inside	Αποδίδει το .value μέσα στην τροχιά, ευθυγραμμισμένο στην αρχή της, αντί δίπλα της· στιλ για ευαναγνωσιμότητα πάνω από το χρώμα του μετρητή.
.-should-animate	Interaction — 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.

Κινήσεις (animations)

Κίνηση	Περιγραφή
pantoken-progress-indeterminate	—

Καταναλωμένα tokens

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 — Η κυκλική μορφή της ίδιας προσδιορισμένης προόδου.