Formato condicional
El formato condicional permite a los usuarios cambiar automáticamente el formato de las celdas según condiciones específicas, resaltando datos o tendencias importantes. Admite varias condiciones y opciones de formato, lo que ayuda a los usuarios a comprender los datos de forma más intuitiva.
Modo de complemento
Instalación
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-uiUso
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)Compatibilidad móvil
Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.
| Paquete | Registro de escritorio | Registro móvil |
|---|---|---|
@univerjs/sheets-conditional-formatting-ui | UniverSheetsConditionalFormattingUIPlugin | UniverSheetsConditionalFormattingMobileUIPlugin |
Modo preestablecido
Instalación
pnpm add @univerjs/preset-sheets-conditional-formattingnpm install @univerjs/preset-sheets-conditional-formattingyarn add @univerjs/preset-sheets-conditional-formattingbun add @univerjs/preset-sheets-conditional-formattingUso
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 de Facade
Las definiciones completas del tipo de API de Facade se pueden encontrar en la FacadeAPI.
Importar
Plugin mode note
Solo el modo complemento requiere importar manualmente el paquete Facade. El modo preestablecido ya incluye el paquete Facade correspondiente, por lo que no se necesita ninguna importación adicional.
import '@univerjs/sheets-conditional-formatting/facade'Crear reglas de formato condicional
FWorksheet.newConditionalFormattingRule() crea un generador de formato condicional, devolviendo una instancia de FConditionalFormattingBuilder, que se puede usar para generar reglas de formato condicional a través del encadenamiento de métodos.
Aquí hay algunos métodos miembros. de FConditionalFormattingBuilder:
| Método | Descripción |
|---|---|
| build | Crea el formato condicional regla |
| copy | Clonar profundamente un constructor actual |
| createCfId | Crear un ID de formato condicional |
| getRanges | Obtiene el alcance del formato condicional actual |
| setRanges | Establece el rango de la regla de formato condicional |
| setAverage | Establece la regla de formato condicional de valor promedio |
| setUniqueValues | Establece la regla de formato condicional de valor único |
| setDuplicateValues | Establece la regla de formato condicional de valor duplicado |
| setRank | Establece la regla de formato condicional de clasificación |
| setIconSet | Establece la regla de formato condicional de conjunto de iconos |
| setColorScale | Establece la regla de formato condicional de escala de color |
| setDataBar | Establece la regla de formato condicional de la barra de datos |
| setBackground | Establece el color de fondo del formato condicional |
| setBold | Establece si la fuente del formato condicional está en negrita |
| setFontColor | Establece el color de fuente del formato condicional |
| setItalic | Establece si la fuente del formato condicional es cursiva |
| setStrikethrough | Establece si la fuente del formato condicional tiene un tachado |
| setUnderline | Establece si la fuente del formato condicional tiene un subrayado |
| whenCellEmpty | Establece la regla de formato condicional para que se active cuando la celda está vacía |
| whenCellNotEmpty | Establece la regla de formato condicional para que se active cuando la celda no está vacía |
| whenDate | Establece la regla de formato condicional para que se active cuando la fecha está dentro un período de tiempo específico |
| whenFormulaSatisfied | Establece la regla de formato condicional para que se active cuando el resultado del cálculo de la fórmula sea verdadero |
| whenNumberBetween | Establece la regla de formato condicional para que se active cuando el número está entre dos valores especificados o igual a uno de ellos |
| whenNumberEqualTo | Establece la regla de formato condicional para que se active cuando el número es igual al valor dado |
| whenNumberGreaterThan | Establece la regla de formato condicional para que se active cuando el número es mayor que el valor dado |
| whenNumberGreaterThanOrEqualTo | Establece la regla de formato condicional para que se active cuando el número es mayor mayor o igual que el valor dado |
| whenNumberLessThan | Establece la regla de formato condicional para que se active cuando el número es menor que el valor dado |
| whenNumberLessThanOrEqualTo | Establece la regla de formato condicional para que se active cuando el número es menor o igual que el valor dado |
| whenNumberNotBetween | Establece la regla de formato condicional para que se active cuando el número no está entre dos valores especificados y no es igual a ellos |
| whenNumberNotEqualTo | Establece la regla de formato condicional para que se active cuando el número no es igual al valor dado |
| whenTextContains | Establece la regla de formato condicional para que se active cuando el texto contiene el valor especificado |
| whenTextDoesNotContain | Establece la regla de formato condicional para que se active cuando el texto no contiene el valor especificado |
| whenTextEndsWith | Establece la regla de formato condicional para que se active cuando el texto termina con el valor especificado |
| whenTextEqualTo | Establece la regla de formato condicional para que se active cuando el texto es igual al valor dado |
| whenTextStartsWith | Establece la regla de formato condicional para que se active cuando el texto comienza con el valor especificado |
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)Obtener reglas de formato condicional
FWorksheet.getConditionalFormattingRules()obtiene todas las reglas de formato condicional de la hoja de trabajoFRange.getConditionalFormattingRules()obtiene todas las reglas de formato condicional del rango
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()Eliminar formato condicional Reglas
FWorksheet.deleteConditionalFormattingRule(cfId) elimina una regla de formato condicional de la hoja de trabajo, donde cfId es el ID de la regla de formato condicional.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rules = fWorksheet.getConditionalFormattingRules()// Remove the first conditional formatting rulefWorksheet.deleteConditionalFormattingRule(rules[0]?.cfId)Actualizar reglas de formato condicional
FWorksheet.setConditionalFormattingRule(cfId, rule) actualiza una regla de formato condicional en la hoja de trabajo, donde cfId es el ID de la regla de formato condicional y rule es la nueva regla de formato condicional.
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()] })Modificar la prioridad de las reglas de formato condicional
FWorksheet.moveConditionalFormattingRule(cfId, toCfId, type) modifica la prioridad de una regla de formato condicional en la hoja de trabajo, donde cfId es el ID de la regla de formato condicional, toCfId es el ID de la regla de formato condicional de destino y type especifica el tipo de movimiento (por ejemplo, 'antes', 'después').
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')Borrar todo el formato condicional Reglas
FWorksheet.clearConditionalFormatRules()borra todas las reglas de formato condicional de la hoja de trabajo.FRange.clearConditionalFormatRules()borra todas las reglas de formato condicional del rango.
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()Reutilizar descripciones y vistas previas de reglas
Para listas personalizadas, importe getRuleDescribe y ConditionalFormattingRulePreview de @univerjs/sheets-conditional-formatting-ui. Pase la regla completa a getRuleDescribe(rule, localeService) y solo su configuración (rule.rule) a la vista previa. Esta muestra la apariencia configurada sin evaluar las celdas. Renderícela dentro del contexto React de Univer.
CF_PANEL_KEY identifica el panel integrado para sustituir componentes. IConditionFormattingPanelProps.onEditorExit se ejecuta al terminar la edición por envío, cancelación, activación o eliminación de una hoja. No indica que se haya guardado correctamente ni que se haya cerrado la barra lateral.
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> )}¿Cómo es esta guía?