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

website/plasma-web-docs/docs/components/Switch.mdx

61 строка2 KB

Vladislav Denisov

docs(): Switch docs updated

12 ноя 2024, 21:01

12 ноя 2024, 21:01acebe9a

---
id: switch
title: Switch
---

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

# Switch
<Description name="Switch" />
<PropsTable name="Switch" include={['defaultChecked']} />
<StorybookLink name="Switch" />

## Использование
Компонент `Switch` может содержать лейбл.

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

export function App() {
    return (
        <Switch description="Описание переключателя" label="Переключатель" defaultChecked />
    );
}
```

## Примеры

### Размер Switch
Размер компонента задается с помощью свойства `size`.

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

export function App() {
    return (
        <div>
            <Switch size="s" description="Описание переключателя" label="Переключатель" defaultChecked />
            <Switch size="m" description="Описание переключателя" label="Переключатель" defaultChecked />
            <Switch size="l" description="Описание переключателя" label="Переключатель" defaultChecked />
        </div>
    );
}
```

Размер переключателя задается с помощью свойства `toggleSize`.

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

export function App() {
    return (
        <div style={{ alignItems: "center" }}>
            <Switch toggleSize="s" label="Переключатель" defaultChecked />
            <Switch toggleSize="l" label="Переключатель" defaultChecked />
        </div>
    );
}
```