# Pages et éléments de diapositive

- Human documentation: [https://docs.univer.ai/fr-FR/guides/slides/model/slide-page](https://docs.univer.ai/fr-FR/guides/slides/model/slide-page)

- Agent Markdown: [https://docs.univer.ai/fr-FR/guides/slides/model/slide-page.md](https://docs.univer.ai/fr-FR/guides/slides/model/slide-page.md)

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

- Source: [slides/model/slide-page.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/model/slide-page.fr-FR.mdx)

---

## ISlidePage

`ISlidePage` décrit un objet de type page dans Univer Slides. Les diapositives standard, les masques, les dispositions, les masques de document et les masques de pages de notes utilisent tous cette structure et se distinguent par leur `pageType` et leur bloc de propriétés facultatif.

### Propriétés de la page

| Propriété          | Type                                    | Description                                                |
| ------------------ | --------------------------------------- | ---------------------------------------------------------- |
| id                 | `string`                                | Identifiant unique de la page.                             |
| pageType           | `PageType`                              | Type de page, tel que `SLIDE`, `MASTER` ou `LAYOUT`.       |
| zIndex             | `number`                                | Ordre de rendu de la page.                                 |
| title              | `string`                                | Titre de la page.                                          |
| description        | `string`                                | Description de la page.                                    |
| pageBackgroundFill | `IColorStyle`                           | Remplissage de l’arrière-plan de la page.                  |
| colorScheme?       | `ThemeColorType`                        | Jeu de couleurs du thème utilisé par la page.              |
| pageElements       | `{ [elementId: string]: IPageElement }` | Éléments de cette page, indexés par identifiant d’élément. |
| slideProperties?   | `ISlideProperties`                      | Propriétés des pages de diapositive standard.              |
| layoutProperties?  | `ILayoutProperties`                     | Propriétés des pages de disposition.                       |
| masterProperties?  | `IMasterProperties`                     | Propriétés des pages de masque.                            |

## IPageElement

`IPageElement` est le conteneur commun des éléments. Chaque élément possède des champs de transformation tels que `left`, `top`, `width`, `height`, `angle`, `scaleX`, `scaleY`, `flipX` et `flipY`, ainsi qu’une charge utile de contenu sélectionnée par `type`.

| Type d’élément                | Charge utile  | Description                                                                           |
| ----------------------------- | ------------- | ------------------------------------------------------------------------------------- |
| `PageElementType.SHAPE`       | `shape`       | Forme prédéfinie ou personnalisée, comprenant le texte et les propriétés de la forme. |
| `PageElementType.IMAGE`       | `image`       | Propriétés de l’image et métadonnées facultatives d’espace réservé ou de lien.        |
| `PageElementType.TEXT`        | `richText`    | Élément de texte enrichi. Le champ `rich` peut stocker des données `IDocumentData`.   |
| `PageElementType.SPREADSHEET` | `spreadsheet` | Charge utile obsolète d’une feuille de calcul intégrée.                               |
| `PageElementType.DOCUMENT`    | `document`    | Charge utile obsolète d’un document intégré.                                          |
| `PageElementType.SLIDE`       | `slide`       | Charge utile obsolète d’une diapositive intégrée.                                     |

### Exemple

```typescript
const page: ISlidePage = {
  id: 'slide-1',
  pageType: PageType.SLIDE,
  zIndex: 10,
  title: 'Agenda',
  description: '',
  pageBackgroundFill: { rgb: 'rgb(255,255,255)' },
  pageElements: {
    title: {
      id: 'title',
      zIndex: 1,
      left: 72,
      top: 64,
      width: 600,
      height: 80,
      title: 'Title',
      description: '',
      type: PageElementType.TEXT,
      richText: {
        text: 'Quarterly Review',
      },
    },
  },
}
```

### Remarques

* `pageOrder` détermine l’ordre d’affichage des diapositives, tandis que `zIndex` détermine l’ordre de dessin.
* Les éléments de texte peuvent stocker un simple `text` ou des données de document plus riches par l’intermédiaire de `richText.rich`.
* Utilisez `customBlock` pour les charges utiles d’élément gérées par des plugins, au lieu de détourner les charges utiles intégrées obsolètes.