website/sdds-scan-docs/docs/components/Cell.mdx - dev - sdds/plasma

website/sdds-scan-docs/docs/components/Cell.mdx
68 строк2 KB
Alexander Lobyntsev
chore(sdds-scan-docs): init package
28 май 2025, 12:34
28 май 2025, 12:3447f57c7
---
id: cell
title: Cell
---

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

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

Компонент ячейки представляет собой стилизованные слоты для контента.

Также имеются вспомогательные компоненты (Textbox, TextTitle, TextSubtitle, TextLabel).

Они представляют собой стилизованный текст и слот для них.

## Примеры

### Базовое использование

```tsx live
import React from 'react';
import { Avatar, Cell } from '@salutejs/sdds-scan';
import { IconChevronRight } from '@salutejs/plasma-icons';

export function App() {
    return (
        <>
            <Cell
                contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
                size="m"
                contentRight={<IconChevronRight color="inherit" size="xs" />}
                title="Title"
                subtitle="Subtitle"
                label="Label"
            />
        </>
    );
}
```

### С использованием своих стилей или встроенных компонентов

```tsx live
import React from 'react';
import { Avatar, Cell , CellTextboxLabel , CellTextboxTitle , CellTextboxSubtitle, CellTextbox } from '@salutejs/sdds-scan';
import { IconChevronRight } from '@salutejs/plasma-icons';

export function App() {
    return (
        <>
            <Cell
                contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
                size="m"
                contentRight={<IconChevronRight color="inherit" size="xs" />}
            >
                <CellTextbox>
                    <CellTextboxLabel>Label</CellTextboxLabel>
                    <CellTextboxTitle>Title</CellTextboxTitle>
                    <CellTextboxSubtitle>Subtitle</CellTextboxSubtitle>
                    <div style={{'font-size': '12px', opacity: 0.4}}>Caption</div>
                </CellTextbox>
            </Cell>
        </>
    );
}
```