默认样式
Univer 提供了两级默认样式:
- 工作表的默认样式
- 列或行的默认样式
这两者都可以通过 IWorksheetData 接口或 Facade API 设置。
背景色优先级示意
B2 同时具有行默认样式和列默认样式。切换优先级,再为单元格单独设色。
A1
工作表
B1
列
C1
工作表
A2
行
B2
列
C2
行
A3
工作表
B3
列
C3
工作表
B2 使用: 列
isRowStylePrecedeColumnStyle: false
示意只比较背景色;其他样式属性分别合并。
配置
默认情况下,列样式优先于行样式。你可以在注册时通过设置 isRowStylePrecedeColumnStyle 来更改此行为。
按接入模式将以下选项合并到已有的初始化配置中,保留其他插件、语言、主题和容器配置,不要重复注册同一插件。
TypeScript
import { UniverSheetsPlugin } from '@univerjs/sheets'univer.registerPlugin(UniverSheetsPlugin, { isRowStylePrecedeColumnStyle: true,})TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import { createUniver } from '@univerjs/presets'const { univerAPI } = createUniver({ presets: [ UniverSheetsCorePreset({ sheets: { isRowStylePrecedeColumnStyle: true, }, }), ],})设置默认样式
工作表的默认样式可以通过两种方式设置:
- 通过
IWorksheetData接口
TypeScript
interface IWorksheetData { // other /** * @property {Nullable<IStyleData>} [defaultStyle] - Default style data of Worksheet. */ defaultStyle?: Nullable<IStyleData>}interface IRowData { // other /** * style data */ s?: Nullable<IStyleData>}interface IColumnData { // other /** * style data */ s?: Nullable<IStyleData>}- 通过 Facade API 设置
TypeScript
const fworkbook = univerAPI.getActiveWorkbook()const fworksheet = fworkbook.getActiveSheet()const defaultStyle = { bg: { rgb: 'red', },}const defaultColumnStyle = { bg: { rgb: 'blue', },}const defaultRowStyle = { bg: { rgb: 'green', },}// 设置默认样式fworksheet.setDefaultStyle(defaultStyle)// 设置列 D 的默认样式fworksheet.setColumnDefaultStyle(3, defaultColumnStyle)// 重置列 D 的默认样式fworksheet.setColumnDefaultStyle(3, undefined)// 设置行默认样式fworksheet.setRowDefaultStyle(1, defaultRowStyle)缩小字体填充
当文本宽度超过单元格时,可通过 FRange 缩小字体。该设置会应用到范围内的所有单元格;getShrinkToFit() 读取左上角单元格的状态。
TypeScript
const range = univerAPI.getActiveWorkbook().getActiveSheet().getRange('A1:C3')range.setShrinkToFit(true)const enabled = range.getShrinkToFit()缩小字体填充与自动换行互斥:开启自动换行会清除缩小字体填充;开启缩小字体填充会清除单元格已有的自动换行设置。
单元格文字行距
textLineGap 用于增加单元格文字行与行之间的像素间距,对富文本和单元格编辑器同样生效。在初始化时设置,作用于该 Univer 实例中的所有工作簿。默认值为 0,必须是有限的非负数。
额外行距
固定行高
Univer 电子表格
单元格中的多行文字
为每行文字留出更多空间
自动调整行高
Univer 电子表格
单元格中的多行文字
为每行文字留出更多空间
TypeScript
import { UniverSheetsPlugin } from '@univerjs/sheets'univer.registerPlugin(UniverSheetsPlugin, { textLineGap: 6 })TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import { createUniver } from '@univerjs/presets'const { univerAPI } = createUniver({ presets: [UniverSheetsCorePreset({ sheets: { textLineGap: 6 } })],})增大行距不会自动修改已有行高。需要时应重新计算自动行高;固定行高可能裁切文字。这是实例级配置,不是单个单元格的段落样式。
你觉得这篇文档如何?