CSS: skeleton-loader ​

.instui-skeleton-loader — Զարդարիչ պահակ՝ այն բովանդակության համար, որը դեռ չի բեռնվել։

TIP

JS բարելավում — Այս կոմպոնենտի CSS–ը ինքնուրույն ներկառում և գործում է; զուգակցել այն @pantoken/interactions–ի հետ ինտերակտիվ վարք ավելացնելու համար։ Լրացուցիչ դիտեք մոդիֆիկատորների աղյուսակը.

Մուտքականություն ​

Մարկացրեք դեկորատիվ լոադերը aria-hidden="true"։ Տեղադրեք aria-busy ծնողական պարունակության շրջանում, սկզբում դատարկ վիճակով և ազդարարությունը դրան դուրս։ Օգտագործեք initSkeletonLoading-ը` the interactions փաթեթից՝ ծնողի լոդավորման վիճակը հայտարարելու համար։ Ձևերը չպետք է ստանան ֆոկուս։

Օգտագործում ​

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

Կառուցվածք ​

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

Մոդիֆիկատորներ ​

ՄոդիֆիկատորՆկարագիր
.-size-lgՄեծ տեքստային տող։
.-size-mdՄիջին տեքստային տող (ստանդարտ).
.-size-smՓոքր տեքստային տող։
.-size-xlՇատ մեծ տեքստային տող։
.-size-xsՇատ փոքր տեքստային տող։
.-size-xxlԱմենամեծ տեքստային տող։
.-size-xxsՏեքստային տող՝ լեգենդի չափի։
.-type-avatarՇրջանաձև avatar-ի պահեստամաս, միայն միջին չափսով։
.-type-imageՊատկերի պահեստամաս, միայն միջին չափսով։
.-type-textՏեքստային գոտի (նախնական).

Մասեր ​

ՄասՆկարագիր
.shapeԿլիպացված պահեստային մակերես, չափված ընտրված loader տեսակի համար։
.skeleton-rowԿրկնվող տեքստային տողերի պարուրիչ, որը կիրառում է ուղղահայաց բացատներ։

Պսևդո-էլեմենտներ ​

Պսևդո-էլեմենտՆկարագիր
::before—

Անհատական հատկություններ ​

ԱռանձնահատկությունՏիպԸնթացիկՆկարագիր
--pantoken-skeleton-sweep<percentage>0%—

Անիմացիաներ ​

ԱնիմացիաՆկարագիր
pantoken-skeleton-sweep—

Պայմաններ ​

ՏիպՀարցումՆկարագիր
media(prefers-reduced-motion: reduce)—

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--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