Многоколоночная разметка
Многоколоночная разметка добавляет в Univer Docs редактируемые группы колонок. Группа колонок — это блочный контейнер, содержащий от двух до пяти колонок. С его помощью в документе можно создавать компактные редакционные макеты, сравнительные разделы, информационные рассылки и комбинировать текст с таблицами.
Введение
Многоколоночная разметка в Univer Docs позволяет:
- Вставлять группы колонок: создавать блоки из двух или трёх колонок либо блоки с произвольным соотношением ширины в заданной позиции документа.
- Редактировать в интерактивном режиме: добавлять, изменять размер и удалять колонки через интерфейс Docs.
- Использовать Facade API: получать группы колонок, вставлять содержимое в определённую колонку и программно менять соотношение ширины.
- Сохранять операции с документом: изменения колонок проходят через стандартный конвейер команд форматированного текста, поэтому отмена, повтор и совместное редактирование получают те же изменения документа, что и операции в интерфейсе.
Режим плагинов
Установка
pnpm add @univerjs-pro/docs-column @univerjs-pro/docs-column-uinpm install @univerjs-pro/docs-column @univerjs-pro/docs-column-uiyarn add @univerjs-pro/docs-column @univerjs-pro/docs-column-uibun add @univerjs-pro/docs-column @univerjs-pro/docs-column-uiИспользование
import { UniverDocsColumnUIPlugin } from '@univerjs-pro/docs-column-ui'import DocsColumnUIEnUS from '@univerjs-pro/docs-column-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-column-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DocsColumnUIEnUS, ), },})univer.registerPlugin(UniverDocsColumnUIPlugin)Если у вас есть коммерческая лицензия Univer, сведения о настройке см. в разделе «Использование лицензии в клиенте».
Поддержка мобильных устройств
Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.
| Пакет | Настольная регистрация | Мобильная регистрация |
|---|---|---|
@univerjs-pro/docs-column-ui | UniverDocsColumnUIPlugin | UniverDocsColumnMobileUIPlugin |
Facade API
Перед использованием API обязательно импортируйте facade:
import '@univerjs-pro/docs-column/facade'Вставка группы колонок
const doc = univerAPI.getActiveDocument()const group = doc?.insertColumnGroup(3, { gap: 18, widthRatios: [1.1, 1, 0.9],})Вставка содержимого в колонку
const doc = univerAPI.getActiveDocument()const group = doc?.insertColumnGroup(2)const [left, right] = group?.getColumns() ?? []const leftOffset = left?.getInsertOffset()if (leftOffset != null) { doc?.insertText('Summary\rKey decisions and context.', { startOffset: leftOffset, endOffset: leftOffset, })}const rightOffset = right?.getInsertOffset()if (rightOffset != null) { doc?.insertTableFromData([ ['Item', 'Owner'], ['Launch checklist', 'Docs team'], ], { offset: rightOffset, headerRowCount: 1 })}Получение групп колонок
const doc = univerAPI.getActiveDocument()const groups = doc?.getColumnGroups() ?? []const byId = doc?.getColumnGroup('column-group-id')const atOffset = doc?.getColumnGroupAt(128)const matched = doc?.findColumnGroups('Launch') ?? []console.log(groups.map(group => group.describe()))console.log(byId, atOffset, matched)Изменение размера и редактирование группы
const doc = univerAPI.getActiveDocument()const group = doc?.getColumnGroups()[0]group?.setWidthRatios([1.2, 1, 0.8])const first = group?.getColumn(0)if (first) { group?.addColumn(first.getId(), 'right')}Удаление группы колонок
const doc = univerAPI.getActiveDocument()doc?.deleteColumnGroup('column-group-id')Насколько полезно это руководство?