类型

@cloud-ru/ds-typography -?),又作"相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

Typography . . . . . . Комбинация variant × size × weight (原始内容存档于2018-09-31) (中文(简体) )h1编号 :h2编号 :p编号 :label{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 as。 。 。 .

Когда

• {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得怎样.
• {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 font-size编号 :font-weight。 。 。 .

Когда не нужен Typography{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢, Button {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}标签 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}.

Анатомия

备选案文

校对:Soup display - крупные промо заголовки заголовки, headline - заголовки,секций, title {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}你应该知道 {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}, label {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢, body ——основной.

大小

说吧 s, (中文(简体) ), m, (中文(简体) ), l。 。 。 。 @cloud-ru/ds-figma-variables。 。 。 .

重量

Начертание: regular - дефолт, thin , mono ——моноширинное (коды, ,ID.

Установка

pnpm add @cloud-ru/ds-typography

import { Typography, VARIANT, SIZE, WEIGHT } from '@cloud-ru/ds-typography'

Примеры

Базовое

import { Typography } from '@cloud-ru/ds-typography';

export function TypographyBasic() {
  return <Typography>Обычный body-текст по умолчанию</Typography>;
}

Заголовок

import { Typography } from '@cloud-ru/ds-typography';

export function TypographyHeadline() {
  return (
    <Typography variant='headline' size='l'>
      Заголовок страницы
    </Typography>
  );
}

Моноширинный

import { Typography } from '@cloud-ru/ds-typography';

export function TypographyMono() {
  return (
    <Typography variant='body' weight='mono'>
      const answer = 42
    </Typography>
  );
}

Кастомный(полиморфизм)

import { Typography } from '@cloud-ru/ds-typography';

export function TypographyPolymorphic() {
  return (
    <Typography as='span' variant='body'>
      Body внутри inline-потока
    </Typography>
  );
}

道具

类型法

相关类型

• TypographySize =: "l" | "m" | "s"

• TypographyVariant =: "body" | "display" | "headline" | "label" | "title"

• TypographyWeight =: "mono" | "regular" | "thin"