Mise en forme conditionnelle
La mise en forme conditionnelle permet de modifier automatiquement le format des cellules selon des conditions précises, afin de mettre en évidence les données ou tendances importantes. Elle prend en charge différentes conditions et options de mise en forme, ce qui facilite une compréhension plus intuitive des données.
Mode plugin
Installation
pnpm add @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-uinpm install @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-uiyarn add @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-uibun add @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-uiUtilisation
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsConditionalFormattingPlugin } from '@univerjs/sheets-conditional-formatting'import { UniverSheetsConditionalFormattingUIPlugin } from '@univerjs/sheets-conditional-formatting-ui'import SheetsConditionalFormattingUIEnUS from '@univerjs/sheets-conditional-formatting-ui/locale/en-US'import '@univerjs/sheets-conditional-formatting-ui/lib/index.css'import '@univerjs/sheets-conditional-formatting/facade'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( SheetsConditionalFormattingUIEnUS, ), },})univer.registerPlugin(UniverSheetsConditionalFormattingPlugin)univer.registerPlugin(UniverSheetsConditionalFormattingUIPlugin)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/sheets-conditional-formatting-ui | UniverSheetsConditionalFormattingUIPlugin | UniverSheetsConditionalFormattingMobileUIPlugin |
Mode preset
Installation
pnpm add @univerjs/preset-sheets-conditional-formattingnpm install @univerjs/preset-sheets-conditional-formattingyarn add @univerjs/preset-sheets-conditional-formattingbun add @univerjs/preset-sheets-conditional-formattingUtilisation
import { UniverSheetsConditionalFormattingPreset } from '@univerjs/preset-sheets-conditional-formatting'import UniverPresetSheetsConditionalFormattingEnUS from '@univerjs/preset-sheets-conditional-formatting/locales/en-US'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'import '@univerjs/preset-sheets-conditional-formatting/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, UniverPresetSheetsConditionalFormattingEnUS, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsConditionalFormattingPreset(), ],})API Facade
Vous trouverez les définitions de types complètes de l’API Facade dans la FacadeAPI.
Importation
Remarque sur le mode plugin
Seul le mode plugin nécessite d’importer manuellement le package Facade. Le mode preset inclut déjà le package Facade correspondant ; aucune importation supplémentaire n’est donc nécessaire.
import '@univerjs/sheets-conditional-formatting/facade'Créer des règles de mise en forme conditionnelle
FWorksheet.newConditionalFormattingRule() crée un générateur de mise en forme conditionnelle et renvoie une instance de FConditionalFormattingBuilder. Celle-ci permet de générer des règles de mise en forme conditionnelle en chaînant les méthodes.
Voici quelques méthodes membres de FConditionalFormattingBuilder :
| Méthode | Description |
|---|---|
| build | Génère la règle de mise en forme conditionnelle |
| copy | Crée une copie complète du générateur actuel |
| createCfId | Crée un identifiant de mise en forme conditionnelle |
| getRanges | Obtient la plage d’application de la mise en forme conditionnelle actuelle |
| setRanges | Définit la plage de la règle de mise en forme conditionnelle |
| setAverage | Définit une règle de mise en forme conditionnelle basée sur la valeur moyenne |
| setUniqueValues | Définit une règle de mise en forme conditionnelle pour les valeurs uniques |
| setDuplicateValues | Définit une règle de mise en forme conditionnelle pour les valeurs en double |
| setRank | Définit une règle de mise en forme conditionnelle basée sur le classement |
| setIconSet | Définit une règle de mise en forme conditionnelle avec un jeu d’icônes |
| setColorScale | Définit une règle de mise en forme conditionnelle avec une échelle de couleurs |
| setDataBar | Définit une règle de mise en forme conditionnelle avec une barre de données |
| setBackground | Définit la couleur d’arrière-plan de la mise en forme conditionnelle |
| setBold | Indique si la police de la mise en forme conditionnelle est en gras |
| setFontColor | Définit la couleur de police de la mise en forme conditionnelle |
| setItalic | Indique si la police de la mise en forme conditionnelle est en italique |
| setStrikethrough | Indique si la police de la mise en forme conditionnelle est barrée |
| setUnderline | Indique si la police de la mise en forme conditionnelle est soulignée |
| whenCellEmpty | Déclenche la règle de mise en forme conditionnelle lorsque la cellule est vide |
| whenCellNotEmpty | Déclenche la règle de mise en forme conditionnelle lorsque la cellule n’est pas vide |
| whenDate | Déclenche la règle de mise en forme conditionnelle lorsque la date appartient à une période donnée |
| whenFormulaSatisfied | Déclenche la règle de mise en forme conditionnelle lorsque le résultat de la formule est vrai |
| whenNumberBetween | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est compris entre deux valeurs données ou égal à l’une d’elles |
| whenNumberEqualTo | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est égal à la valeur donnée |
| whenNumberGreaterThan | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est supérieur à la valeur donnée |
| whenNumberGreaterThanOrEqualTo | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est supérieur ou égal à la valeur donnée |
| whenNumberLessThan | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est inférieur à la valeur donnée |
| whenNumberLessThanOrEqualTo | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est inférieur ou égal à la valeur donnée |
| whenNumberNotBetween | Déclenche la règle de mise en forme conditionnelle lorsque le nombre n’est pas compris entre deux valeurs données et n’est égal à aucune d’elles |
| whenNumberNotEqualTo | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est différent de la valeur donnée |
| whenTextContains | Déclenche la règle de mise en forme conditionnelle lorsque le texte contient la valeur indiquée |
| whenTextDoesNotContain | Déclenche la règle de mise en forme conditionnelle lorsque le texte ne contient pas la valeur indiquée |
| whenTextEndsWith | Déclenche la règle de mise en forme conditionnelle lorsque le texte se termine par la valeur indiquée |
| whenTextEqualTo | Déclenche la règle de mise en forme conditionnelle lorsque le texte est égal à la valeur donnée |
| whenTextStartsWith | Déclenche la règle de mise en forme conditionnelle lorsque le texte commence par la valeur indiquée |
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Create a conditional formatting rule that sets the cell format to italic, red background, and green font color when the cell is not empty.const fRange = fWorksheet.getRange('A1:T100')const rule = fWorksheet.newConditionalFormattingRule() .whenCellNotEmpty() .setRanges([fRange.getRange()]) .setItalic(true) .setBackground('red') .setFontColor('green') .build()fWorksheet.addConditionalFormattingRule(rule)Obtenir les règles de mise en forme conditionnelle
FWorksheet.getConditionalFormattingRules()obtient toutes les règles de mise en forme conditionnelle de la feuille de calculFRange.getConditionalFormattingRules()obtient toutes les règles de mise en forme conditionnelle de la plage
const fWorkbook = univerAPI.getActiveWorkbook()// Get all conditional formatting rules of the active worksheetconst fWorksheet = fWorkbook.getActiveSheet()const rulesOfSheet = fWorksheet.getConditionalFormattingRules()// Get all conditional formatting rules of the range A1:T100const fRange = fWorksheet.getRange('A1:T100')const rulesOfRange = fRange.getConditionalFormattingRules()Supprimer des règles de mise en forme conditionnelle
FWorksheet.deleteConditionalFormattingRule(cfId) supprime une règle de mise en forme conditionnelle de la feuille de calcul, où cfId est l’identifiant de cette règle.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rules = fWorksheet.getConditionalFormattingRules()// Remove the first conditional formatting rulefWorksheet.deleteConditionalFormattingRule(rules[0]?.cfId)Mettre à jour des règles de mise en forme conditionnelle
FWorksheet.setConditionalFormattingRule(cfId, rule) met à jour une règle de mise en forme conditionnelle dans la feuille de calcul, où cfId est l’identifiant de la règle et rule la nouvelle règle.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Create a conditional formatting rule that sets the cell format to italic, red background, and green font color when the cell is not empty.const fRange = fWorksheet.getRange('A1:T100')const rule = fWorksheet.newConditionalFormattingRule() .whenCellNotEmpty() .setRanges([fRange.getRange()]) .setItalic(true) .setBackground('red') .setFontColor('green') .build()fWorksheet.addConditionalFormattingRule(rule)// Modify the first rule to apply to a new rangeconst rules = fWorksheet.getConditionalFormattingRules()const newRuleRange = fWorksheet.getRange('A1:D10')fWorksheet.setConditionalFormattingRule(rules[0]?.cfId, { ...rules[0], ranges: [newRuleRange.getRange()] })Modifier la priorité des règles de mise en forme conditionnelle
FWorksheet.moveConditionalFormattingRule(cfId, toCfId, type) modifie la priorité d’une règle de mise en forme conditionnelle dans la feuille de calcul, où cfId est l’identifiant de la règle, toCfId celui de la règle cible et type le type de déplacement (par exemple, 'before' ou 'after').
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rules = fWorksheet.getConditionalFormattingRules()// Move the third rule before the first ruleconst rule = rules[2]const targetRule = rules[0]fWorksheet.moveConditionalFormattingRule(rule?.cfId, targetRule?.cfId, 'before')Effacer toutes les règles de mise en forme conditionnelle
FWorksheet.clearConditionalFormatRules()efface toutes les règles de mise en forme conditionnelle de la feuille de calcul.FRange.clearConditionalFormatRules()efface toutes les règles de mise en forme conditionnelle de la plage.
const fWorkbook = univerAPI.getActiveWorkbook()// Clear all conditional formatting rules of the active worksheetconst fWorksheet = fWorkbook.getActiveSheet()fWorksheet.clearConditionalFormatRules()// Clear all conditional formatting rules of the range A1:T100const fRange = fWorksheet.getRange('A1:T100')fRange.clearConditionalFormatRules()Réutiliser les descriptions et aperçus de règles
Pour une liste personnalisée, importez getRuleDescribe et ConditionalFormattingRulePreview depuis @univerjs/sheets-conditional-formatting-ui. Passez la règle entière à getRuleDescribe(rule, localeService) et seulement sa configuration (rule.rule) à l’aperçu. Celui-ci montre l’apparence configurée sans évaluer les cellules. Rendez-le dans le contexte React d’Univer.
CF_PANEL_KEY identifie le panneau intégré pour la substitution de composants. Le callback IConditionFormattingPanelProps.onEditorExit est appelé à la fin de l’édition après validation, annulation, activation ou suppression d’une feuille. Il n’indique ni un enregistrement réussi ni la fermeture de la barre latérale.
import type { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting'import { LocaleService } from '@univerjs/core'import { ConditionalFormattingRulePreview, getRuleDescribe } from '@univerjs/sheets-conditional-formatting-ui'import { useDependency } from '@univerjs/ui'interface IRuleSummaryProps { rule: IConditionFormattingRule}function RuleSummary({ rule }: IRuleSummaryProps) { const localeService = useDependency(LocaleService) return ( <div> <span>{getRuleDescribe(rule, localeService)}</span> <ConditionalFormattingRulePreview rule={rule.rule} /> </div> )}Que pensez-vous de ce guide ?