# Mise en page en colonnes

- Human documentation: [https://docs.univer.ai/fr-FR/guides/docs/features/columns](https://docs.univer.ai/fr-FR/guides/docs/features/columns)

- Agent Markdown: [https://docs.univer.ai/fr-FR/guides/docs/features/columns.md](https://docs.univer.ai/fr-FR/guides/docs/features/columns.md)

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

- Source: [docs/features/columns.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/docs/features/columns.fr-FR.mdx)

---

#### Package metadata

```json
{
  "mobile": true,
  "plugins": [
    {
      "client": "@univerjs-pro/docs-column",
      "facade": "@univerjs-pro/docs-column/facade"
    },
    {
      "client": "@univerjs-pro/docs-column-ui",
      "locale": "@univerjs-pro/docs-column-ui/locale/fr-FR",
      "style": "@univerjs-pro/docs-column-ui/lib/index.css"
    }
  ],
  "license": true,
  "server": false
}
```

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

#### npm

```bash
npm install @univerjs-pro/docs-column @univerjs-pro/docs-column-ui
```

#### pnpm

```bash
pnpm add @univerjs-pro/docs-column @univerjs-pro/docs-column-ui
```

#### yarn

```bash
yarn add @univerjs-pro/docs-column @univerjs-pro/docs-column-ui
```

#### bun

```bash
bun add @univerjs-pro/docs-column @univerjs-pro/docs-column-ui
```

### Utilisation

```typescript
import { UniverDocsColumnUIPlugin } from '@univerjs-pro/docs-column-ui' // [!code ++]
import DocsColumnUIEnUS from '@univerjs-pro/docs-column-ui/locale/en-US' // [!code ++]
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'

import '@univerjs-pro/docs-column-ui/lib/index.css' // [!code ++]

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      DocsColumnUIEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverDocsColumnUIPlugin) // [!code ++]
```

Si vous disposez d’une licence commerciale Univer, consultez la page [Utiliser une licence côté client](https://docs.univer.ai/fr-FR/server/license.md#in-plugin-mode) pour savoir comment la configurer.

## Prise en charge mobile

Configurez d’abord l’[éditeur mobile](https://docs.univer.ai/fr-FR/guides/docs/getting-started/installation.md#mobile-support). 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 :

```typescript
import '@univerjs-pro/docs-column/facade'
```

### Insérer un groupe de colonnes

```typescript
const doc = univerAPI.getActiveDocument()
const group = doc?.insertColumnGroup(3, {
  gap: 18,
  widthRatios: [1.1, 1, 0.9],
})
```

### Insérer du contenu dans une colonne

```typescript
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

```typescript
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

```typescript
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

```typescript
const doc = univerAPI.getActiveDocument()
doc?.deleteColumnGroup('column-group-id')
```