条形调试样式
此套件包括一组可快速识别并调试您中的问题的 Canonic 调试样式 代码. 它们不包含在基底样式包中,但可以与之并用. 它们被刻意地不加分层:一个叠加必须战胜每一个分层的规则.
开始
- 安装软件包 :
npm install @canonical/styles-debug - 导入所需的样式 :
/* CSS Import */
/* To import all styles */
@import url("@canonical/styles-debug");
/* To import only certain styles */
@import url("@canonical/styles-debug/baseline-grid");
如果使用像Vite这样的捆绑工具,您也可以直接导入组件文件中的样式 :
import "@canonical/styles-debug"; // import all debug styles
// import "@canonical/styles-debug/baseline-grid"; // for baseline grid only
调试工具
基线网格
基线网格功能允许您在应用程序中可视化基线网格.
要使用它,请添加 with-baseline-grid 分类到任意元素.
它每周期画出五个严格硬化的带子——每个基线行都画出平平的4px
从晕倒(一级)到强(五级),每5次重复一次
基线( 4px 默认时为 20px) —— 因此, 节奏和位置在周期内
读一览.
基准高度在工具本身被击至 4px 并且故意不
读取自 --baseline-height (打印引擎来自
设计符号,目前仍为8px. 覆盖 --baseline-grid-height 更改
或设置 --baseline-grid-height: var(--baseline-height) 跟着应用程序
活电网.
自定义
此工具可以通过设置以下 CSS 变量来定制 :
| 变量 | 说明 | 默认值 |
|---|---|---|
--baseline-grid-color | 基色是波纹的由来 | 品牌边框颜色 |
--baseline-grid-height | 基线行高 | 0.25rem (4px) (中文(简体) ) |
--baseline-shift | 网格垂直冲抵 | 0 |
示例
<link rel="stylesheet" href="https://unpkg.com/@canonical/styles-debug/src/baseline-grid.css">
<style>
:root {
--baseline-grid-color: teal;
}
</style>
<div class="with-baseline-grid">
<p>Some text</p>
<p>Some more text</p>
</div>