預設樣式
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 } })],})增加行距不會自動修改既有列高。需要時應重新計算自動列高;固定列高可能裁切文字。這是執行個體層級的設定,不是單一儲存格的段落樣式。
你覺得這篇文檔如何?