CSS: skeleton-loader

.instui-skeleton-loader — Suíomh maisiúil áitshlánaithe do ábhar nach bhfuil luchtaithe fós.

TIP

Feabhsú JS — Cuireann CSS an chomhpháirte seo léiriú agus oibríocht air dá chuid féin; comhcheangail é le @pantoken/interactions chun an iompar idirghníomhach a chur leis. Féach an tábla modhnóirí thíos.

Inrochtaineacht

Mark the decorative loader aria-hidden="true". Put aria-busy on the parent content region, le stádas tosaigh folamh agus rabhadh lasmuigh den réigiún sin. Úsáid initSkeletonLoading ón pacáiste idirghníomhaíochtaí chun staid luchtaithe an tuismitheora a fhógairt. Níor chóir go bhfaigheadh cruthanna fócas.

Úsáid

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

Samplaí

<div style="display: flex; align-items: center; gap: 1rem; max-inline-size: 24rem">
  <div class="instui-skeleton-loader -type-avatar" aria-hidden="true">
    <div class="shape"></div>
  </div>
  <div style="flex: 1">
    <div class="instui-skeleton-loader -type-text -size-md" aria-hidden="true">
      <div class="skeleton-row" style="inline-size: 45%"><div class="shape"></div></div>
      <div class="skeleton-row" style="inline-size: 72%"><div class="shape"></div></div>
    </div>
  </div>
</div>

Struchtúr

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

Modhnóirí

Modhnóir	Cur síos
.-size-lg	Sraith téacs mhór.
.-size-md	Sraith téacs mheánmhéide (réamhshocraithe).
.-size-sm	Sraith téacs bheag.
.-size-xl	Sraith téacs an-mhór.
.-size-xs	Sraith téacs an-bheag.
.-size-xxl	Sraith téacs is mó.
.-size-xxs	Sraith téacs i méid 'legend'.
.-type-avatar	Áitshlánú avatar cruinn, méid meánmhéide amháin.
.-type-image	Áitshlánú íomhá, méid meánmhéide amháin.
.-type-text	Bar téacs (réamhshocraithe).

Codanna

Cuid	Cur síos
.shape	Dromchla áitshlánaithe gearrtha atá méidithe don chineál lódála roghnaithe.
.skeleton-row	Clúdach sraithe téacs athchleachtach a chuireann spásáil ingearach i bhfeidhm.

Fo-eilimintí

Fo-eilimint	Cur síos
::before	—

Airíonna saincheaptha

Airí	Cineál	Réamhshocraithe	Cur síos
--pantoken-skeleton-sweep	<percentage>	0%	—

Beochana

Beochan	Cur síos
pantoken-skeleton-sweep	—

Coinníollacha

Cineál	Ceist	Cur síos
media	(prefers-reduced-motion: reduce)	—

Tóicíní a úsáideadh

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