# Основные возможности - Human documentation: [https://docs.univer.ai/ru-RU/guides/slides/features/core](https://docs.univer.ai/ru-RU/guides/slides/features/core) - Agent Markdown: [https://docs.univer.ai/ru-RU/guides/slides/features/core.md](https://docs.univer.ai/ru-RU/guides/slides/features/core.md) - Requested language: `ru-RU` - Content language: `ru-RU` - Documentation version: `1.2.0` - Source: [slides/features/core/index.ru-RU.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/features/core/index.ru-RU.mdx) --- #### Package metadata ```json { "preset": [], "plugins": [ { "client": "@univerjs-pro/slides", "locale": "@univerjs-pro/slides/locale/ru-RU", "facade": "@univerjs-pro/slides/facade" }, { "client": "@univerjs-pro/slides-ui", "locale": "@univerjs-pro/slides-ui/locale/ru-RU", "style": "@univerjs-pro/slides-ui/lib/index.css" } ], "license": true, "server": false } ``` Ядро Univer Slides объединяет модель презентации и интерфейс редактирования в браузере. Модель сохраняет презентацию как снимок `ISlideData`, а интерфейс отображает и изменяет эту модель с помощью команд Univer. ## Возможности * **Модель презентации**: управляет идентификатором, размером страницы, порядком слайдов, слайдами, образцами, макетами, темами, переходами и ресурсами. * **Отображение и редактирование**: предоставляет холст, миниатюры, выделение, буфер обмена, редактирование текста и фигур, направляющие выравнивания и показ слайдов. * **Конвейер команд**: применяет изменения страниц и элементов через команды и мутации, синхронизируя модель, отображение, отмену и повтор. * **Facade API**: создаёт, находит и сохраняет презентации, а также предоставляет прикладные объекты для работы со слайдами и элементами. * **Архитектура плагинов**: отделяет от ядра дополнительные функции — таблицы, диаграммы, печать, импорт и экспорт. ## Режим пресетов Univer Slides пока не предоставляет пакет пресета. Используйте режим плагинов как для среды только с моделью, так и для браузерного редактора. ## Режим плагинов ### Установка #### 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 ``` ### Использование ```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' }) ``` Чтобы отображать презентацию в браузере без элементов редактирования, передайте в `UniverSlidesUIPlugin` параметр `{ editor: { enabled: false } }`. В Node.js регистрируйте только `UniverSlidesPlugin`, без плагина интерфейса. ## Организация ленты Вкладка начала содержит тему, переход, фон и заметки; вставка — содержимое и список объектов; вид — размер страницы, масштаб и полный экран. Контекстная вкладка зависит от выбора: фигуры, изображения, диаграммы или общие операции для смешанного выбора с изображениями либо диаграммами. Формат изображения включает обрезку и её форму, размер, положение и поворот; часть элементов требует одного изображения. Таблицы используют элементы своего UI-плагина. Для фигур также есть отдельный переключатель плавающей панели. ## Порядок меню и сеточная раскладка Задайте `menu` и `ribbonType` при существующей регистрации `UniverUIPlugin`. Это параметры общего UI, а не `UniverSlidesUIPlugin`. В примере используются реальные идентификаторы пунктов меню Slides: ### Начальная настройка ```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` сортирует вкладки, группы или пункты одного уровня по возрастанию и не переносит пункты в другую группу. Идентификатор пункта можно получить из атрибута `data-u-command`; он не обязательно совпадает с идентификатором команды. ### Обновление во время работы Импортируйте `@univerjs/ui/facade` перед созданием `univerAPI` через `FUniver.newAPI(univer)`. [`updateMenuConfig()`](https://docs.univer.ai/ru-RU/reference/facade/univer.md#updatemenuconfig) объединяет изменения, сохраняет неуказанные поля и обновляет меню. Настройки также применяются к меню, зарегистрированным позднее. ```ts import '@univerjs/ui/facade' univerAPI.updateMenuConfig({ 'slide.menu.insert.text': { gridLayout: { row: 1, column: 2, width: 120 } }, }) ``` `gridLayout` действует только на сеточную ленту Ribbon. В каждой группе две строки; `row` и `column` начинаются с 1. Явные координаты определяют положение, поэтому при обмене занятыми ячейками меняйте оба пункта, а не только `order`. Неуказанные необязательные поля наследуются из текущих настроек или Schema. Размеры областей, подписи, ширина и размер значков описаны в [`IRibbonGridLayout`](https://docs.univer.ai/ru-RU/reference/packages/plugins/univerjs/ui.md#iribbongridlayout). Оставьте редактирование включённым в `UniverSlidesUIPlugin`: при `editor.enabled: false` лента продукта не регистрируется. Переопределения меню не создают незарегистрированные кнопки. Для своих кнопок и пунктов, открывающих подменю, [`createMenu()` и `createSubmenu()`](https://docs.univer.ai/ru-RU/reference/packages/plugins/univerjs/ui.md#ifacademenuitem) также принимают `order` и `gridLayout`; вызовите `appendTo()` для регистрации. На содержимое всплывающего меню сетка Ribbon не распространяется.