website/sdds-dfa-docs/docs/components/Chip.mdx - dev - sdds/plasma

website/sdds-dfa-docs/docs/components/Chip.mdx
93 строки3 KB
TitanKuzmich
docs: update Chip docs
27 ноя 2024, 10:01
27 ноя 2024, 10:01a967f86
---
id: chip
title: Chip
---

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

# Chip
Chips могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.

## Chip
<Description name="Chip" />
<PropsTable name="Chip" exclude={['css', 'focused']} />

## Использование
Компонент `Chip` может содержать текст, который указывается в
свойстве `text`, или любой контент напрямую через `children`.

Свойство `text` можно использовать вместе со свойствами `contentLeft` и `contentRight`.
С их помощью можно размещать **иконку** слева или справа от текста.

Так же есть свойство `contentClearButton`, которое позволяет прокинуть custom **иконку**.
Отключить отображение иконки закрытия можно с помощью свойства `hasClear`.

```tsx live
import React from 'react';
import { Chip } from '@salutejs/sdds-dfa';
import { IconDownload } from '@salutejs/plasma-icons';

export function App() {
    return (
        <div>
            <Chip text="Текст" />

            <Chip text="Текст" contentLeft={<IconDownload color="inherit" />} />

            <Chip contentLeft={<IconDownload color="inherit" />} />

            <Chip text="Текст" />

            <Chip text="Текст" contentLeft={<IconDownload color="inherit" />} />

            <Chip>
                Текст
            </Chip>

            <Chip text="Текст" hasClear={false} />
        </div>
    );
}
```

## Примеры

### Размер Chip
Размер Chip задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:

```tsx live
import React from 'react';
import { Chip } from '@salutejs/sdds-dfa';

export function App() {
    return (
        <div>
            <Chip text="Chip" size="l" />
            <Chip text="Chip" size="m" />
            <Chip text="Chip" size="s" />
            <Chip text="Chip" size="xs" />
        </div>
    );
}
```

### Вид Chip
Вид Chip задается с помощью свойства `view`.

```tsx live
import React from 'react';
import { Chip } from '@salutejs/sdds-dfa';

export function App() {
    return (
        <div>
            <Chip text="Chip" size="m" view="default" />
            <Chip text="Chip" size="m" view="secondary" />
            <Chip text="Chip" size="m" view="accent" />
            <Chip text="Chip" size="m" view="positive" />
            <Chip text="Chip" size="m" view="warning" />
            <Chip text="Chip" size="m" view="negative" />
        </div>
    );
}
```