Mise en page en colonnes
La mise en page en colonnes ajoute des groupes de colonnes modifiables à Univer Docs. Un groupe de colonnes est un conteneur de blocs comprenant de deux à cinq colonnes. Les utilisateurs peuvent ainsi créer dans un document des mises en page éditoriales compactes, des sections comparatives, des newsletters et des contenus mêlant texte et tableaux.
Introduction
Dans Univer Docs, la mise en page en colonnes permet de :
- Insérer des groupes de colonnes : créez un bloc de deux ou trois colonnes, ou avec des proportions personnalisées, à une position donnée du document.
- Effectuer des modifications de manière interactive : permettez aux utilisateurs d’insérer, de redimensionner et de supprimer des colonnes depuis l’interface de Docs.
- Utiliser les API Facade : recherchez des groupes de colonnes, insérez du contenu dans une colonne précise et modifiez les proportions des largeurs par programmation.
- Préserver les opérations du document : les modifications apportées aux colonnes empruntent le pipeline de commandes de texte enrichi habituel. L’annulation, le rétablissement et la collaboration reçoivent donc les mêmes modifications que lors d’opérations effectuées dans l’interface.
Mode plugin
Installation
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-uiUtilisation
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 vous disposez d’une licence commerciale Univer, consultez la page Utiliser une licence côté client pour savoir comment la configurer.
Prise en charge mobile
Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.
| Paquet | Inscription de bureau | Inscription mobile |
|---|---|---|
@univerjs-pro/docs-column-ui | UniverDocsColumnUIPlugin | UniverDocsColumnMobileUIPlugin |
API Facade
Veillez à importer la facade avant d’utiliser l’API :
import '@univerjs-pro/docs-column/facade'Insérer un groupe de colonnes
const doc = univerAPI.getActiveDocument()const group = doc?.insertColumnGroup(3, { gap: 18, widthRatios: [1.1, 1, 0.9],})Insérer du contenu dans une colonne
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 })}Rechercher des groupes de colonnes
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)Redimensionner ou modifier un groupe
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')}Supprimer un groupe de colonnes
const doc = univerAPI.getActiveDocument()doc?.deleteColumnGroup('column-group-id')Que pensez-vous de ce guide ?