Drawer

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

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

index.ts
import ReactDOM from 'react-dom';
import { PopupProvider } from '@salutejs/sdds-serv';

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 и фокус не заблокированы.

Live Editor
Result
Open in CodeSandbox