Salt la conținutul principal

Prezentare generală

Skeleton oferă o formă substitutivă cu culorile temei și o evidențiere în mișcare. Compune forme în aspectul conținutului care se încarcă. Aplicația gestionează starea de încărcare și aspectele specifice funcționalităților.

Utilizare

Skeleton se redă ca un bloc și nu devine niciodată mai lat decât containerul său. Utilizați layout="inline" pentru a plasa un substituent într-un rând de text. Dimensiunile numerice folosesc pixeli. Lungimile CSS, precum procentele și em, sunt de asemenea acceptate. Fără dimensiuni, substituentul umple lățimea disponibilă și folosește înălțimea moștenită a fontului. Folosiți dimensiuni egale și borderRadius="50%" pentru un cerc. SKELETON_HEIGHT_SIZES oferă înălțimi partajate pentru xs (13px), s (16px), m (24px), l (32px) și xl (40px). Păstrați dimensiunile specifice aspectului în aplicație. Fiecare Skeleton redă un substituent. Păstrați liniile repetate, spațierea liniilor de text și regiunile de încărcare în componentele aplicației care încadrează elementul primitiv.

Mișcare și accesibilitate

Scheletele sunt decorative și au implicit aria-hidden="true". Păstrați anunțurile de încărcare într-o regiune de stare deținută de gazdă, în loc să anunțați fiecare formă. Skeleton nu acceptă elemente copil. Evidențierea se deplasează de la stânga la dreapta într-o buclă ease-in-out de 1,5 secunde și este ascunsă atunci când utilizatorul preferă mișcare redusă. Transmiteți animated={false} pentru un substituent static.

Compoziție și temă

Proprietățile native, className, style și ref vizează span-ul substituentului. Folosiți render pentru a compune un alt element. Stilurile native explicite suprascriu proprietățile de dimensiune și culoare. Culorile de bază și de evidențiere folosesc implicit fundalul terțiar al temei și fundalul transparent mai deschis. Folosiți baseColor, highlightColor și borderRadius pentru a le suprascrie. Colțurile rămân rotunjite, inclusiv atunci când tema utilizează squircles. Raza implicită utilizează tokenul de temă smRound (4px). Transmite themeCssVariables.border.radius.mdRound din twenty-ui/theme pentru colțuri de 8px. Razele personalizate în pixeli și CSS rămân acceptate, inclusiv borderRadius={80} pentru o capsulă îngustă și borderRadius="50%" pentru un cerc. Nu este necesar niciun furnizor specific pentru skeleton sau import de foaie de stil după încărcarea twenty-ui/style.css și a temei UI.

Proprietăți

boolean
implicit:"true"
Animate the highlight by default. Reduced-motion preferences always disable animation.
Booleanish
Placeholders are decorative and hidden from assistive technology by default. The host owns loading announcements.
BackgroundColor
Placeholder background color. Defaults to the theme tertiary background.
BorderRadius<string | number>
Round corner radius in pixels or a CSS length. Defaults to the 4px smRound theme token. Use mdRound for 8px corners or a custom radius for circles and capsules.
string
CSS class merged with the placeholder class.
Height<string | number>
Placeholder height in pixels or a CSS length. Defaults to the inherited font height.
BackgroundColor
Animated highlight color. Defaults to the theme lighter transparent background.
"block" | "inline"
implicit:"block"
block renders a block without a text node. inline sizes and aligns the placeholder like a line of text.
Ref<HTMLSpanElement>
Ref to the placeholder span, or the element supplied through render.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Element or render callback composed through Base UI useRender.
CSSProperties
Native styles merged with the placeholder dimensions and colors. Explicit styles win.
Width<string | number>
Placeholder width in pixels or a CSS length. Defaults to the available width and never exceeds the container.