# Páginas de diapositivas y elementos

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

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

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

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

---

## ISlidePage

`ISlidePage` describe un único objeto similar a una página en Univer Slides. Las diapositivas, patrones, diseños, patrones de folletos y patrones de notas normales utilizan esta estructura y se diferencian por `pageType` y su bloque de propiedades opcional.

### Propiedades de página

| Propiedad          | Tipo                                    | Descripción                                               |
| ------------------ | --------------------------------------- | --------------------------------------------------------- |
| id                 | `string`                                | Identificación de página única.                           |
| pageType           | `PageType`                              | Tipo de página, como `SLIDE`, `MASTER` o `LAYOUT`.        |
| zIndex             | `number`                                | Orden de representación de la página.                     |
| title              | `string`                                | Título de la página.                                      |
| description        | `string`                                | Descripción de la página.                                 |
| pageBackgroundFill | `IColorStyle`                           | Relleno del fondo de la página.                           |
| colorScheme?       | `ThemeColorType`                        | Esquema de colores del tema utilizado por la página.      |
| pageElements       | `{ [elementId: string]: IPageElement }` | Elementos de esta página, codificados por ID de elemento. |
| slideProperties?   | `ISlideProperties`                      | Propiedades para páginas de diapositivas normales.        |
| layoutProperties?  | `ILayoutProperties`                     | Propiedades para páginas de diseño.                       |
| masterProperties?  | `IMasterProperties`                     | Propiedades para páginas maestras.                        |

## IPageElement

`IPageElement` es el contenedor de elementos común. Cada elemento tiene campos de transformación como `left`, `top`, `width`, `height`, `angle`, `scaleX`, `scaleY`, `flipX` y `flipY`, más una carga útil de contenido seleccionada por `type`.

| Tipo de elemento              | Carga útil    | Descripción                                                                           |
| ----------------------------- | ------------- | ------------------------------------------------------------------------------------- |
| `PageElementType.SHAPE`       | `shape`       | Forma preestablecida o personalizada, incluido texto de forma y propiedades de forma. |
| `PageElementType.IMAGE`       | `image`       | Propiedades de imagen y metadatos de marcador de posición/vínculo opcionales.         |
| `PageElementType.TEXT`        | `richText`    | Elemento de texto enriquecido. El campo `rich` puede almacenar `IDocumentData`.       |
| `PageElementType.SPREADSHEET` | `spreadsheet` | Carga útil de hoja de trabajo incrustada en desuso.                                   |
| `PageElementType.DOCUMENT`    | `document`    | Carga útil de documento incrustado en desuso.                                         |
| `PageElementType.SLIDE`       | `slide`       | Carga útil de diapositivas incrustada en desuso.                                      |

### Ejemplo

```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',
      },
    },
  },
}
```

### Notas

* `pageOrder` controla el orden de las diapositivas visibles; `zIndex` controla el orden de dibujo.
* Los elementos de texto pueden almacenar `text` datos de documentos simples o más completos a través de `richText.rich`.
* Utilice `customBlock` para cargas útiles de elementos propiedad del complemento en lugar de sobrecargar cargas útiles incrustadas obsoletas.