CSS: progress

.instui-progress · seasmhach — Barra dul chun cinn shonrach le méadar daite, méideanna, agus lipéad luacha roghnach.

'.value' mar chomhghleacaí le '.bar', araon ina bpáistí den root — ag léiriú conas a chuireann progress-circle a chuid féin '.value' istigh. Níl staid neamhchinnte ag InstUI; is buille faoi thuairim amháin do pantoken é :indeterminate (an dúchais <progress> gan tréith value), ag beochan .bar mar mhír sleamhnáin agus ag cur i bhfolach .value toisc nach bhfuil aon uimhir bhríomhar le taispeáint. Níl staid neamhchinnte ag <meter>, mar sin ní bhíonn tionchar air.

Source: progress.css

Inrochtaineacht

Úsáid <progress> bunaidh le haghaidh raon críochnaithe tasc bunaithe ar nialas agus <meter> nuair atá an íosmhéid neamh-nialasach. Tabhair ainm inacmhainne d’aon cheann de na heilimintí trína chur istigh i <label> nó trína nascleanúint le <label> ar leith trí mheaitseáil luachanna for agus id.

Úsáid

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

Samplaí

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>

Struchtúr

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

Modhnóirí

Modhnóir	Cur síos
.-color-brand	Dath meter branda.
.-color-danger	Dath meter contúirte.
.-color-info	Dath meter eolais.
.-color-inverse	Do chúlraí dorcha.
.-color-primary-inverse	Dath meter ar dhorcha (inmhalartaithe bunúsach).
.-color-success	Dath meter rathúnais.
.-color-warning	Dath meter rabhaidh.
.-meter-color-alert	As dáta — use .-color-warning.
.-meter-color-brand	As dáta — use .-color-brand.
.-meter-color-danger	As dáta — use .-color-danger.
.-meter-color-info	As dáta — use .-color-info.
.-meter-color-success	As dáta — use .-color-success.
.-meter-color-warning	As dáta — use .-color-warning.
.-render-value-inside	Cuireann sé .value laistigh den rian, ailínithe lena thús, in ionad é a chur taobh leis; stíligh é ionas go mbeidh sé léite go soiléir thar dhath an mhéadair.
.-should-animate	Interaction — Animate meter changes over half a second.
.-size-large	Mór. Ainm fhadaaistear de -size-lg.
.-size-lg	Mór.
.-size-md	Meán (réamhshocraithe).
.-size-medium	Meán (réamhshocraithe). Ailias fhada ar -size-md.
.-size-sm	Beag.
.-size-small	Beag. Ainm fhadaaistear de -size-sm.
.-size-x-small	Breise-beag. Ainm fhadaaistear de -size-xs.
.-size-xs	Breise-beag.

Codanna

Cuid	Cur síos
.bar	An barra mhéadair líonta.
.value	Téacs an luach in aice leis an mbarra.

Fo-eilimintí

Fo-eilimint	Cur síos
:::indeterminate	Saincheaptha, ní chuid de InstUI é. Tá sé i bhfeidhm ach ar a native <progress> nach bhfuil an tréith value aige; cuireann sé beochan ar .bar mar ghné sleamhnach agus cuireann sé .value i bhfolach.
::after	Tarraingíonn sé rialach bhun an rian mar shraith féin os cionn an mhéadair, ionas go bhfanann an teorainn iomlán agus an teorainn bhun neamhspleách thar théamaí.

Stáit

Stát	Cur síos
:indeterminate	—

Airíonna saincheaptha

Airí	Cineál	Réamhshocraithe	Cur síos
--max	<number>	—	An luach uasta dul chun cinn (réamhshocraithe 100).
--min	<number>	—	An luach íosta don meter (réamhshocraithe 0).
--value	<number>	—	An luach reatha ar an dul chun cinn.
--value-max	<number>	—	@alias {@link --max} An luach uasta dul chun cinn (réamhshocraithe 100).
--value-now	<number>	—	@alias Ailias do --value.

Beochana

Beochan	Cur síos
pantoken-progress-indeterminate	—

Tóicíní a úsáideadh

Token	Cineál	Luach
--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

Tacaíocht bhrabhsálaí

Scópaíonn sé rialacha 'meter part' leis an at-reglóg @scope; déanann brabhsálaithe nach dtacaíonn le @scope neamhaird ar na rialacha scóipithe sin.

Gaolmhar

• progress-circle — Foirm chiorclach den dul chun cinn sonraithe céanna.