角石组件
Cru的网络组件库: 70个组件用 升。 。 。 .
- 框架-不可知论. 它们都是自定义元素,因此在React,Vue,Rails,WordPress或平面HTML中工作.
- 与 CSS 自定义 . 每个组件都暴露出CSS自定义属性和部件,以及从一集设计符来显示库主题.
- 光阴相克. 三个主题船:
cru(默认),fl为家庭生活和无名氏default。每个都带有两种颜色方案. - 无障碍. 70个部件中的59个在三台发动机和两种制导模式的试验套间对斧头进行维护。 11个没有造成任何互动.
联合国 cruglobal.github.io/cornerstone-设计系统
资料来源: github.com/CruGlobal/角石设计系统
安装
npm install @cruglobal/cornerstone-components
导入样式表一次, 然后您使用的每个组件 :
import '@cruglobal/cornerstone-components/styles/cornerstone.css';
import '@cruglobal/cornerstone-components/components/button/button.js';
<cs-button variant="brand">Click me</cs-button>
如果你自己为图书馆服务 而不是捆绑它,复制 dist/bundled 卸出包件并装入
cornerstone.loader.js 自动装填器登记 cs-* 元素 .
这个 安装指南 覆盖两道.
开发者 QQ
开发者可以利用此文档从源头学习如何构建Cornerstone组件.
你不需要用Cornerstone组件做这些! 本页面为想为项目出力,用源做工,或创建自定义建筑的人提供.
如果这不是你想做的 文档网站 这是你想要的地方.
你用什么制造角石组件?
组件以 升,一个自定义元素基础类,提供直观的API和活性数据绑定. 构建是一个自定义的脚本, 由 : 兴建。 。 。 .
Npm的依赖性在哪里?
任何组件在运行时需要的.. lit例如——属于 dependencies因为它必须安装 任何人消耗这个包。 仅用于构建、测试或插入库的工具 devDependencies。 。 。 .
npm install -D prettier
获取还原
克隆本地重播并安装依赖.
git clone https://github.com/CruGlobal/cornerstone-design-system
cd cornerstone-components
npm install
发展中国家
一旦你复制回波,运行:
npm start
这个表 src/ 并重建更改后的图书馆,服务 dist/ 这样一页就可以装入已建文件 .
目前没有热模块重装( HMR), 因为浏览器无法提供重新注册自定义的方法
元素,但源代码的大部分修改会自动重新加载浏览器.
为了整理文件,在第二个终端同时运行文件站点:
npm run start:docs
启动 Astro 的 dev 服务器 http://localhost:4321复制当前 dist/bundled/ 打开
启动,所以重建库并重新启动它来取取组件的更改.
大楼
要生成生产建设,请执行以下命令.
npm run build
您也可以运行 npm run build:serve 开始 http-server 实例 http://localhost:4000 在构建完成后,可以预览出生产构建.
测试
npm test 运行 Chromium, Firefox 和 WebKit 的每个测试文件. 首先构建:测试加载组件 dist/。 。 。 .
CI把套房分成六个跑者 WTR_SHARD你可以自己开一个
WTR_SHARD=2/6 npm test
文件按每个文件需要多长时间处理成碎片,所以碎片一起完成。 这些时间在 test-durations.json。测试文件中未包含的仍在运行;当处理硬盘时,它只计算为一秒钟。 当 CI 的硬盘漂移超过一分两分时, 或者在添加了几个重测试文件后, 刷新文件 :
npm run build
npm run test:durations
整个套房都开着 重写 test-durations.json 每个文件所花费的秒数 平均在三个引擎上 提交结果。 在一个安静的机器上运行, 因为一个忙碌的机器充气 任何文件在当时运行。 测试在本次运行期间没有再测试,因此测试出站时间失败. 如果运行警告说有些文件没有通过, 在执行前只需刷新以下命令的文件: 它会取代夸大的数字 .
为了刷新一个组件的文件, 留下剩下的文件, 叫跑者自己. npm run test:durations -- --group button 不工作: npm 保存 --group 他自己和整个套房运行.
WTR_RECORD_DURATIONS=true npx web-test-runner --group button
这些数字比整场比赛还粗糙 在任何运行中,每个浏览器打开的第一个文件也等待浏览器启动. 在一个小组中运行每个文件都是第一个文件之一,没有其他东西是装入机器的. 使用它来获取新文件到列表中,或者替换一个被充气的失败数字,并在被打乱后进行全跑.
创建新组件
要安装新组件, 请运行以下命令 。 它会提示标记名称, 它必须从
cs-。 。 。 .
npm run create
生成四个文件:组件、样式表、测试文件以及文件页。 当启动dev服务器时,会找到侧边栏"Confontents"一栏中的新组件.
捐款
Cornerstone组件由Cru维护. 问题和bug报告受到任何人的欢迎;拉出请求来自Cru设计系统团队. 见 捐款准则。 。 。 .
许可证
角石组件按下列条件提供: MIT 许可证。 。 。 .