theming

Donne à la grille les réglages theme et icons : couleurs, tailles et marques pour une grille, depuis le code.

Import	import { theming } from '@dzgrid/dom/theme';
Signature	theming(): GridFeature
Textes	pas de paquet à elle
CSS à part	ICONS_CSS — à ajouter soi-même avec injectStyles: false
Déclarée dans	packages/dom/src/theme/index.ts

Ce qu’elle fait

theming() lit le réglage theme et écrit chaque clé en variable CSS sur la racine de la grille ; elle l’emporte donc sur vos feuilles de style pour cette grille seulement. Elle dessine aussi le réglage icons à la place des marques de la grille (tri, filtre, menu, chevron…). Les deux suivent en direct : grid.update({ theme }) retire les clés qui ne sont pas redonnées.

Une clé qui n’est pas dans le thème, une valeur qui pourrait sortir du CSS (;, {, }, <, \, !, url(), ou une icône refusée est signalée par un avertissement invalid-setting et laissée de côté ; rien n’est levé. Le contraste reste à votre charge.

Donner theme ou icons à une grille sans cette fonction signale un avertissement missing-feature. Elle a son entrée à elle : une grille qui n’utilise pas ces réglages n’en porte rien.

Exemple

import { createGrid } from '@dzgrid/dom';
import { theming } from '@dzgrid/dom/theme';
import { FR } from '@dzgrid/dom/locales/fr';
import '@dzgrid/theme/variables.css';

type Hive = { id: string; name: string; frames: number };

const grid = createGrid<Hive>(document.getElementById('hives')!, {
  rows: [{ id: 'h1', name: 'Ruche du verger', frames: 10 }],
  columns: [{ id: 'name', header: 'Ruche' }, { id: 'frames', header: 'Cadres', type: 'number' }],
  getRowId: (h) => h.id,
  messages: FR,
  theme: { rowOddBg: 'color-mix(in srgb, var(--tz-accent) 6%, var(--tz-bg))', headerWeight: 500, columnLine: 'var(--dzg-line, 1px) solid var(--tz-border)' },
  icons: { sortAsc: '<svg viewBox="0 0 16 16"><path d="M8 3l5 8H3z"/></svg>' },
  features: [theming()],
});

grid.update({ theme: { headerWeight: 700 } });

Démo

Lignes alternées, traits entre les colonnes et titres en capitales, réglés depuis le code pour cette grille seulement.

Voir aussi

• Les réglages theme et icons.
• Thème et droite à gauche : toutes les clés dans le guide.