Перейти к содержимому
ФреймворкJavaScript

Колонка: одна колонка вёрстки

Одна колонка внутри списка колонок. Пользователь не может вставить её сам — колонки создаются и управляются родительским блоком `column_list`. Дочерние блоки вкладываются в колонку через `contentIds`. Необязательное поле `widthRatio` задаёт ширину колонки относительно соседних (применяется как flex-grow); опустите его, чтобы колонки были равной ширины.

Импорт

TypeScript
import { Column } from '@bloklabs/core/tools';

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

TypeScript
interface ColumnData {
  widthRatio?: number; // Width relative to siblings (flex-grow). Omitted = equal width.
}
// Child blocks are referenced via the block's saved `content` array
// (the in-memory `contentIds`), not stored here.
JSON
{
  "id": "column1",
  "type": "column",
  "data": {
    "widthRatio": 1.5
  },
  "content": ["block1", "block2"]
}

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

TypeScript
// Column is not inserted directly — it is created by the ColumnList tool.
import { ColumnList, Column } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    column_list: { class: ColumnList },
    column: { class: Column },
  },
});