mjz update

This commit is contained in:
mjz
2023-06-07 23:32:56 +08:00
parent 1e24f6a9d3
commit 75314726b8
12 changed files with 996 additions and 27 deletions
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+3 -3
View File
@@ -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,控制进度