FreeGridv1.6.0English

테마와 글꼴

기본 테마는 light, dark와 한국식 심플 테마 네 가지입니다. board는 게시판형(상단 굵은 선, 가로선만), erp는 관리자·ERP형(모든 셀 테두리, 촘촘한 행), excel은 엑셀형(격자선, 녹색 포커스), classic은 진한 헤더형(남색 헤더)입니다. 글꼴…

실행 예제테마와 글꼴

라이트·다크와 한국식 테마 중에서 고르고, 글꼴 크기와 종류도 바꿀 수 있습니다.

이 데모의 코드
import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { select, separator, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const grid = createGrid(ctx.host, { columns: demoColumns(lang), data: makeRows(3000), rowSelection: 'multiple', locale: lang });

  // A custom theme is just CSS variables on a class named fg-theme-<name>.
  const style = document.createElement('style');
  style.textContent = `
    .fg-theme-ocean { --fg-font: inherit; --fg-font-size: 13px; --fg-radius: 12px; --fg-cell-px: 14px;
      --fg-bg: #f3fbfb; --fg-fg: #0b3b3c; --fg-muted: #4f7a7b; --fg-header-bg: #dff2f1; --fg-header-fg: #0b3b3c;
      --fg-border: #b9dedc; --fg-row-border: #d5ecea; --fg-row-odd: #ebf7f6; --fg-row-hover: #d8f0ee;
      --fg-row-selected: #bfe6e2; --fg-accent: #0f8c86; --fg-accent-fg: #fff; --fg-focus: #0f8c86;
      --fg-popup-bg: #fff; --fg-input-bg: #fff; --fg-shadow: 0 12px 32px rgba(11,59,60,.18); }`;
  document.head.append(style);

  select(ctx, tr(lang, { en: 'Theme', ko: '테마' }), [
    ['light', 'Light'], ['dark', 'Dark'],
    ['board', tr(lang, { en: 'Board (Korean)', ko: '게시판형' })],
    ['erp', tr(lang, { en: 'ERP (Korean)', ko: '관리자·ERP형' })],
    ['excel', tr(lang, { en: 'Excel-like', ko: '엑셀형' })],
    ['classic', tr(lang, { en: 'Classic navy', ko: '진한 헤더형' })],
    ['ocean', tr(lang, { en: 'Ocean (custom CSS)', ko: 'Ocean (사용자 정의 CSS)' })],
  ], 'light', v => grid.setTheme(v));
  separator(ctx);
  select(ctx, tr(lang, { en: 'Font size', ko: '글꼴 크기' }), [9, 10, 11, 12, 13, 14, 15, 16, 17, 18].map(n => [String(n), `${n}px`] as [string, string]), '13',
    v => grid.setFont({ size: Number(v) }));
  select(ctx, tr(lang, { en: 'Font', ko: '글꼴' }), [
    ['', tr(lang, { en: 'Theme default', ko: '테마 기본' })],
    ['Georgia, serif', 'Georgia'],
    ['ui-monospace, Consolas, monospace', 'Monospace'],
    ['"Malgun Gothic", "Apple SD Gothic Neo", sans-serif', '맑은 고딕 / Apple SD'],
  ], '', v => grid.setFont({ family: v || null }));
  return grid;
}

기본 테마는 light, dark와 한국식 심플 테마 네 가지입니다. board는 게시판형(상단 굵은 선, 가로선만), erp는 관리자·ERP형(모든 셀 테두리, 촘촘한 행), excel은 엑셀형(격자선, 녹색 포커스), classic은 진한 헤더형(남색 헤더)입니다. 글꼴 크기와 종류는 옵션 하나씩이면 바뀌고, 행 높이를 따로 지정하지 않으면 글꼴 크기에 맞춰 조정됩니다.

createGrid(el, { columns, data, theme: 'erp', fontSize: 12, fontFamily: 'Pretendard, sans-serif' });
grid.setTheme('board');
grid.setFont({ size: 14 });
grid.setFont({ family: null }); // back to the theme font

나만의 테마 만들기

/* any class named fg-theme-<name> is a theme */
.fg-theme-brand {
  --fg-font: "Pretendard", sans-serif;
  --fg-font-size: 13px;
  --fg-bg: #fff; --fg-fg: #1d2433; --fg-muted: #6b7385;
  --fg-header-bg: #f2f5fa; --fg-header-fg: #1d2433;
  --fg-border: #d9dfe8; --fg-row-border: #edf0f5;
  --fg-col-line: inset -1px 0 #edf0f5;
  --fg-row-odd: #fff; --fg-row-hover: #f5f8ff; --fg-row-selected: #e6eeff;
  --fg-accent: #3056d3; --fg-focus: #3056d3;
  --fg-header-text-align: center; --fg-header-label-flex: 1 1 auto;
}
변수종류조절 대상
--fg-font / --fg-font-sizefont글꼴과 크기.
--fg-bg / --fg-fg / --fg-mutedcolor배경, 글자, 보조 글자 색.
--fg-header-bg / --fg-header-fg / --fg-header-weightcolor / weight헤더 색과 굵기.
--fg-border / --fg-row-bordercolor바깥 테두리와 행 구분선.
--fg-col-linebox-shadow세로 셀 구분선. 예: 'inset -1px 0 #ddd'. 기본 없음.
--fg-row-odd / --fg-row-hover / --fg-row-selectedcolor줄무늬, 마우스 오버, 선택 행 색.
--fg-accent / --fg-focuscolor버튼, 정렬 아이콘, 포커스 셀 색.
--fg-radius / --fg-cell-pxlength모서리 둥글기와 셀 좌우 여백.
--fg-header-text-align / --fg-top-borderkeyword / border헤더 가운데 정렬, 상단 굵은 선.