mjz update
This commit is contained in:
@@ -5,7 +5,7 @@ permalink: /pages/basics/tag
|
||||
article: false
|
||||
---
|
||||
|
||||
需要设置成标签的元素加上 class `cu-tag` 即可
|
||||
需要设置成标签的元素加上 class 类名 `cu-tag` 即可
|
||||
|
||||
## 标签形状
|
||||
> css 代码
|
||||
@@ -111,7 +111,7 @@ article: false
|
||||
|
||||
## 数字标签
|
||||
|
||||
父容器一般为头像 `cu-avatar`,其中包裹**标签**,加入样式 `.badge`
|
||||
父容器一般为头像 `cu-avatar`,其中包裹**标签**,class 为 `cu-tag badge`,元素内部没有内容,则默认为红色圆点
|
||||
|
||||
> 演示代码 可对比右侧预览
|
||||
```vue
|
||||
|
||||
@@ -5,7 +5,7 @@ permalink: /pages/basics/avatar
|
||||
article: false
|
||||
---
|
||||
|
||||
需要设置成头像的元素加上 class `cu-avatar`,然后再设置 css 样式 `background-image` 即可
|
||||
需要设置成头像的元素加上 class 类名 `cu-avatar`,然后再设置 css 样式 `background-image` 即可
|
||||
|
||||
## 头像形状
|
||||
> css 代码
|
||||
|
||||
@@ -5,7 +5,7 @@ permalink: /pages/basics/progress
|
||||
article: false
|
||||
---
|
||||
|
||||
父容器加上 class `cu-progress`,该容器内放一个元素加上背景 `.bg-red|...`,设置样式 `width: '10%'`,10% 就是该进度条的所占比例。
|
||||
父容器加上 class 类名 `cu-progress`,该容器内放一个元素加上背景 `.bg-red|...`,设置样式 `width: '10%'`,10% 就是该进度条的所占比例。
|
||||
|
||||
子容器内的文字会展示在比例中间,进度条展示的时候,作者已经封装好了动画样式,因此 `width` 属性,配合动态变量即可做到好看的动画效果
|
||||
|
||||
@@ -75,7 +75,7 @@ article: false
|
||||
|
||||
## 进度条颜色
|
||||
|
||||
子容器加上 class `bg-red|...`
|
||||
子容器加上 class 类名 `bg-red|...`
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
@@ -88,7 +88,7 @@ article: false
|
||||
|
||||
父容器加上 class `striped`,进度条就会以条纹形式展示。
|
||||
|
||||
再加上 class `active`,进度条纹便以动画形式展示。
|
||||
再加上 class 类名 `active`,进度条纹便以动画形式展示。
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
|
||||
@@ -6,7 +6,7 @@ article: false
|
||||
---
|
||||
|
||||
## 边框
|
||||
在需要加边框的元素加上 class `solid`,加粗的就是 `solids`,然后还有单独四个不同的方向 `solid-top|...`
|
||||
在需要加边框的元素加上 class 类名 `solid`,加粗的就是 `solids`,然后还有单独四个不同的方向 `solid-top|...`
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
@@ -28,7 +28,7 @@ article: false
|
||||
|
||||
## 阴影
|
||||
|
||||
在需要加阴影的元素加上 class `shadow` 即可
|
||||
在需要加阴影的元素加上 class 类名 `shadow` 即可
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
|
||||
@@ -5,7 +5,7 @@ permalink: /pages/basics/loading
|
||||
article: false
|
||||
---
|
||||
|
||||
在需要设置加载的元素加上 class `cu-load`,可以设置自己喜欢的背景颜色 `.bg-red|...`
|
||||
在需要设置加载的元素加上 class 类名 `cu-load`,可以设置自己喜欢的背景颜色 `.bg-red|...`
|
||||
|
||||
加载状态 `loading` 正在加载中,`over` 加载完成,`erro` 加载失败
|
||||
|
||||
@@ -38,7 +38,7 @@ article: false
|
||||
|
||||
## 弹窗加载
|
||||
|
||||
父容器加上 class `cu-load load-modal`,且用变量控制弹窗的显示与隐藏,父容器里面的内容,既是弹窗中间的内容
|
||||
父容器加上 class 类名 `cu-load load-modal`,且用变量控制弹窗的显示与隐藏,父容器里面的内容,既是弹窗中间的内容
|
||||
|
||||
可以在弹窗里面放文字、带颜色的图标、静态图片等
|
||||
|
||||
@@ -53,7 +53,7 @@ article: false
|
||||
|
||||
## 进度条加载
|
||||
|
||||
父容器加上 class `load-progress show|hide`,动态变量控制 class `show 和 hide`,动态 style 设置距离顶部的高度 `top: 高度px`
|
||||
父容器加上 class 类名 `load-progress show|hide`,动态变量控制 class `show 和 hide`,动态 style 设置距离顶部的高度 `top: 高度px`
|
||||
|
||||
容器里第一个就是加载的进度条,需要加上 class `load-progress-bar bg-green|...`,通过动态 style,控制进度
|
||||
|
||||
|
||||
Reference in New Issue
Block a user