# Características principales - Human documentation: [https://docs.univer.ai/es-ES/guides/slides/features/core](https://docs.univer.ai/es-ES/guides/slides/features/core) - Agent Markdown: [https://docs.univer.ai/es-ES/guides/slides/features/core.md](https://docs.univer.ai/es-ES/guides/slides/features/core.md) - Requested language: `es-ES` - Content language: `es-ES` - Documentation version: `1.2.0` - Source: [slides/features/core/index.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/features/core/index.es-ES.mdx) --- #### Package metadata ```json { "preset": [], "plugins": [ { "client": "@univerjs-pro/slides", "locale": "@univerjs-pro/slides/locale/es-ES", "facade": "@univerjs-pro/slides/facade" }, { "client": "@univerjs-pro/slides-ui", "locale": "@univerjs-pro/slides-ui/locale/es-ES", "style": "@univerjs-pro/slides-ui/lib/index.css" } ], "license": true, "server": false } ``` El núcleo de Univer Slides combina un modelo de presentación con la interfaz de edición del navegador. El modelo guarda la presentación como una instantánea `ISlideData`, mientras que la interfaz la renderiza y edita mediante comandos de Univer. ## Funciones * **Modelo de presentación**: administra la identidad, el tamaño de página, el orden de las diapositivas, las diapositivas, los patrones, los diseños, los temas, las transiciones y los recursos. * **Renderizado y edición**: ofrece el lienzo, las miniaturas, la selección, el portapapeles, la edición de texto y formas, las guías de alineación y la presentación de diapositivas. * **Canal de comandos**: aplica los cambios de páginas y elementos mediante comandos y mutaciones para sincronizar el modelo, el renderizado, deshacer y rehacer. * **Facade API**: crea, busca y guarda presentaciones, y expone objetos orientados a la aplicación para trabajar con diapositivas y elementos. * **Arquitectura de plugins**: mantiene fuera del núcleo las funciones opcionales, como tablas, gráficos, impresión e importación y exportación. ## Modo plugin ### Instalación #### npm ```bash npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui ``` #### pnpm ```bash pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui ``` #### yarn ```bash yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui ``` #### bun ```bash bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui ``` ### Uso ```ts import { UniverLicensePlugin } from '@univerjs-pro/license' import { UniverSlidesPlugin } from '@univerjs-pro/slides' import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui' import SlidesUIEnUS from '@univerjs-pro/slides-ui/locale/en-US' import SlidesEnUS from '@univerjs-pro/slides/locale/en-US' import { LocaleType, mergeLocales, Univer } from '@univerjs/core' import { FUniver } from '@univerjs/core/facade' import DesignEnUS from '@univerjs/design/locale/en-US' import { UniverDocsPlugin } from '@univerjs/docs' import { UniverDocsUIPlugin } from '@univerjs/docs-ui' import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US' import { UniverDrawingPlugin } from '@univerjs/drawing' import { UniverRenderEnginePlugin } from '@univerjs/engine-render' import { UniverUIPlugin } from '@univerjs/ui' import UIEnUS from '@univerjs/ui/locale/en-US' import '@univerjs-pro/slides/facade' import '@univerjs/design/lib/index.css' import '@univerjs/ui/lib/index.css' import '@univerjs/docs-ui/lib/index.css' import '@univerjs-pro/slides-ui/lib/index.css' const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, DocsUIEnUS, SlidesEnUS, SlidesUIEnUS), }, }) univer.registerPlugin(UniverRenderEnginePlugin) univer.registerPlugin(UniverUIPlugin, { container: 'app' }) univer.registerPlugin(UniverDocsPlugin) univer.registerPlugin(UniverDocsUIPlugin) univer.registerPlugin(UniverDrawingPlugin) univer.registerPlugin(UniverLicensePlugin, { license: process.env.CLIENT_LICENSE_TEXT, }) univer.registerPlugin(UniverSlidesPlugin) univer.registerPlugin(UniverSlidesUIPlugin) const univerAPI = FUniver.newAPI(univer) const presentation = univerAPI.createPresentation({ name: 'Quarterly review' }) ``` Para renderizar una presentación sin controles de edición, pasa `{ editor: { enabled: false } }` a `UniverSlidesUIPlugin`. En Node.js, registra únicamente `UniverSlidesPlugin`, sin el plugin de interfaz. ## Modo preestablecido Univer Slides no ofrece actualmente un paquete de preset. Utiliza el modo plugin tanto para un entorno que solo use el modelo como para el editor del navegador. ## Organización de la cinta Inicio contiene tema, transición, fondo y notas; Insertar agrupa contenido y lista de objetos; Vista ofrece tamaño de página, zoom y pantalla completa. La pestaña contextual depende de la selección: formas, imágenes, gráficos o controles comunes para selecciones mixtas con imágenes o gráficos. El formato de imagen incluye recorte y forma de recorte, tamaño, posición y rotación; algunos controles requieren una sola imagen. Las tablas usan los controles del plugin UI de tablas. El formato de forma incluye un interruptor independiente para la barra flotante. ## Orden de menús y disposición en cuadrícula Configura `menu` y `ribbonType` en el registro existente de `UniverUIPlugin`. Son opciones de la interfaz compartida, no de `UniverSlidesUIPlugin`. El ejemplo utiliza los identificadores reales de los menús de Slides: ### Configuración inicial ```ts import type { MenuConfig } from '@univerjs/ui' import { UniverUIPlugin } from '@univerjs/ui' const menu: MenuConfig = { 'ribbon.view': { order: -1 }, 'ribbon.start.layout': { order: -1 }, 'slide.menu.insert.text': { order: 1, gridLayout: { row: 1, column: 2, rowSpan: 2, showLabel: true, width: 96 }, }, 'slide.menu.insert.shape': { order: 0, gridLayout: { row: 1, column: 1, rowSpan: 2, showLabel: true }, }, } univer.registerPlugin(UniverUIPlugin, { container: 'app', ribbonType: 'grid', menu }) ``` `order` ordena de menor a mayor las pestañas, grupos o elementos del mismo nivel; no mueve elementos a otro grupo. El identificador del elemento se obtiene de su atributo `data-u-command` y no tiene por qué coincidir con el de la orden. ### Actualizaciones en ejecución Importa `@univerjs/ui/facade` antes de crear `univerAPI` con `FUniver.newAPI(univer)`. [`updateMenuConfig()`](https://docs.univer.ai/es-ES/reference/facade/univer.md#updatemenuconfig) combina los cambios, conserva los campos no especificados y actualiza los menús. La configuración también se aplica a los menús registrados posteriormente. ```ts import '@univerjs/ui/facade' univerAPI.updateMenuConfig({ 'slide.menu.insert.text': { gridLayout: { row: 1, column: 2, width: 120 } }, }) ``` `gridLayout` solo afecta al Ribbon en cuadrícula. Cada grupo tiene dos filas y `row` y `column` empiezan en 1. Las coordenadas explícitas determinan la posición: al intercambiar celdas ocupadas, actualiza ambos elementos y no solo `order`. Los campos opcionales omitidos conservan la configuración o el Schema existente. Consulta [`IRibbonGridLayout`](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/ui.md#iribbongridlayout) para los tamaños de celda, etiquetas, anchuras y tamaños de icono. Mantén habilitada la edición en `UniverSlidesUIPlugin`: `editor.enabled: false` impide registrar el Ribbon del producto. Las modificaciones de menú no crean botones que no estén registrados. Los botones personalizados y las entradas de submenú también aceptan `order` y `gridLayout` en [`createMenu()` y `createSubmenu()`](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/ui.md#ifacademenuitem); llama a `appendTo()` para registrarlos. El contenido del menú emergente no utiliza la cuadrícula del Ribbon.