Фреймворк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,
    },
  },
});