---
description: Компонент, представляющий собой отдельное состояние интерфейса, отображающееся в один момент времени.
---

<Overview group="navigation">
# Panel [tag:component]

Компонент, представляющий собой отдельное состояние интерфейса, отображающееся в один момент времени.

Связанные страницы:

- [View](/components/view)
- [Навигация](/overview/navigation)

</Overview>

import { FixedLayoutWrapper } from '@/components/wrappers';

{/* @example-description: Базовый экран `Panel` с шапкой и основным контентом. */}
<Playground Wrapper={FixedLayoutWrapper} style={{ height: 415, overflow: 'hidden' }}>

```jsx
<Panel>
  <PanelHeader>Заголовок экрана</PanelHeader>
  <Placeholder stretched>Контент экрана</Placeholder>
</Panel>
```

</Playground>

## Визуальное оформление

### Тип отображения

Задаётся свойством `mode`.

- `"card"` — карточный дизайн с тенями и скруглениями;
- `"plain"` — плоский дизайн без теней и скруглений.

По умолчанию переключение между типами отображения зависит от [`viewWidth`](/overview/adaptivity#viewwidth)

| `viewWidth`    | `mode`    |
| -------------- | --------- |
| `SMALL_TABLET` | `"card"`  |
| `MOBILE`       | `"plain"` |

### Центрирование контента

Задаётся свойством `centered`.

{/* @example-description: Центрированное содержимое `Panel` через свойство `centered`. */}
<Playground Wrapper={FixedLayoutWrapper} style={{ height: 415, overflow: 'hidden' }}>

```jsx
<Panel centered>
  <PanelHeader>Заголовок экрана</PanelHeader>
  <div>Отцентрованный контент</div>
</Panel>
```

</Playground>

### Фон страницы

Задаётся свойством `disableBackground`.

- `true` — задаёт прозрачный цвет фона;
- `false` — стандартный цвет фона.

{/* @example-description: Панель с отключённым фоном через `disableBackground`. */}
<Playground Wrapper={FixedLayoutWrapper} style={{ height: 415, overflow: 'hidden' }}>

```jsx
<Panel disableBackground>
  <PanelHeader>Заголовок экрана</PanelHeader>
  <Placeholder stretched>За мной нет фона</Placeholder>
</Panel>
```

</Playground>

## PanelSpinner [tag:component]

import { FixedLayoutWrapper } from '@/components/wrappers';

Индикатор загрузки внутри экрана. Автоматически добавляет стандартные отступы и центрирование.

{/* @example-description: Использование `PanelSpinner` для индикации загрузки внутри панели. */}
<Playground Wrapper={FixedLayoutWrapper} style={{ height: 415, overflow: 'hidden' }}>

```jsx
<Panel centered>
  <PanelHeader>PanelSpinner</PanelHeader>
  <PanelSpinner />
</Panel>
```

</Playground>

### Свойства

Наследует все свойства компонента [`Spinner`](/components/spinner).

- `size` — размер индикатора.
- `disableAnimation` — отключение анимации.
- `noColor` — наследование цвета.

#### Высота компонента

Задается с помощью свойства `height`:

```jsx
<PanelSpinner height={300} />
```

### Когда использовать

- При загрузке контента внутри экрана.
- Когда нужен центрированный спиннер с отступами.
- Для полностраничной загрузки (в сочетании с кастомной высотой).

### Альтернативы

- [`Spinner`](/components/spinner) — для встроенной загрузки внутри элементов.
- [`ScreenSpinner`](/components/screen-spinner) — для модальной загрузки поверх интерфейса.

### Доступность (a11y) [#a11y]

Следует придерживаться тех же правил, что и для компонента [`Spinner`](/components/spinner).

## Свойства и методы [#api]

### Panel

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `centered` | `boolean` | `false` | Центрирование содержимого. |
| `disableBackground` | `boolean` | `-` | Отключает задний фон. |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `mode` | `"card" \| "plain"` | `-` | Тип оформления панели.  Позволяет переопределить тип оформления панели, заданный через адаптивность или свойство layout у [AppRoot](https://vkui.io/components/app-root), глобально задающим тип оформления макета.  Если установлен `card` - Panel имеет фон отличный от фона контента. Позволяет компоненту [Group](https://vkui.io/components/group) со свойством mode='card' точечно выглядеть как карточка. Тип `plain` — соответствует фону по умолчанию. |
| `nav` | `string` | `-` | Уникальный идентификатор навигационного элемента (вместо id) |

### PanelSpinner

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `disableAnimation` | `boolean` | `-` | Отключение анимации. |
| `getRootRef` | `Ref<HTMLSpanElement>` | `-` |  |
| `height` | `number` | `-` | Высота компонента. |
| `noColor` | `boolean` | `-` | Задать цвет можно будет через свойство color родителя. |
| `size` | `"s" \| "m" \| "l" \| "xl"` | `-` | Размер спиннера. |
| `visibilityDelay` | `number` | `-` | Задерживает отрисовку элемента на заданное количество миллисекунд. |