Avenir( s) DSAV 服务器
DSAV是什么? (英语)?
DSAV是AVENIR(s)项目的Deisgn系统,由一个 第3组 项目的形式 组件库。 。 。 . 它还为处理部件的外型提供了通用第一CSS框架.
代码是 在 GitHub 上打开并可用
为什么是DSAV?
AVENIR(s)程序基于Vue 3. 选择了前端的技术堆栈.
AVENIR(s)程序需要自己的特性,因此它将在所有前端项目中使用这个设计系统.
完整文档
你可以找到我们所有的文件 github 页面。 。 。 .
故事书演示
你可以找到使用和演示我们的设计系统组件的例子 github 页面。 。 。 .
安装
在你的项目中,运行 npm install @ævenirs-esr/avenirs-dsav。 。 。 .
为了让风格从 DSAV 在您的工程中, 请确保导入主 DSAV 样式 main.ts 改为: import '@avenirs-esr/avenirs-dsav/style.css'。 。 。 .
使用 SCSS 混音器
DSAV提供SCSS混音器,用于您的项目. 要使用它们,请导入您 Vue 组件中的混音文件 <style> 块 :
<style lang="scss" scoped>
@use '@avenirs-esr/avenirs-dsav/mixins' as dsav;
.my-component {
// Use responsive breakpoint mixins
@include dsav.min-width(md) {
width: 17.25rem;
}
@include dsav.max-width(lg) {
padding: 1rem;
}
}
</style>
可用的混合
响应断点
@include dsav.min-width($size)- 对大于断点的屏幕应用样式@include dsav.max-width($size)- 应用比断点小的屏幕样式
可用的断点 :
sm- 36雷姆(576px)md- 48雷姆(768px)lg- 64雷姆(1024px)xl- 90雷姆(1440px)
示例
@use '@avenirs-esr/avenirs-dsav/mixins' as dsav;
.responsive-card {
width: 100%;
@include dsav.min-width(md) {
width: 50%;
}
@include dsav.min-width(lg) {
width: 33.33%;
}
}
捐款
部署一个新的 npm 版本
当您的开发成功合并到 develop 或者说 main,你可以运行的工作 Release new version to npm 并选择该版本的出错类型 : patch, (中文(简体) ), minor 或者说 release。 。 。 .
提交公约
此寄存器使用 委员会 执行一致和常规的承诺信息.
此设置扩展了常规承诺配置( T)@commitlint/config-conventional)并添加自定义规则:
允许提交类型
允许下列承诺类型:
feat- 一个新特点fix- 一个错误修复docs- 文件更改refactor- 代码重构( 没有特性或错误修正)test- 添加或修改测试build- 修改以构建工具或依赖性revert- 恢复先前的承诺
QQ 提交信件规则
| 规则 | 说明 |
|---|---|
type-enum | 只允许上述类型 |
type-case | 提交类型必须是 小写 |
type-empty | 提交类型 绝对不能 为空 |
subject-case | 对弹壳没有限制(规则因灵活性而失效) |
QQ 示例提交信件
feat: add user login functionality
fix: handle null pointer in dashboard
docs: update installation guide
ARIA 作者做法指南
开发组件时,请参考 ARIA 作者做法指南 确保无障碍性得到遵守. 你们可以找到 设计模式 财务报告和审定财务报表 最佳做法 用于实施可访问的网络组件.
使用DSAV的项目
- AVENIR(s) 组合 :高等教育和研究电子组合