Компоненты для схематичного показа будущего контента.

MiniSkeleton

import { ArticleSkeleton, ChartSkeleton, DocSkeleton, FormSkeleton, ListSkeleton, TableSkeleton } from '@skbkontur/mini-skeleton';

const styles = {
  elementStyle: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  containerStyle: {
    display: 'flex',
    flexDirection: 'row',
    gap: '5px',
  },
};

<div style={styles.containerStyle}>
  <div style={styles.elementStyle}>
    <ArticleSkeleton />
    Article
  </div>
  <div style={styles.elementStyle}>
    <ChartSkeleton />
    Chart
  </div>
  <div style={styles.elementStyle}>
    <DocSkeleton />
    Doc
  </div>
  <div style={styles.elementStyle}>
    <FormSkeleton />
    Form
  </div>
  <div style={styles.elementStyle}>
    <ListSkeleton />
    List
  </div>
  <div style={styles.elementStyle}>
    <TableSkeleton />
    Table
  </div>
</div>

Пропы

По умолчанию используются токены @skbkontur/colors (shapeOtherNeutralFaintSolid и shapeConstHeavyWhite). В приложении должны быть подключены CSS-переменные Kontur Colors (например, @skbkontur/colors/tokens-default/light.css). Цвета можно переопределить через пропы backgroundColor и iconColor.

import {
  ArticleSkeleton,
  ChartSkeleton,
  DocSkeleton,
  FormSkeleton,
  ListSkeleton,
  miniSkeletonExampleBackgroundColor,
  miniSkeletonExampleIconColor,
  TableSkeleton,
} from '@skbkontur/mini-skeleton';

const styles = {
  elementStyle: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  containerStyle: {
    display: 'flex',
    flexDirection: 'row',
  },
};

<div style={styles.containerStyle}>
  <div style={styles.elementStyle}>
    <ArticleSkeleton />
    Article
  </div>
  <div style={styles.elementStyle}>
    <ArticleSkeleton
      backgroundColor={miniSkeletonExampleBackgroundColor}
      iconColor={miniSkeletonExampleIconColor}
    />
    Article Colored
  </div>
</div>