기본 스타일
두 가지 수준의 기본 스타일을 제공합니다.
- 워크시트의 기본 스타일
- 열 또는 행의 기본 스타일
두 스타일 모두 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, }, }), ],})기본 스타일 설정
워크시트의 기본 스타일을 설정하는 방법은 두 가지입니다.
IWorksheetData인터페이스를 통해 설정
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를 통해 설정
const fworkbook = univerAPI.getActiveWorkbook()const fworksheet = fworkbook.getActiveSheet()const defaultStyle = { bg: { rgb: 'red', },}const defaultColumnStyle = { bg: { rgb: 'blue', },}const defaultRowStyle = { bg: { rgb: 'green', },}// set default stylefworksheet.setDefaultStyle(defaultStyle)// set column D default stylefworksheet.setColumnDefaultStyle(3, defaultColumnStyle)// reset column D the default stylefworksheet.setColumnDefaultStyle(3, undefined)// set row default stylefworksheet.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 } })],})간격을 늘려도 기존 행 높이는 변경되지 않습니다. 필요하면 자동 행 높이를 다시 계산하세요. 고정 높이에서는 텍스트가 잘릴 수 있습니다. 개별 셀의 단락 스타일이 아닌 인스턴스 수준 설정입니다.
이 가이드는 어떠셨나요?