Encadré
La fonctionnalité d’encadré permet de mettre en valeur les informations importantes d’un document dans des blocs visuellement distincts, avec des icônes et des couleurs personnalisables.
Introduction
Dans Univer Docs, les encadrés permettent de :
- Mettre en valeur les informations clés : attirer l’attention sur des remarques, des avertissements ou des conseils importants.
- Personnaliser l’apparence : choisir parmi différentes icônes et palettes de couleurs en fonction du contenu.
- Organiser le contenu : structurer le document à l’aide de sections visuellement séparées.
Mode plugin
Installation
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-uiUtilisation
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)Si vous disposez d’une licence commerciale Univer, consultez la page Utiliser une licence côté client pour savoir comment la configurer.
Prise en charge mobile
Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.
| Paquet | Inscription de bureau | Inscription mobile |
|---|---|---|
@univerjs-pro/docs-callout-ui | UniverDocsCalloutUIPlugin | UniverDocsCalloutMobileUIPlugin |
API Facade
Veillez à importer la façade avant d’utiliser l’API :
import '@univerjs-pro/docs-callout/facade'Obtenir tous les encadrés
const doc = univerAPI.getActiveDocument()const callouts = doc?.getCallouts() ?? []Obtenir un encadré par son ID
const doc = univerAPI.getActiveDocument()const callout = doc?.getCallout('callout-block-id')Insérer un encadré
const doc = univerAPI.getActiveDocument()const callout = doc?.insertCallout({ startOffset: 12, endOffset: 35, config: { icon: '💡' },})Mettre à jour la configuration d’un encadré
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.updateConfig({ icon: '⚠️' })Définir l’apparence d’un encadré
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.setIcon('📝')callout?.setBackgroundColor('#FFF4E5')callout?.setBorder({ color: '#E6A23C', width: 2 })callout?.setTextColor('#5C3B00')Les modifications d’apparence des Callouts passent par les commandes du document et prennent en charge l’historique et la collaboration. setTextColor() colore tout le texte du bloc ; resetTextColor() supprime cette surcharge et restaure la couleur héritée du document.
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.resetTextColor()Que pensez-vous de ce guide ?