SYIDAX GRID

화면에 맞는 테마

Grid 테마는 표 안의 배경·선·텍스트·선택 상태를 함께 구성합니다. 페이지 전체의 배경을 덮는 설정이 아니라 표의 읽기 환경을 맞추는 설정입니다.

동작 원리와 선택 기준

alpine·balham과 각각의 dark 프리셋을 사용할 수 있습니다. 먼저 기본 프리셋을 선택하고 필요한 토큰만 덮어써 hover·선택·오류 등의 상태 대비를 유지하세요.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

앱 테마 전환 시 Grid 테마도 명시적으로 바꿉니다.

javascript

grid.theme = 'alpine';
// 앱이 어두운 테마로 전환되었을 때:
grid.theme = 'alpine-dark';

결과 확인: 표의 글자·선·배경이 함께 바뀝니다. 페이지 바깥 영역의 색상은 앱의 스타일에서 관리합니다.

데이터를 더 많이 보여 주는 것과 읽기 쉬운 간격 사이의 균형을 정합니다.

javascript

grid.theme = 'balham';
grid.rowHeight = 36;
grid.height = 480;

결과 확인: Grid 높이와 행 높이가 달라 현재 보이는 행 수가 바뀝니다. 터치 조작과 긴 텍스트도 함께 확인합니다.

theme에 {extends: 기본 테마, tokens: 토큰 객체}를 전달합니다. 사용 가능한 키는 GridTokenOverrides 타입에서 확인하고 앱의 강조색·선택색·대비를 맞춥니다.

결과 확인: 존재하지 않는 CSS 변수명을 추측해 덮어쓰지 않습니다. 변경 후 선택 행·편집 오류·메뉴·툴팁이 모두 읽히는지 확인하세요.

고정 행 높이에 비해 렌더러 내용이 높으면 잘릴 수 있습니다. 행 레이아웃과 테마 밀도를 함께 설계합니다.

테마 객체 내부만 수정하면 변경을 감지하지 못할 수 있습니다. 새 theme 객체와 tokens 객체를 전달하세요.