Diseño de columnas
El diseño de columnas agrega grupos de columnas editables a Univer Docs. Un grupo de columnas es un contenedor de bloques que posee de dos a cinco columnas, por lo que los usuarios pueden crear diseños editoriales compactos, secciones de comparación, boletines y contenido mixto de texto/tabla dentro de un documento.
Introducción
En Univer Docs, el diseño de columnas le permite:
- Insertar grupos de columnas: cree un bloque de dos, tres columnas o un bloque de proporciones personalizadas en un desplazamiento del documento.
- Editar interactivamente: permita a los usuarios inserte, cambie el tamaño y elimine columnas a través de la interfaz de usuario de Docs.
- Utilice las API de Facade: consulte grupos de columnas, inserte contenido en una columna específica y actualice las proporciones de ancho en el código.
- Conserve las operaciones de documentos: las mutaciones de columnas se ejecutan a través de la canalización normal de comandos de texto enriquecido, por lo que deshacer/rehacer y la colaboración reciben los mismos cambios en los documentos que las operaciones de la interfaz de usuario.
Complemento Modo
Instalación
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-uiUso
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)Si tiene una licencia comercial de Univer, consulte Uso de licencia en el cliente para la configuración.
Compatibilidad móvil
Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.
| Paquete | Registro de escritorio | Registro móvil |
|---|---|---|
@univerjs-pro/docs-column-ui | UniverDocsColumnUIPlugin | UniverDocsColumnMobileUIPlugin |
API de fachada
Asegúrese de importar la fachada antes de usar la API:
import '@univerjs-pro/docs-column/facade'Insertar un grupo de columnas
const doc = univerAPI.getActiveDocument()const group = doc?.insertColumnGroup(3, { gap: 18, widthRatios: [1.1, 1, 0.9],})Insertar contenido en una columna
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 })}Consulta Grupos de columnas
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)Cambiar el tamaño o editar un grupo
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')}Eliminar un grupo de columnas
const doc = univerAPI.getActiveDocument()doc?.deleteColumnGroup('column-group-id')¿Cómo es esta guía?