---
title: Панель, компонент React
components: Drawer, SwipeableDrawer
---

# Панель

<p class="description">Навигационные панели предназначены для предоставления ссылок на различные части вашего приложения. Боковые панели содержат дополнительную информацию и закрепляются по левую или правую сторону окна браузера.</p>

[Navigation drawers](https://material.io/design/components/navigation-drawer.html) (or "sidebars") provide access to destinations and app functionality, such as switching accounts. Они могут либо находится всегда в открытом состоянии либо контролироватся с помощью навигационного меню.

[Боковые панели](https://material. io/design/components/sheets-side.html) являются дополнительными элементами, в основном используемыми на планшетах и ПК.

## Скрытая Панель

Скрытая навигационная панель может быть видна либо скрыта. По-умолчанию ее не видно, но ее можно открыть над остальным содержимым и выбрать нужный пункт, после чего панель снова переходит в скрытое состояние.

Также, панель может быть скрыта нажатем на фон или на клавишу Esc. При выборе пункта меню панель закрывается меняя значение свойства `open`.

{{"demo": "pages/components/drawers/TemporaryDrawer.js"}}

## Скользящая скрытая панель

Вы можете сделать панель скользящей используя компонент `SwipeableDrawer`.

Этот комонент в сжатом виде добавляет 2 kB к загрузке. Некоторые бюджетные мобильные устройства не смогут отвечать на прикосновения с частотой 60 кадров в секунду. Используйте свойство `disableBackdropTransition` чтобы исправить ситуацию.

{{"demo": "pages/components/drawers/SwipeableTemporaryDrawer.js"}}

Данный вебсайт использует следующие приемы для улучшения качества взаимодействия с пользователем данного компонента: - iOS является мощным устройством. Поэтому использование backdrop transition не вызывает пропуска кадров. Производительность достаточно хороша. - iOS предоставляет скользящий жест для возврата, который мешает использованию панелей. Данный жест должен быть отключен.

```jsx
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);

<SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />
```

## Приспосабливающаяся панель

Адапивный дизайн может быть достигнут использованием компонента `Hidden`. `cкрытая` панель может быть показана для экранов с небольшим разрешением, тогда как `вполне видимая` панель будет показана на широких экранах.

{{"demo": "pages/components/drawers/ResponsiveDrawer.js", "iframe": true}}

## Стойкая панель

Стойкая навигационная панель может быть как в открытом так и в закрытом состоянии. Панель находится на том же уровне что и остальное содержимое. По-умолчания она закрыта и может быть открыта с помощю кнопки, оставаясь в таком состоянии пока пользователь не закроет ее. Состояние панель сохраняется между действиями и сессиями.

Когда панель находится за границей экрана и открывается, остальное содержимое меянет размеры приспосбаливаясь к уменьшеному месту в окне браузера.

Исползование стойких панелей имеет смысл на разрешениях больше чем на мобильных устройствах. Не рекомендуется их использоватся в приложениях с элементами расположенными на нескольких уровнях, где необходимо перемещатся между ними.

{{"demo": "pages/components/drawers/PersistentDrawerLeft.js", "iframe": true}}

{{"demo": "pages/components/drawers/PersistentDrawerRight.js", "iframe": true}}

## Панель с состоянием минимизации

В этом случае стойкая навигационная панель меняет свою ширину. В закрытом состоянии она минимизирована, на том же уровне что и остальное содержимое, и верхняя ее часть скрыта. В открытом состоянии это обычная стойкая навигационная панель.

Панель с состоянием минимизации рекомендуется использовать в приложениях, где необходимо предоставить быстрый способ обхода вместе с содержимым.

{{"demo": "pages/components/drawers/MiniDrawer.js", "iframe": true}}

## Вполне видимая панель

Вполне видимые навигационные панели всегда видимы и привязанны к левому краю окна браузера, находятся на том же уровне что и остальное содержимое. Они не могут быть скрыты.

Рекомендуется использовать вполне видимые навигационные панели на **ПК**.

### Навигация в полную высоту

Исползуется в приложениях, которые сфокусированны на предоставлении информации и используют иерархию элементов слева направо.

{{"demo": "pages/components/drawers/PermanentDrawerLeft.js", "iframe": true}}

{{"demo": "pages/components/drawers/PermanentDrawerRight.js", "iframe": true}}

### Панель, скрытая за основной полосой

Используется в приложениях сфокусированных на эффективной работе и требуют сбалансированного заполнения экрана.

{{"demo": "pages/components/drawers/ClippedDrawer.js", "iframe": true}}