CSS: progress

.instui-progress · stable — He pae ahunga whakamua tauine me tētahi mita tae, ngā rahi, me tētahi tūtohu uara kōwhiringa.

.value he teina rānei mā .bar, e rua ngā tamariki o te pakiaka — e tohu ana i te āhua e ngutu ana te progress-circle i tōna ake wāhanga .value. Kāore ā InstUI he āhuatanga kore-tau; ko :indeterminate he whakapae pai anake ā-pantoken (native <progress> me te kore āhuatanga value), ka whakaorite i .bar hei wahi kauhoe ka huna i .value nā te kore he tau whai tikanga hei whakaatu. Kāore he āhuatanga kore-tau ā <meter>, nō reira kāore e pāngia.

Source: progress.css

Wātea mō te katoa

Whakamahia te <progress> taketake mō tētahi raweke oti mahi ā-tau me te tīmata i te kore, ā, whakamahia <meter> ina kua kore te iti te 0. Homai te ingoa whai wāhi ki tētahi o ēnei mā te whakanoho ki roto i <label> rānei mā te hono ki tētahi <label> rerekē mā te whakakotahi i ngā uara for me id.

Ngā Whakamahi

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

Ngā tauira

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>

Hanganga

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

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.-color-brand	Tae mita waitohu.
.-color-danger	Tae mita tūraru.
.-color-info	Tae mō te pānui mōhiohio.
.-color-inverse	Mō ngā papamuri pōuri.
.-color-primary-inverse	Tae mita mō runga-kore (kaha matua inverse).
.-color-success	Tae mita angitu.
.-color-warning	Tae mita whakatūpato.
.-meter-color-alert	Kua tukuna — use .-color-warning.
.-meter-color-brand	Kua tukuna — use .-color-brand.
.-meter-color-danger	Kua tukuna — use .-color-danger.
.-meter-color-info	Kua tukuna — use .-color-info.
.-meter-color-success	Kua tukuna — use .-color-success.
.-meter-color-warning	Kua tukuna — use .-color-warning.
.-render-value-inside	Ka whakaatu i .value i roto i te ara, kua tohua ki tōna tīmatanga, hei tāpiri atu ki tāna taha; āta hoahoa kia mārama te pānui ki runga i te tae o te mita.
.-should-animate	Interaction — Animate meter changes over half a second.
.-size-large	Nui. He ingoa roa mō -size-lg.
.-size-lg	Nui.
.-size-md	Waenganui (taunoa).
.-size-medium	Waenganui (taunoa). He ingoa roa mō -size-md.
.-size-sm	Ititi.
.-size-small	Ititi. He ingoa roa mō -size-sm.
.-size-x-small	Ititi rawa. He ingoa roa mō -size-xs.
.-size-xs	Ititi rawa.

Wāhanga

Wāhanga	Whakamārama
.bar	Te pae mita kua kī.
.value	Te kuputuhi uara kei te taha o te pae.

Ngā pseudo-kōwae

Pseudo-kōwae	Whakamārama
:::indeterminate	Whakaritea, ehara i te wāhanga o InstUI. Ka tika mō tētahi native <progress> kāore i a ia te āhuatanga value; ka whakaorite i .bar hei wahi kauhoe ka huna i .value.
::after	Ka tuhi i te ture raro o te ara hei paparanga motuhake ki runga i te mita, kia noho motuhake te huinga porowhita me te ture raro puta noa i ngā kaupapa kaupapa (themes).

Ngā āhuatanga

Tūnga	Whakamārama
:indeterminate	—

Ngā taonga ritenga

Rawa	Momo	Taunoa	Whakamārama
--max	<number>	—	Te uara teitei rawa mō te ahu whakamua (taunoa 100).
--min	<number>	—	Te uara iti rawa mō te mita (taunoa 0).
--value	<number>	—	Te uara ahunga whakamua o nāianei.
--value-max	<number>	—	@alias {@link --max} Te uara teitei rawa mō te ahu whakamua (taunoa 100).
--value-now	<number>	—	@alias Ingoa pānui mō --value.

Ngā Whakaari

Whakaari	Whakamārama
pantoken-progress-indeterminate	—

Ngā tohu i whakamahia

Token	Momo	Uara
--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

Tautoko pūtirotiro

• Ka tāwhai i ngā ture wāhanga mita ki te ture-ā-@scope; ka whakakorehia e ngā pūtirotiro kāore e tautoko ana i @scope aua ture kua tāwhai.

Hono

• progress-circle — Ko te āhua porowhita o taua pae ahunga whakamua tauine.