Выноски
Выноски позволяют акцентировать важную информацию в документе с помощью визуально заметных блоков, для которых можно настраивать значки и цвета.
Введение
В Univer Docs выноски позволяют:
- Акцентировать важную информацию: привлекать внимание к важным примечаниям, предупреждениям и советам.
- Настраивать оформление: выбирать значки и цветовые схемы в соответствии с содержимым.
- Организовывать содержимое: структурировать документ с помощью визуально отделённых разделов.
Режим плагинов
Установка
pnpm add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-uinpm install @univerjs-pro/docs-callout @univerjs-pro/docs-callout-uiyarn add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-uibun add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-uiИспользование
import { UniverDocsCalloutPlugin } from '@univerjs-pro/docs-callout'import { UniverDocsCalloutUIPlugin } from '@univerjs-pro/docs-callout-ui'import DocsCalloutUIEnUS from '@univerjs-pro/docs-callout-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-callout-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DocsCalloutUIEnUS, ), },})univer.registerPlugin(UniverDocsCalloutPlugin)univer.registerPlugin(UniverDocsCalloutUIPlugin)Если у вас есть коммерческая лицензия Univer, ознакомьтесь с разделом Использование лицензии в клиенте, чтобы настроить её.
Поддержка мобильных устройств
Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.
| Пакет | Настольная регистрация | Мобильная регистрация |
|---|---|---|
@univerjs-pro/docs-callout-ui | UniverDocsCalloutUIPlugin | UniverDocsCalloutMobileUIPlugin |
Facade API
Перед использованием API обязательно импортируйте facade:
import '@univerjs-pro/docs-callout/facade'Получение всех выносок
const doc = univerAPI.getActiveDocument()const callouts = doc?.getCallouts() ?? []Получение выноски по ID
const doc = univerAPI.getActiveDocument()const callout = doc?.getCallout('callout-block-id')Вставка выноски
const doc = univerAPI.getActiveDocument()const callout = doc?.insertCallout({ startOffset: 12, endOffset: 35, config: { icon: '💡' },})Обновление конфигурации выноски
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.updateConfig({ icon: '⚠️' })Настройка внешнего вида выноски
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.setIcon('📝')callout?.setBackgroundColor('#FFF4E5')callout?.setBorder({ color: '#E6A23C', width: 2 })callout?.setTextColor('#5C3B00')Внешний вид Callout изменяется командами документа с отменой, повтором и совместной работой. setTextColor() задаёт цвет всего текста блока; resetTextColor() снимает переопределение и восстанавливает цвета, унаследованные от документа.
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.resetTextColor()Насколько полезно это руководство?