# Установка и основы использования - Human documentation: [https://docs.univer.ai/ru-RU/guides/sheets/getting-started/installation](https://docs.univer.ai/ru-RU/guides/sheets/getting-started/installation) - Agent Markdown: [https://docs.univer.ai/ru-RU/guides/sheets/getting-started/installation.md](https://docs.univer.ai/ru-RU/guides/sheets/getting-started/installation.md) - Requested language: `ru-RU` - Content language: `ru-RU` - Documentation version: `1.2.0` - Source: [sheets/getting-started/installation/index.ru-RU.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/getting-started/installation/index.ru-RU.mdx) --- В основе Univer лежит архитектура плагинов, призванная предоставить разработчикам гибкий и расширяемый фреймворк для создания приложений для работы с электронными документами. Такая архитектура позволяет легко подключать различные функциональные модули с учетом потребностей разных пользователей. Однако она также усложняет приложение, особенно для разработчиков, которые только знакомятся с Univer. Поэтому Univer предлагает два способа быстрой интеграции и начала работы: **режим плагинов** и **режим предустановок**. **Предустановка** представляет собой набор заранее настроенных плагинов, поэтому без сложных расширений оба режима предоставляют одинаковые возможности. > [!WARNING: Внимание] > * **Одинаковые версии зависимостей**: независимо от выбранного режима — предустановок или плагинов — номера версий всех зависимостей должны совпадать. > * **Осторожное совместное использование плагинов и предустановок**: если плагин уже входит в предустановку, при ее использовании не нужно импортировать его отдельно. Иначе возможны конфликты плагинов или неполадки в работе функций. Различия между режимами плагинов и предустановок: | Режим плагинов | Режим предустановок | | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | Требуется вручную импортировать соответствующие пакеты Facade | Не требуется вручную импортировать пакеты Facade | | Необходимо учитывать порядок регистрации плагинов с одинаковой функциональностью | Порядок регистрации функций, включенных в предустановки, учитывать не нужно | | Поддерживается отложенная загрузка по требованию | Настроенные предустановки загружаются синхронно при инициализации | Univer поддерживает два способа интеграции: *режим предустановок* и *режим плагинов*. Предустановки упрощают настройку благодаря готовым наборам плагинов. Для **глубокой настройки и расширения возможностей** рекомендуем режим плагинов, позволяющий комбинировать и настраивать плагины по отдельности. ## Настройка в режиме плагинов Возможности Univer предоставляются в виде набора плагинов. Помимо нескольких основных плагинов, необходимых для работы продукта, остальные можно подключать по мере необходимости. Ниже на примере простейшего приложения Univer Sheets показано, как вручную подобрать, объединить и установить плагины. В отличие от режима предустановок, режим плагинов по умолчанию не включает Facade API[^facade-entry]. Поэтому фрагменты следующих примеров, связанные с Facade API, необязательны и при необходимости их можно удалить. ### Использование менеджера пакетов #### Установка Для разработки представления мы используем React (это не мешает использовать Univer с Vue или Angular), а для обработки потоков данных — Rxjs. Обе библиотеки широко применяются в современной фронтенд-разработке, поэтому мы указываем их как peerDependencies[^peer-dependency]. Однако менеджеры пакетов по-разному работают с peerDependencies, и здесь важно учесть несколько особенностей. > [!NOTE] > * При использовании npm убедитесь, что установлена версия npm\@7 или новее. Версии npm\@3 \~ npm\@6 некорректно устанавливают `peerDependencies`[^1]. > * При использовании pnpm убедитесь, что установлена версия pnpm\@8 или новее. Для pnpm\@6 \~ pnpm\@7 можно попробовать задать `auto-install-peers=true` [^2], чтобы устранить проблемы с установкой зависимостей. > * При использовании yarn недостающие `peerDependencies` необходимо устанавливать вручную[^3]. В приведенные ниже команды установки эти зависимости уже включены. #### pnpm ```shell pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui ``` #### npm ```shell npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui ``` #### yarn ```shell yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui react react-dom rxjs ``` #### bun ```shell bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui ``` #### Использование > [!WARNING: Внимание] > * Не все плагины содержат пакеты Facade, языковые пакеты и файлы стилей. Это указывается в документации каждой функции. > * Порядок импорта файлов стилей имеет значение. Сначала обязательно импортируйте CSS-стили `@univerjs/design` и `@univerjs/ui`, а уже затем стили остальных плагинов. 1. Импортируйте в проект файлы стилей Univer, языковые пакеты и необходимые плагины: ```typescript import { LocaleType, mergeLocales, Univer, UniverInstanceType } 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 { UniverFormulaEnginePlugin } from '@univerjs/engine-formula' import { UniverRenderEnginePlugin } from '@univerjs/engine-render' import { UniverSheetsPlugin } from '@univerjs/sheets' import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula' import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui' import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US' import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt' import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui' import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US' import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui' import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US' import SheetsEnUS from '@univerjs/sheets/locale/en-US' import { UniverUIPlugin } from '@univerjs/ui' import UIEnUS from '@univerjs/ui/locale/en-US' import '@univerjs/design/lib/index.css' import '@univerjs/ui/lib/index.css' import '@univerjs/docs-ui/lib/index.css' import '@univerjs/sheets-ui/lib/index.css' import '@univerjs/sheets-formula-ui/lib/index.css' import '@univerjs/sheets-numfmt-ui/lib/index.css' ``` 1. Если требуется Facade API, импортируйте соответствующие пакеты Facade. Это необязательно, но рекомендуется: ```typescript import '@univerjs/engine-formula/facade' import '@univerjs/ui/facade' import '@univerjs/docs-ui/facade' import '@univerjs/sheets/facade' import '@univerjs/sheets-ui/facade' import '@univerjs/sheets-formula/facade' import '@univerjs/sheets-numfmt/facade' ``` 1. Затем создайте экземпляр Univer и зарегистрируйте плагины: ```typescript const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DesignEnUS, UIEnUS, DocsUIEnUS, SheetsEnUS, SheetsUIEnUS, SheetsFormulaUIEnUS, SheetsNumfmtUIEnUS, ), }, }) univer.registerPlugin(UniverRenderEnginePlugin) univer.registerPlugin(UniverFormulaEnginePlugin) univer.registerPlugin(UniverUIPlugin, { container: 'app', }) univer.registerPlugin(UniverDocsPlugin) univer.registerPlugin(UniverDocsUIPlugin) univer.registerPlugin(UniverSheetsPlugin) univer.registerPlugin(UniverSheetsUIPlugin) univer.registerPlugin(UniverSheetsFormulaPlugin) univer.registerPlugin(UniverSheetsFormulaUIPlugin) univer.registerPlugin(UniverSheetsNumfmtPlugin) univer.registerPlugin(UniverSheetsNumfmtUIPlugin) univer.createUnit(UniverInstanceType.UNIVER_SHEET, {}) const univerAPI = FUniver.newAPI(univer) ``` > Interactive example: [Open the playground](/playground/sheets/slim-via-plugin) #### Методы `univer.registerPlugin` и `univer.registerPlugins` Метод \`\`univer.registerPlugin\` используется для регистрации плагина в экземпляре Univer. После создания экземпляра Univer вызовите этот метод, чтобы зарегистрировать плагины. Плагин можно зарегистрировать с помощью метода `univer.registerPlugin(Plugin, options)`, где `Plugin` — регистрируемый плагин, а `options` — необязательные параметры конфигурации, которые могут различаться в зависимости от плагина. Для одновременной регистрации нескольких плагинов передайте массив в `univer.registerPlugins`. Это удобно, когда требуется централизованно управлять плагинами. ```typescript univer.registerPlugins([ UniverRenderEnginePlugin, UniverFormulaEnginePlugin, [UniverUIPlugin, { container: 'app', }], UniverDocsPlugin, UniverDocsUIPlugin, UniverSheetsPlugin, UniverSheetsUIPlugin, UniverSheetsFormulaPlugin, UniverSheetsFormulaUIPlugin, UniverSheetsNumfmtPlugin, UniverSheetsNumfmtUIPlugin, ]) ``` #### Отложенная загрузка плагинов Одно из преимуществ режима плагинов — возможность гибко управлять моментом их загрузки. Обычно при инициализации приложения загружают только необходимые плагины, а загрузку остальных откладывают до завершения первого рендеринга. ```typescript // ... univer.createUnit(UniverInstanceType.UNIVER_SHEET, {}) import('@univerjs/watermark').then(({ UniverWatermarkPlugin }) => { univer.registerPlugin(UniverWatermarkPlugin, { textWatermarkSettings: { content: 'Hello, Univer!', fontSize: 36, }, }) }) ``` В нашей [официальной демонстрации](https://github.com/dream-num/univer/blob/0d849012594882307186f33734b8b89d80a729e9/examples/src/sheets/main.ts) используется этот способ оптимизации — при необходимости можно ориентироваться на нее. ### Поддержка мобильных устройств > [!WARNING] > Для примеров нужны пакеты SDK, экспортирующие перечисленные мобильные плагины. Все зависимости `@univerjs/*` и `@univerjs-pro/*` должны иметь **одинаковую версию**. Для сенсорного интерфейса Univer Sheets используйте **мобильные UI-плагины**.[^mobile-ui-mode] Выберите режим до создания редактора. Мобильная поддержка Sheets остаётся **экспериментальной**. Проверьте нужные приложению функции на целевых устройствах. В примере режима плагинов выше **замените** следующие импорты и регистрации UI до вызова `createUnit()`. Не добавляйте их к уже инициализированному настольному редактору. Сохраните плагины моделей, движки, локализации, CSS и импорты Facade. Классы экспортируются под разными именами из **одной точки входа пакета**. ```typescript import { UniverSheetsFormulaMobileUIPlugin } from '@univerjs/sheets-formula-ui' import { UniverSheetsNumfmtMobileUIPlugin } from '@univerjs/sheets-numfmt-ui' import { UniverSheetsMobileUIPlugin } from '@univerjs/sheets-ui' import { UniverMobileUIPlugin } from '@univerjs/ui' univer.registerPlugin(UniverMobileUIPlugin, { container: 'app' }) univer.registerPlugin(UniverSheetsMobileUIPlugin) univer.registerPlugin(UniverSheetsFormulaMobileUIPlugin) univer.registerPlugin(UniverSheetsNumfmtMobileUIPlugin) ``` **В Sheets сохраните `UniverDocsUIPlugin`.** Он нужен `UniverSheetsMobileUIPlugin` для редактирования текста внутри ячеек. Отдельный редактор Docs использует `UniverDocsMobileUIPlugin`. Текущие `UniverSheetsCorePreset` и `UniverDocsCorePreset` регистрируют настольный UI и не имеют параметра `mobile: true`. Для мобильного режима явно соберите набор плагинов. Добавление мобильных плагинов после настольного пресета не заменяет его UI. #### Соответствие плагинов Регистрируйте только нужные функции, сохраняя плагины моделей и зависимости. Наличие мобильного UI не означает одинаковый набор элементов управления на обеих платформах. Функциям Pro по-прежнему нужны соответствующая лицензия. Для функций, которым нужен backend, подключите соответствующие модули [Univer Server SDK](https://docs.univer.ai/ru-RU/server.md) к своему приложению. | Пакет | Настольная регистрация | Мобильная регистрация | | -------------------------------------------- | ------------------------------------------- | ------------------------------------------------- | | `@univerjs/ui` | `UniverUIPlugin` | `UniverMobileUIPlugin` | | `@univerjs/sheets-ui` | `UniverSheetsUIPlugin` | `UniverSheetsMobileUIPlugin` | | `@univerjs/sheets-formula-ui` | `UniverSheetsFormulaUIPlugin` | `UniverSheetsFormulaMobileUIPlugin` | | `@univerjs/sheets-numfmt-ui` | `UniverSheetsNumfmtUIPlugin` | `UniverSheetsNumfmtMobileUIPlugin` | | `@univerjs/drawing-ui` | `UniverDrawingUIPlugin` | `UniverDrawingMobileUIPlugin` | | `@univerjs/thread-comment-ui` | `UniverThreadCommentUIPlugin` | `UniverThreadCommentMobileUIPlugin` | | `@univerjs-pro/shape-editor-ui` | `UniverShapeEditorUIPlugin` | `UniverShapeEditorMobileUIPlugin` | | `@univerjs-pro/chart-ui` | `UniverChartUIPlugin` | `UniverChartMobileUIPlugin` | | `@univerjs-pro/exchange-client` | `UniverExchangeClientPlugin` | `UniverExchangeClientMobileUIPlugin` | | `@univerjs/sheets-conditional-formatting-ui` | `UniverSheetsConditionalFormattingUIPlugin` | `UniverSheetsConditionalFormattingMobileUIPlugin` | | `@univerjs/sheets-crosshair-highlight` | `UniverSheetsCrosshairHighlightPlugin` | `UniverSheetsCrosshairHighlightMobileUIPlugin` | | `@univerjs/sheets-data-validation-ui` | `UniverSheetsDataValidationUIPlugin` | `UniverSheetsDataValidationMobileUIPlugin` | | `@univerjs/sheets-drawing-ui` | `UniverSheetsDrawingUIPlugin` | `UniverSheetsDrawingMobileUIPlugin` | | `@univerjs/sheets-filter-ui` | `UniverSheetsFilterUIPlugin` | `UniverSheetsFilterMobileUIPlugin` | | `@univerjs/sheets-find-replace` | `UniverSheetsFindReplacePlugin` | `UniverSheetsFindReplaceMobileUIPlugin` | | `@univerjs/sheets-hyper-link-ui` | `UniverSheetsHyperLinkUIPlugin` | `UniverSheetsHyperLinkMobileUIPlugin` | | `@univerjs/sheets-sort-ui` | `UniverSheetsSortUIPlugin` | `UniverSheetsSortMobileUIPlugin` | | `@univerjs/sheets-table-ui` | `UniverSheetsTableUIPlugin` | `UniverSheetsTableMobileUIPlugin` | | `@univerjs/sheets-thread-comment-ui` | `UniverSheetsThreadCommentUIPlugin` | `UniverSheetsThreadCommentMobileUIPlugin` | | `@univerjs-pro/sheets-chart-ui` | `UniverSheetsChartUIPlugin` | `UniverSheetsChartMobileUIPlugin` | | `@univerjs-pro/sheets-exchange-client` | `UniverSheetsExchangeClientPlugin` | `UniverSheetsExchangeClientMobileUIPlugin` | | `@univerjs-pro/sheets-history-ui` | `UniverSheetsHistoryUIPlugin` | `UniverSheetsHistoryMobileUIPlugin` | | `@univerjs-pro/sheets-outline-ui` | `UniverSheetsOutlineUIPlugin` | `UniverSheetsOutlineMobileUIPlugin` | | `@univerjs-pro/sheets-pivot-ui` | `UniverSheetsPivotTableUIPlugin` | `UniverSheetsPivotTableMobileUIPlugin` | | `@univerjs-pro/sheets-print` | `UniverSheetsPrintPlugin` | `UniverSheetsPrintMobileUIPlugin` | | `@univerjs-pro/sheets-shape-ui` | `UniverSheetsShapeUIPlugin` | `UniverSheetsShapeMobileUIPlugin` | | `@univerjs-pro/sheets-sparkline-ui` | `UniverSheetSparklineUIPlugin` | `UniverSheetSparklineMobileUIPlugin` | | `@univerjs/find-replace` | `UniverFindReplacePlugin` | `UniverFindReplaceMobileUIPlugin` | #### Контейнер и сенсорное управление Задайте явную высоту контейнера и viewport страницы. `100dvh` соответствует динамической высоте области просмотра. Проверьте прокрутку, масштабирование двумя пальцами, выделение текста, буфер обмена и экранную клавиатуру в целевых мобильных браузерах. Уменьшение ширины не включает мобильные плагины. `UniverMobileUIPlugin` по умолчанию использует `disableAutoFocus: true`, чтобы редактор не получал фокус автоматически при инициализации. ```html
``` > Interactive example: [Open the playground](/playground/sheets/mobile-via-plugin) ### Импорт из CDN Если вы не хотите использовать менеджер пакетов или желаете быстро попробовать возможности Univer, необходимые ресурсы можно импортировать через CDN. Подробнее см. в разделе [Использование Univer через CDN](https://docs.univer.ai/ru-RU/guides/sheets/getting-started/installation/cdn.md#plugin-mode). ## Настройка в режиме предустановок Ниже показано, как быстро создать приложение Univer Sheets менее чем в двадцать строк кода. ### Использование менеджера пакетов Если в проекте уже применяются современные инструменты фронтенд-разработки, интегрировать Univer будет очень просто. Для сборки приложений Univer рекомендуем использовать инструменты с хорошей поддержкой ES Modules, например [Vite](https://vitejs.dev/), [esbuild](https://esbuild.github.io/) или [Webpack 5](https://webpack.js.org/). Для других инструментов сборки, таких как Webpack 4, может потребоваться дополнительная настройка. #### Установка Установите `@univerjs/presets` с помощью выбранного менеджера пакетов: #### npm ```bash npm install @univerjs/presets @univerjs/preset-sheets-core ``` #### pnpm ```bash pnpm add @univerjs/presets @univerjs/preset-sheets-core ``` #### yarn ```bash yarn add @univerjs/presets @univerjs/preset-sheets-core ``` #### bun ```bash bun add @univerjs/presets @univerjs/preset-sheets-core ``` #### Использование > [!WARNING] > Если инструмент сборки не поддерживает поле `exports` в package.json (это часто встречается в Webpack 4), необходимо вручную заменить сопоставленные пути фактическими. Следующий код запускает приложение Univer Sheets: ```html title="index.html"
``` ```typescript import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core' import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US' import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets' import '@univerjs/preset-sheets-core/lib/index.css' const { univer, univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, ), }, presets: [ UniverSheetsCorePreset({ container: 'app', }), ], }) univerAPI.createWorkbook({}) ``` Возвращаемый здесь объект `univerAPI` называется Univer Facade API. Через него можно обращаться ко многим функциям Univer. > Interactive example: [Open the playground](/playground/sheets/slim-via-preset) > [!WARNING] > `UniverSheetsCorePreset` также можно импортировать из `@univerjs/presets/preset-sheets-core`, но при этом необходимо убедиться, что инструмент сборки поддерживает поле `exports` в package.json. #### Метод `createUniver` Метод `createUniver` принимает объект конфигурации Univer, в котором задаются язык, тема, плагины и другие параметры. Он возвращает объект с экземпляром Univer и экземпляром Univer Facade API. Некоторые свойства объекта конфигурации: * `locale`: языковая среда; можно использовать значение перечисления `LocaleType`. * `locales`: объект локалей, где ключ — языковая среда, а значение — объект языкового пакета. * `theme`: необязательный объект темы. * `presets`: массив регистрируемых предустановок, например `UniverSheetsCorePreset`. * `plugins`: массив дополнительных плагинов, которые необходимо зарегистрировать. Плагины, не входящие ни в один пакет предустановок, а также собственные плагины можно зарегистрировать через свойство `plugins`. Кроме того, после получения экземпляра Univer плагины можно регистрировать методом `univer.registerPlugin`. > [!NOTE] > Подробнее о методе `createUniver` см. в разделе [Справочник API / createUniver](https://docs.univer.ai/ru-RU/reference/methods/create-univer.md). ### Импорт из CDN Если вы не хотите использовать менеджер пакетов или желаете быстро попробовать возможности Univer, необходимые ресурсы можно импортировать через CDN. Подробнее см. в разделе [Использование Univer через CDN](https://docs.univer.ai/ru-RU/guides/sheets/getting-started/installation/cdn.md#plugin-mode). ## Другие каналы выпуска Помимо стабильных выпусков, Univer предлагает каналы alpha / beta и nightly. Они позволяют заранее получить доступ к новейшим функциям, которые еще не выпущены официально. Однако вместе с новыми возможностями возрастают и риски: такие версии могут содержать ошибки, неполные или нестабильные функции. По возможности не используйте их в рабочей среде. ### Выпуски Alpha / Beta После завершения работы над новой функцией или существенным изменением команда разработчиков Univer может предварительно опубликовать их в канале alpha или beta. Установить alpha- или beta-версию пакета Univer можно следующей командой: #### npm ```bash npm install @univerjs/@alpha # Alpha version npm install @univerjs/@beta # Beta version ``` #### pnpm ```bash pnpm add @univerjs/@alpha # Alpha version pnpm add @univerjs/@beta # Beta version ``` #### yarn ```bash yarn add @univerjs/@alpha # Alpha version yarn add @univerjs/@beta # Beta version ``` #### bun ```bash bun add @univerjs/@alpha # Alpha version bun add @univerjs/@beta # Beta version ``` Если при использовании alpha- или beta-версий вы обнаружите проблему или захотите поделиться отзывом, сообщите об этом команде разработчиков Univer через [GitHub Issues](https://github.com/dream-num/univer/issues). Мы будем рады вашим отзывам о предварительных выпусках. ## Что дальше * [Основные понятия](https://docs.univer.ai/ru-RU/guides/sheets/getting-started/quickstart.md#basic-concepts) - Познакомьтесь с основными понятиями Univer. * [Возможности](https://docs.univer.ai/ru-RU/guides/sheets/features/core.md) - Узнайте о возможностях Univer и работе с данными. *** [^1]: [https://blog.npmjs.org/post/110924823920/npm-weekly-5](https://blog.npmjs.org/post/110924823920/npm-weekly-5) [^2]: [https://pnpm.io/npmrc#auto-install-peers](https://pnpm.io/npmrc#auto-install-peers) [^3]: [https://github.com/yarnpkg/yarn/issues/1503](https://github.com/yarnpkg/yarn/issues/1503) [^facade-entry]: Facade — прикладной API зарегистрированных плагинов. Импорт точки входа Facade добавляет методы API, но не регистрирует сам функциональный плагин. [^peer-dependency]: `peerDependencies` — зависимости, совместимые версии которых предоставляет основное приложение. Это позволяет Univer и приложению использовать общую копию библиотек, например React. [^mobile-ui-mode]: Мобильный UI-плагин выбирает сенсорные элементы управления и мобильные сервисы при инициализации. Он не определяет устройство автоматически и не переключает существующий экземпляр при изменении размера окна. Чтобы сменить режим, сохраните состояние документа, уничтожьте старый экземпляр и инициализируйте выбранный набор плагинов.