@cassis-ui/ css (英语)
《公约》的核心支助框架 底盘设计系统: 符号化组件, 颜色的上下文类, 和 TypeScript 型 JavaScript 插件, 建于 : @chassis-ui/website-tokens。 。 。 .
npm install @chassis-ui/css
JavaScript 插件使用两个对等依赖: @floating-ui/dom (菜单、流行乐、工具提示)和 vanilla-calendar-pro (取枣. npm 7,后自动安装.
包装什么
| 文件夹 | 文件 |
|---|---|
dist/css/ | 汇编的CSS: chassis.css,以及 chassis-grid.css, (中文(简体) ), chassis-reboot.css 财务报告和审定财务报表 chassis-utilities.css 作为单独的部分,每个部分都有精密的构建和源图 |
dist/js/ | JavaScript 作为 ES 模块 : chassis.js 期望同伴依赖关系得到解决, chassis.bundle.js 包括他们 |
dist/tailwind/ | 尾风 CSS v4 的条目 |
js/dist/ | 每个插件有一个模块,有类型声明; js/src/ 是其类型脚本源 |
scss/ | 萨斯源 |
postcss/ | 添加此选项的 PostCSS 插件 --cx- 自定义属性的前缀 |
使用
在您的 HTML 中包含编译的 CSS, 如果使用交互式组件则包含 JavaScript :
<link rel="stylesheet" href="node_modules/@chassis-ui/css/dist/css/chassis.min.css">
<!-- Optional: only for interactive components -->
<script type="module" src="node_modules/@chassis-ui/css/dist/js/chassis.bundle.min.js"></script>
有数据属性 API 的组件,例如 data-cx-toggle="tooltip",将自己初始化。 从代码导入一个控制组件的插件 :
import '@chassis-ui/css/dist/css/chassis.min.css'
import { Dialog } from '@chassis-ui/css'
Dialog.getOrCreateInstance('#welcome-dialog').show()
从 Sass 源头编译应用您自己的符号和设置 :
@use "@chassis-ui/css/scss/config" with (
$enable-dark-mode: false
);
@use "@chassis-ui/css/scss/chassis";
萨斯需求 node_modules 和包裹的 scss/vendor/ 装入路径上的目录,并添加 PostCSS 步骤 --cx- 自定义属性的前缀。 这个 安装指南 二者相盖.
在 Tailwind CSS v4 工程中, 导入 Tailwind 条目 :
@import "@chassis-ui/css/tailwind";
文档
底盘-ui.com/css 备有完整的文件:
变动
变动情况 列出每个发布. 核查.md 说什么是公共API 哪个版本的更改得到.
许可证
麻省理工学院. 底盘CSS来源于 诱饵,版权根据麻省理工学院许可证发行的"靴子"作者和"推特"公司;参见: LICENSE.BOOTSTRAP。 。 。 .