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

website/sdds-scan-docs/docs/components/Drawer.mdx
392 строки15 KB
Dima Shugaev
feat(docs): SSRProvider docs updated
24 апр 2026, 09:14
24 апр 2026, 09:1465163f3
---
id: drawer
title: Drawer
---

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

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

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

Перед использованием убедитесь, что `PopupProvider` подключен.

```tsx title="index.ts"
import ReactDOM from 'react-dom';
import { PopupProvider } from '@salutejs/sdds-scan';

import { App } from './App';

ReactDOM.render(
    <PopupProvider>
        <App />
    </PopupProvider>,
    document.getElementById('root')
);
```

### Отображения Drawer

Drawer можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
Само позиционирование можно указать с помощью свойства `placement`(left - по умолчанию, right, top, bottom),
а также определить отступы от точки с помощью `offset`.

У компонента Drawer есть 2 режима отображения:
- модальный - добавляет при этом подложку(`overlay`), а также блокирует scroll и фокус;
- немодальный - нет подложки, scroll и фокус не заблокированы.

```tsx live
import React, { useRef } from 'react';
import { IconDone } from '@salutejs/plasma-icons';
import { surfaceSolidSecondary } from '@salutejs/sdds-themes/tokens';

import { H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/sdds-scan';

export function App() {
    const [isOpenA, setIsOpenA] = React.useState(false);
    const [isOpenB, setIsOpenB] = React.useState(false);

    const ref = useRef();

    return (
        <PopupProvider>
            <div style={{height: "500px"}}>
                <div style={{ display: "flex", flexDirection: "column" }}>
                    <Button
                        text="Открыть в document"
                        onClick={() => setIsOpenA(true)}
                        style={{
                            marginTop: "1rem",
                            width: "15rem"
                        }}
                    />
                    <Button
                        text="Открыть во Frame"
                        onClick={() => setIsOpenB(true)}
                        style={{
                            marginTop: "1rem",
                            width: "15rem"
                        }}
                    />
                </div>
                <Drawer
                    id="drawerA"
                    opened={isOpenA}
                    onClose={() => setIsOpenA(false)}
                    placement="right"
                    withBlur={false}
                    closeOnEsc={true}
                    closeOnOverlayClick={true}
                    asModal={true}
                    width="25vw"
                    height="100vh"
                >
                        <DrawerHeader
                            hasClose={true}
                            closePlacement="right"
                            actions={(
                                <Button size="s" view="clear" style={{
                                    position: "relative",
                                    width: "1.5rem",
                                    height: "1.5rem"
                                }}>
                                    <IconDone size="s" />
                                </Button>
                            )}
                            onClose={() => setIsOpenA(false)}
                        >
                            <H3>Header</H3>
                        </DrawerHeader>

                        <DrawerContent>Content</DrawerContent>

                        <DrawerFooter>
                            <H3>Footer</H3>
                        </DrawerFooter>
                    </Drawer>
                <div
                    ref={ref}
                    style={{
                        marginTop: "1rem",
                        width: "400px",
                        height: "500px",
                        background: surfaceSolidSecondary,
                        position: "absolute",

                        display: "flex",
                        alignItems: "flex-start",
                        justifyContent: "center",
                        padding: "1rem",

                        bottom: 0,
                        right: 0
                    }}
                >
                    <>Frame</>
                </div>

                <Drawer
                    id="drawerB"
                    opened={isOpenB}
                    onClose={() => setIsOpenB(false)}
                    placement="right"
                    asModal={false}
                    frame={ref}
                    width="250px"
                    height="100%"
                >
                        <DrawerHeader
                            hasClose={true}
                            closePlacement="right"
                            actions={(
                                <Button size="s" view="clear" style={{
                                    position: "relative",
                                    width: "1.5rem",
                                    height: "1.5rem"
                                }}>
                                    <IconDone size="s" />
                                </Button>
                            )}
                            onClose={() => setIsOpenB(false)}
                        >
                            <H3>Header</H3>
                        </DrawerHeader>

                        <DrawerContent>Content</DrawerContent>

                        <DrawerFooter>
                            <H3>Footer</H3>
                        </DrawerFooter>
                    </Drawer>
            </div>
        </PopupProvider>
    );
}
```

### Анимация

Для работы с анимацией необходимо использовать свойство `animationInfo`.
Данное свойство содержит два поля:
- enter
- exit

В каждом из них можно указать собственную анимацию открытия и закрытия Drawer соответственно.
Формат: `enterAnimation 0.2s forwards`

