Resumen
Skeleton proporciona una forma de marcador de posición con colores de tema y un resaltado en movimiento. Compón formas con el diseño del contenido que se está cargando. La aplicación controla el estado de carga y los diseños específicos de cada funcionalidad.
”Uso”
layout="inline" para colocar un marcador de posición dentro de una línea de texto.
Las dimensiones numéricas usan píxeles. También se admiten longitudes CSS, como porcentajes y em. Sin dimensiones, el marcador de posición ocupa el ancho disponible y usa la altura de fuente heredada. Use dimensiones iguales y borderRadius="50%" para un círculo.
SKELETON_HEIGHT_SIZES proporciona alturas compartidas para xs (13px), s (16px), m (24px), l (32px) y xl (40px). Mantenga las dimensiones específicas del diseño en la aplicación.
Cada Skeleton representa un marcador de posición. Mantenga las líneas repetidas, el espaciado entre líneas de texto y las regiones de carga en componentes de la aplicación que encapsulen el elemento primitivo.
Movimiento y accesibilidad
Los esqueletos son decorativos y tienenaria-hidden="true" de forma predeterminada. Mantenga los anuncios de carga en una región de estado propiedad del host en lugar de anunciar cada forma. Skeleton no acepta elementos secundarios.
El resaltado se mueve de izquierda a derecha en un bucle de entrada y salida suave de 1,5 segundos y se oculta cuando el usuario prefiere movimiento reducido. Pase animated={false} para un marcador de posición estático.
Composición y tema
Las props nativas,className, style y ref se aplican al span del marcador de posición. Use render para componer otro elemento. Los estilos nativos explícitos anulan las props de dimensión y color.
Los colores base y de resaltado usan de forma predeterminada el fondo terciario del tema y un fondo transparente más claro. Use baseColor, highlightColor y borderRadius para anularlos. Las esquinas se mantienen redondeadas, incluso cuando el tema usa superelipses. El radio predeterminado usa el token de tema smRound (4px). Pase themeCssVariables.border.radius.mdRound de twenty-ui/theme para esquinas de 8px. Los radios personalizados en píxeles y CSS siguen siendo compatibles, incluidos borderRadius={80} para una cápsula estrecha y borderRadius="50%" para un círculo. No se necesita ningún proveedor específico de skeleton ni importar una hoja de estilos después de cargar twenty-ui/style.css y el tema de la interfaz de usuario.
”Props”
boolean
predeterminado:"true"
Animate the highlight by default. Reduced-motion preferences always disable animation.
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"
predeterminado:"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.