website/plasma-web-docs/docs/components/Counter.mdx - dev - sdds/plasma

website/plasma-web-docs/docs/components/Counter.mdx
77 строк2 KB
Vladislav Denisov
docs(): Counter docs updated
30 окт 2024, 12:05
30 окт 2024, 12:0520514b4
---
id: counter
title: Counter
---

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

# Counter
<Description name="Counter" />
<PropsTable name="Counter"  exclude={['css']} />
<StorybookLink name="Counter" />

## Примеры

### Максимальное значение числового бейджа
Задается с помощью свойства `maxCount`. Как и `count`, не может быть меньше 1.

```tsx live 
import React from 'react';
import { Counter } from '@salutejs/plasma-web';

export function App() {
    return (
        <div>
            <Counter count={10} maxCount={9} />
            <Counter count={100} maxCount={99} />
        </div>
    );
}
```

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

```tsx live 
import React from 'react';
import { Counter } from '@salutejs/plasma-web';

export function App() {
    return (
        <div>
            <Counter count={10} size="xs" />
            <Counter count={10} size="xxs" />
        </div>
    );
}
```

### Вид числового бейджа
Вид задается с помощью свойства `view`. Возможные значения свойства `view`:

+ `"default"` – основной бейдж;
+ `"accent"` – бейдж акцентного цвета;
+ `"positive"` – успешное завершение;
+ `"warning"` – предупреждение;
+ `"negative"` – ошибка;
+ `"dark"` – темный бэйдж;
+ `"light"` – светлый бэйдж.

```tsx live 
import React from 'react';
import { Counter } from '@salutejs/plasma-web';

export function App() {
    return (
        <div>
            <Counter count={10} view="default" />
            <Counter count={10} view="accent" />
            <Counter count={10} view="positive" />
            <Counter count={10} view="warning" />
            <Counter count={10} view="negative" />
            <Counter count={10} view="dark" />
            <Counter count={10} view="light" />
        </div>
    );
}
```