---
title: "Блок «Вкладки» — содержимое на переключаемых вкладках"
description: "Блок с полосой вкладок над содержимым открытой вкладки. Каждая вкладка это дочерний блок, а открытая вкладка не сохраняется."
source: https://blokeditor.com/ru/docs/tabs/
lastmod: 2026-10-06
---

Фреймворк JavaScript

Блочные инструменты Вкладки

# Вкладки: содержимое на переключаемых вкладках

Блок, который раскладывает содержимое по вкладкам. Сверху идёт полоса вкладок, а под ней показано содержимое открытой вкладки. Вставляется через тулбокс или вводом `/tabs`. Новый блок вкладок создаётся с тремя вкладками: «Вкладка 1», «Вкладка 2» и «Вкладка 3».

Каждая вкладка это дочерний блок `tab`, а блоки, которые вы пишете, живут внутри вкладок (через `contentIds`). Сам блок вкладок ничего не сохраняет. Какая вкладка открыта, это состояние интерфейса: оно хранится для каждого редактора отдельно и никогда не сохраняется. Блок вкладок содержит только блоки `tab`. Любой другой дочерний блок выносится сразу после него.

Как управлять вкладками:

- нажмите «+», чтобы добавить вкладку
- нажмите на открытую вкладку, щёлкните по вкладке правой кнопкой или нажмите на ней Shift+F10 или клавишу ContextMenu, чтобы открыть её меню: «Переименовать», «Изменить значок» и «Удалить»
- нажмите F2 на вкладке, чтобы переименовать её
- нажмите Delete или Backspace на открытой вкладке, чтобы удалить её
- перетащите вкладку вбок, чтобы изменить порядок

Удаление вкладки удаляет её содержимое. Удаление последней вкладки удаляет весь блок вкладок, а удаление блока вкладок удаляет все вкладки.

Стрелки, Home и End переключают вкладки. Когда вы перетаскиваете блок, задержите его над вкладкой, чтобы открыть её, или отпустите на вкладке, чтобы добавить блок в её конец. Поиск по странице открывает вкладку, в которой есть совпадение.

Оба инструмента можно зарегистрировать разом групповой ссылкой `Tabs`: `tools: { tabs: Tabs }` разворачивается в инструменты `tabs` и `tab`. В сохранённом JSON по-прежнему остаются блоки `tabs` и `tab`.

Блок работает в режиме только для чтения. Вставка вкладок из Notion создаёт этот блок. Экспорт в Markdown записывает все вкладки по порядку, каждую под её заголовком жирным шрифтом. `blocksToHtml` записывает `<div data-blok-tabs>` с одним `<section data-blok-tab>` на каждую вкладку, а `htmlToBlocks` читает этот HTML обратно как вкладки.

### Импорт

TypeScript

```
import { TabsTool } from '@bloklabs/core/tools';
// …or register both tab tools at once with the group handle:
import { Tabs } from '@bloklabs/core/tools';
```

### Формат данных

TypeScript

```
interface TabsData {
  // No persisted fields. The tabs are the child `tab` blocks, referenced by
  // the block's saved `content` array (exposed as `contentIds` on the
  // in-memory Block). The open tab is UI state and is never saved.
}
```

JSON

```
{
  "id": "tabs001",
  "type": "tabs",
  "data": {},
  "content": ["tab1", "tab2"]
}
```

### Пример использования

TypeScript

```
import { Blok } from '@bloklabs/core';
import { TabsTool, TabTool } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    tabs: {
      class: TabsTool,
    },
    tab: {
      class: TabTool,
    },
  },
});
```