@eisgs/typography v1.3.1

Типы

В зависимости от типа меняется размер и начертание текста.

  const sampleText = 'Съешь же ещё этих мягких французских булок, да выпей чаю';

  <>
    <Typography type="h1">{sampleText}</Typography>
    <Typography type="h2">{sampleText}</Typography>
    <Typography type="h3">{sampleText}</Typography>
    <Typography type="h4">{sampleText}</Typography>
    <Typography type="p1">{sampleText}</Typography>
    <Typography type="p2">{sampleText}</Typography>
    <Typography type="p3">{sampleText}</Typography>
    <Typography type="p2compact">{sampleText}</Typography>
    <Typography type="caption">{sampleText}</Typography>
    <Typography type="button">{sampleText}</Typography>
    <Typography type="link">{sampleText}</Typography>
    <Typography type="plink">{sampleText}</Typography>
  </>

Вес шрифта

weight явно задает вес шрифта независимо от типа.

  const sampleText = 'Съешь же ещё этих мягких французских булок, да выпей чаю';

  <>
    <Typography type="p1" weight='bold'>{sampleText}</Typography>
    <Typography type="p1" weight='bolder'>{sampleText}</Typography>
    <Typography type="p1" weight='lighter'>{sampleText}</Typography>
    <Typography type="p1" weight='normal'>{sampleText}</Typography>
    <Typography type="p1" weight={500}>{sampleText}</Typography>
    <Typography type="p1" weight={700}>{sampleText}</Typography>
    <Typography type="p2">{sampleText}</Typography>
    <Typography type="p2" weight='bold'>{sampleText}</Typography>
    <Typography type="p3">{sampleText}</Typography>
    <Typography type="p3" weight='bold'>{sampleText}</Typography>
  </>

Расстояние между символами

spacing явно задает расстояние между буквами независимо от типа.

  const sampleText = 'Съешь же ещё этих мягких французских булок, да выпей чаю';

  <>
    <Typography type="p1" spacing={1}>{sampleText}</Typography>
    <Typography type="p1" spacing={2}>{sampleText}</Typography>
    <Typography type="p1" spacing={3}>{sampleText}</Typography>
    <Typography type="p1" spacing={4}>{sampleText}</Typography>
    <Typography type="p1" spacing={5}>{sampleText}</Typography>
    <Typography type="p1" spacing={6}>{sampleText}</Typography>
  </>

Высота строки

lineHeight явно задает высоту строки в пикселях независимо от типа.

  const sampleText = 'Съешь же ещё этих мягких французских булок, да выпей чаю';

  <>
    <Typography type="p1" lineHeight={10}>{sampleText}</Typography>
    <Typography type="p1" lineHeight={20}>{sampleText}</Typography>
    <Typography type="p1" lineHeight={30}>{sampleText}</Typography>
    <Typography type="p1" lineHeight={40}>{sampleText}</Typography>
    <Typography type="p1" lineHeight={50}>{sampleText}</Typography>
    <Typography type="p1" lineHeight={60}>{sampleText}</Typography>
  </>

Обрезка текста

ellipsisMaxLines обрезает текст при превышении указанного количества строк

  const sampleText = (count) => 'Съешь же ещё этих мягких французских булок, да выпей чаю. '.repeat(count);

  <div style={{maxWidth: 800}}>
    <Typography type="h1" ellipsisMaxLines={1}>{sampleText(3)}</Typography>
    <Typography type="h2" ellipsisMaxLines={2}>{sampleText(3)}</Typography>
    <Typography type="h3" ellipsisMaxLines={1}>{sampleText(4)}</Typography>
    <Typography type="h4" ellipsisMaxLines={3}>{sampleText(10)}</Typography>
    <Typography type="p1" ellipsisMaxLines={1}>{sampleText(10)}</Typography>
    <Typography type="p2" ellipsisMaxLines={2}>{sampleText(10)}</Typography>
    <Typography type="p3" ellipsisMaxLines={2}>{sampleText(10)}</Typography>
    <Typography type="p2compact" ellipsisMaxLines={2}>{sampleText(10)}</Typography>
    <Typography type="caption" ellipsisMaxLines={1}>{sampleText(10)}</Typography>
    <Typography type="button" ellipsisMaxLines={2}>{sampleText(10)}</Typography>
    <Typography type="link" ellipsisMaxLines={3}>{sampleText(10)}</Typography>
    <Typography type="link" ellipsisMaxLines={1}>{sampleText(10)}</Typography>
    <Typography type="plink" ellipsisMaxLines={3}>{sampleText(10)}</Typography>
    <Typography type="plink" ellipsisMaxLines={1}>{sampleText(10)}</Typography>
  </div>

Текст ссылка

  const text = 'Тестовый компонент';

  <Typography type="link">{text}</Typography>

Тип устройства для отображения (ИЖС)

Доступно три значения desktop, tablet, mobile. Отображение для desktop и tablet идентично.

  import { Radio } from '@eisgs/radio';

  const text = 'Тестовый компонент';
  const options = ['desktop', 'tablet', 'mobile'].map(item => ({id: item, description: item, code: item}));
  const types = ['h1', 'h2', 'h3', 'h4', 'h5', 'p1', 'p2', 'p3', 'caption', 'button', 'buttonSmall', 'link', 'plink'];
  
  const [view, setView] = React.useState(options[0].code);

  <>
    <Radio options={options} onChange={setView} value={view} />
    {types.map(type => <Typography type={type} view={view} key={type}>{text}</Typography>)}
  </>