Обзор
Skeleton предоставляет форму-заполнитель с цветами темы и движущимся бликом. Создавайте формы в макете загружаемого содержимого. Приложение управляет состоянием загрузки и макетами, специфичными для функций.
Использование
layout="inline", чтобы разместить заполнитель внутри строки текста.
Для числовых размеров используются пиксели. Также поддерживаются длины CSS, например проценты и em. Без указания размеров заполнитель занимает доступную ширину и использует унаследованную высоту шрифта. Для круга используйте одинаковые размеры и borderRadius="50%".
SKELETON_HEIGHT_SIZES предоставляет общие значения высоты для xs (13px), s (16px), m (24px), l (32px) и xl (40px). Храните размеры, зависящие от макета, в приложении.
Каждый Skeleton отображает один заполнитель. Храните повторяющиеся строки, интервалы между строками текста и области загрузки в компонентах приложения, которые оборачивают примитив.
Анимация и доступность
Скелетоны являются декоративными и по умолчанию имеютaria-hidden="true". Размещайте объявления о загрузке в области статуса, управляемой хостом, вместо объявления каждой формы. Skeleton не принимает дочерние элементы.
Подсветка перемещается слева направо в цикле ease-in-out длительностью 1,5 секунды и скрывается, если пользователь предпочитает уменьшенную анимацию. Передайте animated={false} для статического заполнителя.
Композиция и тема
Нативные свойства,className, style и ref применяются к span заполнителя. Используйте render для компоновки другого элемента. Явно заданные нативные стили переопределяют свойства размеров и цвета.
По умолчанию для основного цвета и цвета подсветки используются третичный фон темы и более светлый прозрачный фон. Используйте baseColor, highlightColor и borderRadius, чтобы переопределить их. Углы остаются скруглёнными, в том числе когда тема использует сквирклы. Радиус по умолчанию использует токен темы smRound (4px). Передайте themeCssVariables.border.radius.mdRound из twenty-ui/theme для углов с радиусом 8px. Пользовательские радиусы в пикселях и CSS по-прежнему поддерживаются, включая borderRadius={80} для узкой капсулы и borderRadius="50%" для круга. После загрузки twenty-ui/style.css и темы UI не требуется специальный для скелетона провайдер или импорт таблицы стилей.
Свойства
boolean
по умолчанию:"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"
по умолчанию:"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.