<Tabs>
    <TabItem value="styled" label="styled-components" default>
        ```tsx
        import React from 'react';
        import { IconDone } from '@salutejs/plasma-icons';
        import { createGlobalStyle } from 'styled-components';

        import { H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/sdds-scan';

        export function App() {
            const [isOpenA, setIsOpenA] = React.useState(false);
            const [isOpenB, setIsOpenB] = React.useState(false);

            const animationInfo = {
                enter: 'enterAnimation 0.2s forwards',
                exit: 'exitAnimation 0.2s forwards',
            }

            const GlobalAnimations = createGlobalStyle`
                @keyframes enterAnimation {
                    from {
                        transform: translate(100%, -150%);
                        opacity: 0;
                    }

                    to {
                        transform: translate(0, -50%);
                        opacity: 1;
                    }
                }

                @keyframes exitAnimation {
                    from {
                        transform: translate(0, -50%);
                        opacity: 1;
                    }

                    to {
                        transform: translate(100%, -150%);
                        opacity: 0;
                    }
                }
            `;

            return (
                <>
                    <GlobalAnimations />

                    <PopupProvider>
                        <div style={{height: "500px"}}>
                            <div style={{ display: "flex", flexDirection: "column" }}>
                                <Button
                                    text="Открыть в document"
                                    onClick={() => setIsOpenA(true)}
                                    style={{
                                        marginTop: "1rem",
                                        width: "15rem"
                                    }}
                                />
                            </div>
                            <Drawer
                                animationInfo={animationInfo}

                                id="drawerA"
                                opened={isOpenA}
                                onClose={() => setIsOpenA(false)}
                                placement="right"
                                withBlur={false}
                                closeOnEsc={true}
                                closeOnOverlayClick={true}
                                asModal={true}
                                width="25vw"
                                height="100vh"
                            >
                                <DrawerHeader
                                    hasClose={true}
                                    closePlacement="right"
                                    actions={(
                                        <Button size="s" view="clear" style={{
                                            position: "relative",
                                            width: "1.5rem",
                                            height: "1.5rem"
                                        }}>
                                            <IconDone size="s" />
                                        </Button>
                                    )}
                                    onClose={() => setIsOpenA(false)}
                                >
                                    <H3>Header</H3>
                                </DrawerHeader>

                                <DrawerContent>Content</DrawerContent>

                                <DrawerFooter>
                                    <H3>Footer</H3>
                                </DrawerFooter>
                            </Drawer>
                        </div>
                    </PopupProvider>
                </>
            );
        }
        ```
    </TabItem>
    <TabItem value="linaria" label="linaria / css-modules / css">
        Для linaria / css-modules необходимо определять анимацию так,
        чтобы не добавлялся хеш к названию анимации. Иначе анимация не применится.
        Для css необходимо просто задать анимацию либо inline (как в примере), либо в отдельном css-файле

        ```tsx
        import React from 'react';
        import { IconDone } from '@salutejs/plasma-icons';

        import { H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/sdds-scan';

        const drawerAnimation = `
            @keyframes enterAnimation {
                0% {
                    transform: translate(100%, -150%);
                    opacity: 0;
                }

                100% {
                    transform: translate(0, -50%);
                    opacity: 1;
                }
            }

            @keyframes exitAnimation {
                0% {
                    transform: translate(0, -50%);
                    opacity: 1;
                }

                100% {
                    transform: translate(100%, -150%);
                    opacity: 0;
                }
            }
        `;

        export function App() {
            const [isOpenA, setIsOpenA] = React.useState(false);
            const [isOpenB, setIsOpenB] = React.useState(false);

            const animationInfo = {
                enter: 'enterAnimation 0.2s forwards',
                exit: 'exitAnimation 0.2s forwards',
            }

            return (
                <>
                    <style>{drawerAnimation}</style>

                    <PopupProvider>
                        <div style={{height: "500px"}}>
                            <div style={{ display: "flex", flexDirection: "column" }}>
                                <Button
                                    text="Открыть в document"
                                    onClick={() => setIsOpenA(true)}
                                    style={{
                                        marginTop: "1rem",
                                        width: "15rem"
                                    }}
                                />
                            </div>
                            <Drawer
                                animationInfo={animationInfo}

                                id="drawerA"
                                opened={isOpenA}
                                onClose={() => setIsOpenA(false)}
                                placement="right"
                                withBlur={false}
                                closeOnEsc={true}
                                closeOnOverlayClick={true}
                                asModal={true}
                                width="25vw"
                                height="100vh"
                            >
                                <DrawerHeader
                                    hasClose={true}
                                    closePlacement="right"
                                    actions={(
                                        <Button size="s" view="clear" style={{
                                            position: "relative",
                                            width: "1.5rem",
                                            height: "1.5rem"
                                        }}>
                                            <IconDone size="s" />
                                        </Button>
                                    )}
                                    onClose={() => setIsOpenA(false)}
                                >
                                    <H3>Header</H3>
                                </DrawerHeader>

                                <DrawerContent>Content</DrawerContent>

                                <DrawerFooter>
                                    <H3>Footer</H3>
                                </DrawerFooter>
                            </Drawer>
                        </div>
                    </PopupProvider>
                </>
            );
        }
        ```
    </TabItem>
</Tabs>