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

website/sdds-scan-docs/docs/components/Counter.mdx

76 строк2 KB

Alexander Lobyntsev

chore(sdds-scan-docs): init package

28 май 2025, 12:34

28 май 2025, 12:3447f57c7

---
id: counter
title: Counter
---

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

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

## Примеры

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

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

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

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

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

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

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

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

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

export function App() {
    return (
        <div>
            <Counter count={10} view="primary" />
            <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>
    );
}
```