@dzgrid/主题
可选样式表 兹格里德: 颜色、间距和
交互状态(标题、徘徊、选择、焦点、过滤、弹出)、光和暗等
对比,强迫颜色。 平地 CSS,无JavaScript. 网格的布局 CSS 由
@dzgrid/dom;这个包只使其具有可呈现性。 检查每个文本和部分的对比度 .
导入
import '@dzgrid/theme'; // the same file as '@dzgrid/theme/dzgrid.css'
import '@dzgrid/theme/contrast.css'; // optional: more contrast (see below)
从 CSS : @import "@dzgrid/theme/dzgrid.css";与萨斯, @use "@dzgrid/theme/dzgrid" 给
来源 $tz-palette 地图可以被覆盖 with (...)。 。 。 .
在角中,添加 node_modules/@dzgrid/theme/dzgrid.css 页:1 styles 联 合 国 angular.json。 。 。 .
显示大小写主题
两个可选的主题, 每个导入更多( 或者一个区域上的属性) :
import '@dzgrid/theme';
import '@dzgrid/theme/midnight.css'; // dark elegant, with a light twin
// or '@dzgrid/theme/clinic.css'; // light medical, with a dark twin
导入, 页面每个网格的主题样式; data-dzg-skin="midnight" (或 "clinic"在任意
容器样式只包含此区域, 因此两者可以并排( 最后导入的文件主题为
页:1 光和暗跟随系统或 data-theme,见下文。 每种颜色都是用手给的
检查对比度; 对比度( 下方) 更高 .
尾风 CSS 和靴子
一个桥将网格的颜色,字体和角映射到您框架的变量,包括暗模式. CSS文件中的 Tailwind CSS 4 构建:
@layer theme, base, dzgrid, components, utilities;
@import "tailwindcss";
@import "@dzgrid/theme";
@import "@dzgrid/theme/tailwind.css";
尾风 CSS 3: @dzgrid/theme/tailwind3.css (通太平风所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出未出所出所出所出所出所出所出所出所出所出.
鞋带 5.3: @dzgrid/theme/bootstrap.css (以下为) data-bs-theme) (中文(简体) ). 桥梁胜过展示
主题:带桥,网格会穿戴您框架的颜色;要显示 MidnigHt或 Clinic,装入无桥. 每个设置, 和类
网格需要 (cellClass, (中文(简体) ), rowClass, (中文(简体) ), headerClass, (中文(简体) ), badge({ classes })),单位
docs/theme-in-3-lines.md。 。 。 .
叠加层
主题的规则坐落在阶梯层 dzgrid (每个文件打开方式
@layer dzgrid.layout, dzgrid.theme, dzgrid.skin, dzgrid.bridge, dzgrid.contrast;),布局也一样
@dzgrid/dom 注射剂 你自己的班级胜过网格的外观 !important。如果您将您的
拥有 CSS, 命名顺序一次, 首先: 例如 . @layer theme, base, dzgrid, components, utilities;。 。 。 .
如果一个未分层的重置(Tailwind 3's preflight Flight, Bootstrap's Reboot)将击败分层
网格,导入 @dzgrid/theme/dzgrid.unlayered.css (和 contrast.unlayered.css相反:相同的规则
层外.
CSS 变量
调色板是tzslot's:一个以tzslot为主题的主题网格的页面. 每种颜色都是
light-dark() 声明的对 :root。 。 。 .
| 变量 | 用于 |
|---|---|
--tz-bg, (中文(简体) ), --tz-bg-raised | 网格的表面、信头和弹出 |
--tz-fg, (中文(简体) ), --tz-fg-muted | 文本,辅助文本 |
--tz-border | 单元格间行,弹出 |
--tz-accent, (中文(简体) ), --tz-accent-fg | 焦点、 选择、 主按钮 |
--tz-danger, (中文(简体) ), --tz-warning, (中文(简体) ), --tz-success | 错误、 拒绝编辑、 徽章 |
网格的衍生物可以设置在任何祖先身上 .dzg (每个都有一个倒背 在调色板上):
--dzg-font, (中文(简体) ), --dzg-radius, (中文(简体) ), --dzg-row-height, (中文(简体) ), --dzg-cell-padding-inline, (中文(简体) ), --dzg-header-bg, (中文(简体) ),
--dzg-row-hover-bg, (中文(简体) ), --dzg-row-selected-bg, (中文(简体) ), --dzg-focus-ring, (中文(简体) ), --dzg-stale-fg, (中文(简体) ),
--dzg-refused-bg, (中文(简体) ), --dzg-flash, (中文(简体) ), --dzg-flash-color, (中文(简体) ), --dzg-line (规则宽度), --dzg-pill-radius, (中文(简体) ),
--dzg-header-size, (中文(简体) ), --dzg-header-tracking (没有阿拉伯语), --dzg-select-bar (选定行栏)
开始时,默认为0 fresh-rows.css数字 : --dzg-fresh-color, (中文(简体) ), --dzg-fresh-bg, (中文(简体) ), --dzg-fresh-bar (新设)
线的锡和吧.
:root {
--tz-accent: light-dark(#0f766e, #5eead4);
--dzg-row-height: 2.25rem;
}
光和暗
默认情况下,网格遵循系统(color-scheme: light dark) (中文(简体) ). 要强制一个,设定
data-theme="light" 或者说 data-theme="dark" 在网格的根或任何祖先上。 桥梁
跟着尾风走 .dark 班级和靴子 data-bs-theme。 。 。 .
对比度和强制颜色
contrast.css 当系统要求更具对比性时切换到高相通调色板
(单位:千美元)prefers-contrast: more或低于 data-contrast="more"· ; data-contrast="normal" 在树根上
选择退出。 在强迫色彩模式(Windows high Controlst)中,主题使用系统的颜色.
许可证
麻省理工学院. 见 自由主义。 。 。 .