ds-app-ui
v2.0.40
Published
dataStory使用elementUi主题风格统一
Downloads
126
Readme
数说风格风格统一
项目说明
elementUi风格统一,发布到npm
本地开发
$ npm install ds-app-ui
引入方式
- 在入口文件(一般是main.js)引入
import 'ds-app-ui';
打包&发布
- 先npm run build再npm run demo发布
- host配置:datastory3.com.cn 172.18.5.53
网页展示结构
为了通用UI简单明了,每个UI块应当按照这三种结构,详情见网页
- 展示效果
- 使用情况(用表格展示,一目了然)
- 引用代码(v-marked高亮代码)
代码编辑
采用highlight.js高亮代码,在pre和code标签里面书写代码,在div里添加指令
v-marked
,如下
<div v-marked>
<pre>
<code>
{
path:"/index",
component:resolve=>{
require(['app/index'],resolve)
}
},
</code>
</pre>
</div>
标准的表单组件样式,通过在<el-form>
标签添加ds-form
类实现
拓展
表单
- 表单排行list
- 将label的宽度设置和margin-left一致
<div class="el-form ds-form"> <el-col class="el-form-item"> <label class="el-form-item__label" style="width:120px;"> <span>*</span>名称 </label> <div class="el-form-item__content" style="margin-left:120px;"> <el-input></el-input> </div> </el-col> </div>
- 将label的宽度设置和margin-left一致
- 输入框
- 错误,添加了错误提示:
<el-input class="error"></el-input>
- 不可编辑
<el-input :disabled="true"></el-input>
- 密码
<el-input type="password" class="password"></el-input>
- 大文本编辑框
<el-input type="textarea"></el-input>
- 错误,添加了错误提示:
- 标签
- 选中状态
<el-tag :closable="true" :type="selected"> 已选标签 </el-tag>
- 快速选中标签框
<div class="el-tag-quick"><!-- 这是你的N个标签 --></div>
- 选中状态
- 滑动选择器。
- 范围选择
<el-slider class="el-slider--range"></el-slider>
- 禁用
- 范围选择
el-button颜色搭配
- type = "green"
- type = "blue"
- type = "text"
- 大型(size = "large")、小型(size="small")、正常的使用默认即可,无须设置size
拓展icon图标
- ds设计的icon,已配置在[http://172.18.5.53/#/icon]
- 要在button按钮里面加icon手动添加
<button type="button" class="el-button el-button--text"> <i class="ds-icon-xxx"></i> </button>
- input加icon
翻页(分页)控件
- 上边距为16px
- 因为很多分页都在最底部,而底部离主体内容有16px的间距,所以下边距为0