Drawer

Storybook

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

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

index.ts
import ReactDOM from 'react-dom';
import { PopupBaseProvider } from '@salutejs/plasma-web';

import { App } from './App';

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

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

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

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

Live Editor
Result
Open in CodeSandbox