你是D2L员工吗? 用我们的.. 日光设计系统站点来啊!
@ brightspace- ui/ 核心
用于构建Brightspace应用程序的可访问,免费,开源的网络组件和工具集.
安装
npm install @brightspace-ui/core
README 索引
- 构成部分
- 警报: 显示重要信息的提醒组件
- 面包屑: 帮助用户了解应用程序内位置的组件
- 后投弃: 显示目标要素背景的组件
- 按钮: 普通、 初级、 图标、 微妙和切换按钮
- 日历: 日历组件
- 纸牌: 卡片组件
- 颜色: 调色板
- 对话框: 通用和确认对话框
- 降级: 放下打开器和内容容器
- 展开折叠: 创建可扩展和可折叠内容的组件
- 过滤器: 单一或多维过滤组件
- 焦点陷阱: 限制焦点的通用容器
- 表单: 提交和审定的汇总数据
- 等级视图: 显示有效容器的嵌入式容器组件
- HTML 块: 用于渲染用户授权的 HTML 组件
- 图标: 图标 SVG 和网络组件
- 投入数字 :
- 链接: 链接组件和样式
- 列表: 清单和清单项目组成部分
- 正在装入自旋器: 加载-平板组件
- 菜单: 菜单和菜单项组件
- 计量:线性、光圈、圆度网组件
- 增加/ 减少: 限制长位内容
- 屏幕关闭: 屏幕外定位内容的组件和样式
- 选择:用于选择和批量行动的组件
- 滚动打包: 水平滚动内容的箭头
- 斯凯莱通: 在您的应用程序装入时, 应用低性能骨架
- 跳过导航: 用于跳过过导航面板的组件
- 排序: 调整列表中数据排序的菜单
- 状况指标: 状态指标组件
- 切换: 开/关闭语义的切换组件
- 图表: 表格样式、列排序和溢出处理
- 标签: 标签和标签面板组件
- 标签列表: 标签列表和标签列表项目组件
- 工具提示: 工具提示组件
- 类型: 打印样式和组件
- 验证: 插件自定义验证逻辑到本地和自定义的形式元素
- 主计长
- 订阅者:在多种关系中管理用户登记册
- 指令
- 动画: 动画显示、隐藏和去除元素
- 帮助者
- 帮助者:帮助由编成的DOM,独有的ID等.
- 混合
- 箭头KeysMixin: 用箭头键管理焦点
- AsyncContiner 密克辛语Name: 管理集体合成状态
- 焦点混合: 将焦点下放到嵌入式元素中
focus()名为 - 窗体元素混合剂:允许组件参与形式和验证
- 交互式混合: 允许在嵌入网格内移动交互元素
- 摇篮混音: 标签自定义元素, 在整个 DOM 范围引用元素
- 本地化Mixin: 在组件中将文本本地化
- 提供商Mixin: 以类似DI的方式提供和消耗不同要素的数据
- 斯凯勒通密克辛: 使组件骨架意识
- 可见于古代Mixin: 在祖先上方显示元素
- 模板
- 初等二级模板: 有页眉和可选页脚的两个面板(初级和二级)页面模板
发展中国家
复制后, 运行 npm install 以安装依赖.
运行 npm run build 一次,或任何时间图标文件被更改.
运行演示
开始 a @ web/ dev- server( 网络服务器) 显示演示页的主机:
npm start
D2L员工还可以查看最新的主分支演示 https://live.d2l.dev/BrightspaceUI/core/ (中文(简体) )。 。 。 .
线性
# eslint and stylelint
npm run lint
# eslint only
npm run lint:eslint
# stylelint only
npm run lint:style
测试
进行全套测试:
npm test
或者,可以有选择地进行测试:
# unit tests
npm run test:unit
# aXe accessibility tests
npm run test:axe
# translations tests
npm run test:translations
注:轴测试需要 prefers-reduced-motion 如果在本地浏览器中调试, 模拟将在 dev 控制台中打开 .
此还原使用 @ brightspace- ui/ 测试执行视觉回归测试的 vdiff 命令 :
# vdiff
npm run test:vdiff
# re-generate goldens
npm run test:vdiff -- --golden
版本和发布
此 repo 配置为使用 semantic-release输入前缀 fix: 财务报告和审定财务报表 feat: 合并到 main。 。 。 .
为了学习如何从维护分支中产生主要释放和释放,请参见: 语义- 释放 GitHub 动作 文档.
未来的加强
寻找新的组件还是此处未列出的增强功能? 创建 GitHub 问题 !