mjz update

2023-05-28 18:15:33 +08:00
parent 9b75e60571
commit ed6e2d81fb
243 changed files with 11730 additions and 6 deletions
@@ -0,0 +1,100 @@
+---
+title: 按钮
+date: 2023-05-28 15:20:38
+permalink: /pages/basics/button
+article: false
+---
+
+## 按钮形状
+> css 代码
+```css
+.cu-btn  默认　　
+.cu-btn round  圆角
+.cu-btn cuIcon  图标按钮
+```
+
+> 演示代码
+```vue
+<button class="cu-btn">默认</button>
+<button class="cu-btn round">圆角</button>
+<!-- 图标按钮 -->
+<button class="cu-btn cuIcon">
+    <text class="cuIcon-emojifill"></text>
+</button>
+```
+
+## 按钮尺寸
+
+> css 代码
+```css
+.cu-btn sm  小尺寸
+.cu-btn  默认
+.cu-btn lg  大尺寸
+```
+
+> 演示代码
+```vue
+<button class="cu-btn round sm">小尺寸</button>
+<button class="cu-btn round">默认</button>
+<button class="cu-btn round lg">大尺寸</button>
+```
+
+## 按钮颜色
+
+> css 代码
+```css
+.bg-red 背景颜色 | .bg-...
+.shadow 阴影
+```
+
+> 演示代码
+```vue
+<button class="cu-btn round bg-red shadow">按钮</button>
+```
+
+## 镂空按钮
+`.bg-` 换成 `.line-`
+
+```css
+.lines-red|... 边框深（大）
+.line-red|...  边框浅（小）
+```
+
+## 块状按钮
+
+> css 代码
+```css
+.cu-btn lg
+```
+
+> 演示代码
+```vue
+<button class="cu-btn bg-grey lg">玄灰</button>
+<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
+```
+
+## 无效状态
+
+加上 `disabled` 属性即可
+
+> 演示代码
+```vue
+<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
+<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
+```
+
+## 按钮加图标
+`button` 标签里加入**图标+文字**即可，需要加载状态，加上属性 `loading`
+
+> 演示代码
+```vue
+<button class="cu-btn block line-orange lg">
+    <text class="cuIcon-upload"></text> 图标
+</button>
+<button class="cu-btn block bg-blue margin-tb-sm lg">
+    <text class="cuIcon-loading2 cuIconfont-spin"></text> 加载
+</button>
+<button class="cu-btn block bg-black margin-tb-sm lg" loading> 
+    原生加载
+</button>
+```