@skbkontur/mini-skeleton

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

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>

Пропы

По-умолчанию установлены стандартные цвета. Но их можно переопределить через пропы backgroundColor и iconColor.

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',
  },
};

<div style={styles.containerStyle}>
  <div style={styles.elementStyle}>
    <ArticleSkeleton />
    Article
  </div>
  <div style={styles.elementStyle}>
    <ArticleSkeleton backgroundColor={'#F0F0F0'} iconColor={'#D6D6D6'} />
    Article Colored
  </div>
</div>