website/plasma-ui-docs/docs/components/Card.mdx - dev - sdds/plasma

website/plasma-ui-docs/docs/components/Card.mdx
221 строка7 KB
Vasiliy Loginevskiy
docs(plasma-ui-docs): Card: fix images
24 ноя 2022, 15:14
24 ноя 2022, 15:14a51192d
---
id: card
title: Card
---

import { PropsTable, Description, StorybookLink } from '@site/src/components';

# Card
Набор компонентов для создания карточек.

<StorybookLink name="Card" />

## Card
<Description name="Card" />
<PropsTable name="Card" />

## CardBody
<Description name="CardBody" />

## CardContent
<Description name="CardContent" />
<PropsTable name="CardContent" />

## CardMedia
<Description name="CardMedia" />
<PropsTable name="CardMedia" />

## CardHeadline1, ...
`... CardHeadline2, CardHeadline3, CardFootnote1, CardFootnote2` — типографика, поддерживающая изменение цвета с помощью свойства `view`.
<PropsTable name="CardHeadline1" />

## CardParagraph1, ...
`... CardParagraph2, CardBody1, CardBody2` — типографика, которой можно указать количество строк с помощью свойства `lines` и изменить цвет с помощью свойства `view`.
<PropsTable name="CardParagraph1" />

## Примеры

### Простая карточка
Представляет собой ответ в виде карточки, которая может содержать ячейку с изображением.
Включает в себя класс карточек нескольких видов.

```tsx live
import React from 'react';
import {
    Card,
    CardBody,
    CardMedia,
    CardContent,
    CardParagraph1,
    TextBox,
    TextBoxBigTitle,
    TextBoxBiggerTitle,
    TextBoxSubTitle,
    Button,
} from '@salutejs/plasma-ui';

export function App() {
    return (
        <div>
            <Card style={{ width: '22.5rem' }} tabIndex={0} outlined scaleOnFocus>
                <CardBody>
                    <CardMedia
                        src="/ui/images/320_320_0.jpg"
                        placeholder="/ui/images/320_320_1.jpg"
                        ratio="1 / 1"
                    />
                    <CardContent cover>
                        <TextBox>
                            <TextBoxBigTitle>Подзаголовок</TextBoxBigTitle>
                            <TextBoxBiggerTitle>Заголовок</TextBoxBiggerTitle>
                            <TextBoxSubTitle>Подпись</TextBoxSubTitle>
                        </TextBox>
                        <Button
                            text="Label"
                            view="primary"
                            size="s"
                            scaleOnInteraction={false}
                            outlined={false}
                            stretch
                            style={{ marginTop: '1em' }}
                            tabIndex={-1}
                        />
                    </CardContent>
                </CardBody>
            </Card>
            <Card style={{ width: '22.5rem', marginLeft: '0.75rem' }}>
                <CardBody>
                    <CardMedia
                        src="/ui/images/320_320_2.jpg"
                        placeholder="/ui/images/320_320_3.jpg"
                        ratio="1 / 1"
                    />
                    <CardContent cover>
                        <TextBox>
                            <TextBoxBigTitle>Киану Ривз</TextBoxBigTitle>
                            <TextBoxSubTitle>Актёр</TextBoxSubTitle>
                            <CardParagraph1 mt="6x" lines={4}>
                                Канадский актёр, кинопродюсер, и музыкант.
                            </CardParagraph1>
                            <TextBoxSubTitle>ru.wikipedia.org</TextBoxSubTitle>
                        </TextBox>
                    </CardContent>
                </CardBody>
            </Card>
        </div>
    );
}
```

### Карточка-список
Конструктор класса карточек, состоящих из списка ячеек `Cells`.
Представляет собой набор стилей и параметров для обертки списка ячеек в карточку.
Карточка-список может быть представлена в нескольких вариантах.

```tsx live
import React from 'react';
import {
    Card,
    CardContent,
    Cell,
    CellIcon,
    TextBox,
    TextBoxTitle,
    TextBoxBigTitle,
    TextBoxSubTitle,
    CellDisclosure,
    CellListItem,
} from '@salutejs/plasma-ui';
import { IconDownload } from '@salutejs/plasma-icons';

export function App() {
    return (
        <div>
            <Card style={{ width: '22.5rem' }}>
                <CardContent compact>
                    <Cell
                        contentLeft={
                            <CellIcon>
                                <IconDownload />
                            </CellIcon>
                        }
                        content={
                            <TextBox>
                                <TextBoxTitle>Title</TextBoxTitle>
                                <TextBoxSubTitle>Subtitle</TextBoxSubTitle>
                            </TextBox>
                        }
                        contentRight={<CellDisclosure />}
                    />
                </CardContent>
            </Card>
            <Card style={{ width: '22.5rem', marginLeft: '0.75rem' }}>
                <CardContent compact>
                    <Cell
                        content={<TextBoxBigTitle>Название раздела</TextBoxBigTitle>}
                        contentRight={<span style={{ marginTop: 5 }}>Detail</span>}
                    />
                    <CellListItem
                        contentLeft={
                            <CellIcon>
                                <IconDownload />
                            </CellIcon>
                        }
                        content={
                            <TextBox>
                                <TextBoxTitle>Title</TextBoxTitle>
                                <TextBoxSubTitle>Subtitle</TextBoxSubTitle>
                            </TextBox>
                        }
                        contentRight={<CellDisclosure />}
                    />
                </CardContent>
            </Card>
        </div>
    );
}
```

### Карточка с коротким ответом

```tsx live
import React from 'react';
import {
    Card,
    CardContent,
    Cell,
    TextBoxBigTitle,
    CellIcon,
    TextBoxBiggerTitle,
    TextBoxSubTitle,
} from '@salutejs/plasma-ui';
import { IconDownload } from '@salutejs/plasma-icons';

export function App() {
    return (
        <Card style={{ width: '20rem' }}>
            <CardContent compact>
                <Cell
                    content={<TextBoxBigTitle>Название раздела</TextBoxBigTitle>}
                    contentRight={<span style={{ marginTop: 5 }}>Detail</span>}
                />
                <Cell
                    contentLeft={
                        <CellIcon>
                            <IconDownload />
                        </CellIcon>
                    }
                    content={<TextBoxBiggerTitle>Value</TextBoxBiggerTitle>}
                    contentRight={
                        <CellIcon>
                            <IconDownload />
                        </CellIcon>
                    }
                    alignRight="center"
                />
                <TextBoxSubTitle>Description</TextBoxSubTitle>
            </CardContent>
        </Card>
    );
}
```