既定スタイル
本機能では、2 つのレベルの既定(デフォルト)スタイルを提供します:
- ワークシート全体の既定スタイル
- 列または行単位の既定スタイル
これらは IWorksheetData インターフェイス、または Facade API を通して設定できます。
背景色の優先順位
B2 には行と列の既定スタイルがあります。優先順位を変え、セルにも色を設定してみましょう。
A1
シート
B1
列
C1
シート
A2
行
B2
列
C2
行
A3
シート
B3
列
C3
シート
B2 の適用元: 列
isRowStylePrecedeColumnStyle: false
背景色を比較する模式図です。他のスタイル属性は個別に合成されます。
設定
初期状態では「列のスタイル」が「行のスタイル」より優先されます。登録時に isRowStylePrecedeColumnStyle を指定することで挙動を変更できます。
利用中のモードを選び、既存の初期化設定に以下のオプションを組み込んでください。他のプラグイン、言語、テーマ、コンテナーの設定は保持し、同じプラグインを二重に登録しないでください。
import { UniverSheetsPlugin } from '@univerjs/sheets'univer.registerPlugin(UniverSheetsPlugin, { isRowStylePrecedeColumnStyle: true,})import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import { createUniver } from '@univerjs/presets'const { univerAPI } = createUniver({ presets: [ UniverSheetsCorePreset({ sheets: { isRowStylePrecedeColumnStyle: true, }, }), ],})既定スタイルの設定方法
ワークシートの既定スタイルを設定する方法は 2 通りあります。
IWorksheetDataインターフェイス経由
interface IWorksheetData { // その他 /** * @property {Nullable<IStyleData>} [defaultStyle] - ワークシート全体の既定スタイル。 */ defaultStyle?: Nullable<IStyleData>}interface IRowData { // その他 /** * 行スタイルデータ */ s?: Nullable<IStyleData>}interface IColumnData { // その他 /** * 列スタイルデータ */ s?: Nullable<IStyleData>}- Facade API
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 (インデックス 3) の既定スタイルを設定fworksheet.setColumnDefaultStyle(3, defaultColumnStyle)// 列 D の既定スタイルをリセットfworksheet.setColumnDefaultStyle(3, undefined)// 行 (インデックス 1) の既定スタイルを設定fworksheet.setRowDefaultStyle(1, defaultRowStyle)テキストを縮小してセルに合わせる
テキストの幅がセルを超える場合は、FRange でフォントを縮小できます。この設定は範囲内のすべてのセルに適用され、getShrinkToFit() は左上のセルの状態を返します。
const range = univerAPI.getActiveWorkbook().getActiveSheet().getRange('A1:C3')range.setShrinkToFit(true)const enabled = range.getShrinkToFit()縮小して全体を表示する設定と折り返しは同時に使用できません。折り返しを有効にすると縮小設定が解除され、縮小を有効にすると既存の折り返し設定が解除されます。
セルのテキスト行間
textLineGap はセル内の行間にピクセル単位の余白を追加します。リッチテキストとセルエディターにも適用されます。初期化時に設定し、同じ Univer インスタンスのすべてのブックに適用されます。既定値は 0 で、有限の非負数を指定します。
固定の行高
自動調整した行高
import { UniverSheetsPlugin } from '@univerjs/sheets'univer.registerPlugin(UniverSheetsPlugin, { textLineGap: 6 })import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import { createUniver } from '@univerjs/presets'const { univerAPI } = createUniver({ presets: [UniverSheetsCorePreset({ sheets: { textLineGap: 6 } })],})行間を増やしても既存の行高は変わりません。必要に応じて行高を自動調整してください。固定の行高ではテキストが切れる場合があります。セル単位の段落スタイルではなく、インスタンス全体の設定です。
このガイドはいかがですか?