CSS: skeleton-loader

.instui-skeleton-loader — He tohu whakapaipai mō ngā ihirangi kāore anō kia utaina.

TIP

Whakawhānui JS — Ka tahuri te CSS o tēnei waahanga, ā, ka mahi anō ia i tōna ake; whakakotahitia ki @pantoken/interactions kia tāpiri i te whanonga tuitui. Tirohia te tāblata whakarerekētanga kei raro.

Wātea mō te katoa

Tohu te kaituku whakapaipai kia aria-hidden="true". Whakanohoia te aria-busy ki te rohe ihirangi matua, me tētahi tūnga tuatahi kua pūtea, ā, me tētahi whakatūpato i waho atu o taua rohe. Whakamahia te initSkeletonLoading nō te interactions package kia pānui i te āhua utaina o te mātua. Kaua ngā āhua e whiwhi aronga.

Ngā Whakamahi

@import "@pantoken/plugin-custom-components/custom-components.css";

Hanganga

.instui-skeleton-loader
  .shape
  .skeleton-row (0..n)
    .shape

flowchart TD n0[".instui-skeleton-loader"]:::cssdoc-root n1(".shape"):::cssdoc-part n2(".skeleton-row"):::cssdoc-part n3(".shape"):::cssdoc-part n0 --> n1 n2 --> n3 n0 -->|0..n| n2 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
.-size-lg	Rārangi kuputuhi nui.
.-size-md	Rārangi kuputuhi rahi (taunoa).
.-size-sm	Rārangi kuputuhi iti.
.-size-xl	Rārangi kuputuhi tino-nui.
.-size-xs	Rārangi kuputuhi tino-iti.
.-size-xxl	Rārangi kuputuhi nui rawa.
.-size-xxs	Rārangi kuputuhi rahi mō te legend.
.-type-avatar	He tūāhua porowhita mō te avatar, mō te rahi waenganui anake.
.-type-image	He tūāhua whakaahua, mō te rahi waenganui anake.
.-type-text	He pae kuputuhi (taunoa).

Wāhanga

Wāhanga	Whakamārama
.shape	Ko te mata tūāhua tapahia kua whakaritea ki te rahi mō te momo kaituhi kua tohua.
.skeleton-row	He kapi rārangi kuputuhi e tau ai te mokowā poutū.

Ngā pseudo-kōwae

Pseudo-kōwae	Whakamārama
::before	—

Ngā taonga ritenga

Rawa	Momo	Taunoa	Whakamārama
--pantoken-skeleton-sweep	<percentage>	0%	—

Ngā Whakaari

Whakaari	Whakamārama
pantoken-skeleton-sweep	—

Ngā Conditions

Momo	Pātai	Whakamārama
media	(prefers-reduced-motion: reduce)	—

Ngā tohu i whakamahia

Token	Momo	Uara
--instui-component-skeleton-loader-avatar-border-radius	<length>	999rem
--instui-component-skeleton-loader-background-color	<color>	LightDarklight-dark(#8D959F, #5F6E7A)
--instui-component-skeleton-loader-bezier	—	0.42, 0, 0.58, 1
--instui-component-skeleton-loader-duration	<time>	1500ms
--instui-component-skeleton-loader-image-border-radius	<length>	0.5rem
--instui-component-skeleton-loader-shimmer-color	<color>	LightDarklight-dark(#AAB0B5, #737F8A)
--instui-component-skeleton-loader-text-border-radius	<length>	0.25rem
--instui-component-skeleton-loader-text-height-lg	<length>	1.75rem
--instui-component-skeleton-loader-text-height-md	<length>	1.5rem
--instui-component-skeleton-loader-text-height-sm	<length>	1.25rem
--instui-component-skeleton-loader-text-height-xl	<length>	2rem
--instui-component-skeleton-loader-text-height-xs	<length>	1rem
--instui-component-skeleton-loader-text-height-xxl	<length>	2.25rem
--instui-component-skeleton-loader-text-height-xxs	<length>	0.75rem
--instui-component-skeleton-loader-text-padding-lg	<length>	0.21875rem
--instui-component-skeleton-loader-text-padding-md	<length>	0.1875rem
--instui-component-skeleton-loader-text-padding-sm	<length>	0.15625rem
--instui-component-skeleton-loader-text-padding-xl	<length>	0.25rem
--instui-component-skeleton-loader-text-padding-xs	<length>	0.125rem
--instui-component-skeleton-loader-text-padding-xxl	<length>	0.28125rem
--instui-component-skeleton-loader-text-padding-xxs	<length>	0.1875rem
--instui-size-interactive-height-md	<length>	2.5rem
--pantoken-skeleton-height	<length>	1.5rem
--pantoken-skeleton-padding	<length>	0.1875rem
--pantoken-skeleton-radius	<length>	0.25rem