@snack-uikit/typography
v0.6.2
Published
Текст во всех доступных стилях
Downloads
1,155
Readme
Typography
Installation
npm i @snack-uikit/typography
Example
import { Typography } from "@snack-uikit/typography";
<Typography
family='sans'
purpose='display'
size='s'
tag='h1'
className='some-element'
>
Some text
</Typography>
Также чтобы не указывать пропсы family, purpose и size, воспользуйтесь нужным предустановленным вариантом, например:
<Typography.SansDisplayS tag='h1' className='some-element'>
Some text
</Typography.SansDisplayS>
Все компоненты вида <Typography.{Family}{Purpose}{Size} />
генерируются автоматически при выполнении команды npm run build:packages
.
Как добавить новый компонент такого вида?
- Добавить новое свойство в один или несколько объектов FAMILY, PURPOSE, SIZE в файле
constants.ts
, который лежит вtypography/src/components/constants.ts
- Запустить скрипт compile в package.json пакета
@typography
"npm run build:typography-components && npm run build:constants && npm run build:index"
- Готово! Можете использовать
Typography
с новым свойством
Typography
Props
| name | type | default value | description |
|------|------|---------------|-------------|
| size* | enum Size: "s"
, "l"
, "m"
| - | Размер |
| purpose* | enum Purpose: "label"
, "body"
, "title"
, "display"
, "headline"
| - | Роль |
| family* | enum Family: "link"
, "sans"
, "light"
, "mono"
, "crossed-out"
| - | Шрифт |
| tag | enum Tag: "span"
, "h1"
, "h2"
, "h3"
, "h4"
, "h5"
, "h6"
, "div"
, "label"
, "p"
| span | HTML-тег |
| className | string
| - | CSS-класс |
| children | ReactNode
| - | Контент |