Определение

Drawer — выдвигающаяся панель. Компонент содержит набор информации или действий. Задачи могут выполняться более эффективно в том же контексте, так как пользователь взаимодействует с информацией на панели, не покидая текущую страницу. 

Варианты и состояния

Существует 3 размера выдвигающейся панели:

• s — 320px;
• m — 560px;
• l — 920px.

Основные правила

• Drawer используется для подзадач, объем которых слишком большой для модальных окон и необходим вертикальный скролл.
• Для отображения сложных многоэтапных задач — не применяется.
• Может отображаться параллельно с содержимым страницы (с наложением или без него).
• Горизонтальная ширина содержимого компонента drawer должна соответствовать выбранному размеру панели.
• Горизонтальная прокрутка внутри панели недопустима, исключением может быть таблица размещенная на панели размера L с множеством колонок.
• Если требуется «пустой экран», следуйте рекомендациям по нулевому состоянию (empty states).
• После открытия фокус должен переместиться на панель. Преднамеренная ловушка клавиатуры сохраняет порядок табуляции (зацикленный) внутри панели до тех пор, пока он не будет закрыт. Исключением может быть панель, смещающая контент.

Построение

• Панель drawer состоит из короткого заголовка H2 (<40 символов), выровненного по левому краю, icon button CLOSE, горизонтального разделителя во всю ширину для отделения заголовка от основного содержимого.
• Если панель включает в себя основное действие, например, функцию «Сохранить», то его следует разместить в нижнем колонтитуле.
• Если содержимое в выдвигающейся панели превышает высоту экрана, верхний (с заголовком) и нижний (если применен) колонтитулы, должны быть зафиксированы и всегда видны.

Взаимодействие

• Панель выдвигается с легкой анимацией. Скорость появления — 200мс.
• Параллельно с появлением панели тонируется фон всей страницы. Для тонировки фона мы используем дизайн-токен — black-alpha48.
• Панель не закрывается щелчком за пределами окна (в отличие от модальных окон). Это сделано, чтобы пользователи случайно не потеряли свою работу.
• Основной способ закрыть панель — использовать icon button закрытия в заголовке. Все панели должны иметь это действие. Второй способ закрыть панель — использовать клавишу ESC. Третий способ закрыть панель — щелчок по основному действию (например, «Сохранить»).