From a5486209316c15888eac8d5187e6d836bbbc4e28 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Sat, 22 Apr 2023 23:40:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=8C=89=E9=92=AE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/docset/ui/icons.md     |   5 +-
 public/docset/ui/wc-button.md | 151 ++++++++++++++++++----------------
 src/pages/@wcui/docs/app.vue  |   2 +
 3 files changed, 85 insertions(+), 73 deletions(-)

diff --git a/public/docset/ui/icons.md b/public/docset/ui/icons.md
index c1df8ed..c024e3f 100644
--- a/public/docset/ui/icons.md
+++ b/public/docset/ui/icons.md
@@ -3,12 +3,11 @@
 
 
 <style>
-.flex,.flex-free { display:flex;align-items:center;flex-wrap:wrap }
-.flex > *,.flex-free > *{margin:0 16px}
+.flex-free { display:flex;align-items:center;flex-wrap:wrap }
+.flex-free > *{margin:0 16px}
 .flex-free > div {display:flex;flex-direction:column;align-items:center;width:96px;height:72px;--size:28px;margin:16px;padding:12px 4px;border:1px solid var(--color-plain-1);border-radius:3px}
 .flex-free > div:hover {box-shadow:0 0 10px rgba(0,0,0,.1)} 
 .flex-free > div h3 {margin:auto;line-height:1.5;font-size:12px;font-weight:normal} 
-.flex > *{flex:1}
 </style>
 
 ### 使用
diff --git a/public/docset/ui/wc-button.md b/public/docset/ui/wc-button.md
index 8847084..929cbec 100644
--- a/public/docset/ui/wc-button.md
+++ b/public/docset/ui/wc-button.md
@@ -1,121 +1,132 @@
-<style>
-.flex,.flex-free { display:flex;align-items:center;margin-top:16px }
-.flex > *,.flex-free > *{margin:0 16px}
-.flex > *{flex:1}
-</style>
-
 ## WC-BUTTON
 > 常用的按钮组件。
 
 
 ### 基础用法
 
-<section class="flex">
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
   <wc-button type="primary">Primary Button</wc-button>
   <wc-button type="info">Info Button</wc-button>
   <wc-button type="success">Success Button</wc-button>
   <wc-button type="warning">Warning Button</wc-button>
-</section>
-<section class="flex">
+</wc-space>
+<wc-space>
   <wc-button>Normal Button</wc-button>
   <wc-button type="help">Help Button</wc-button>
   <wc-button type="secondary">Secondary Button</wc-button>
   <wc-button type="danger">Danger Button</wc-button>
-</section>
+</wc-space>
+  </wc-lang>
+</wc-sandbox>
 
 
 ### 尺寸大小
 
-5种尺寸规则的按钮, 如果不满足自己的需求, 可以自行设置`width`和`height`。
+6种尺寸规则的按钮, 如果不满足自己的需求, 可以自行设置`width`和`height`。
 
-```html
-<wc-button size="xxxl">xxxl Size</wc-button>
-<wc-button size="xxl">xxl Size</wc-button>
-<wc-button size="xl">xl Size</wc-button>
-<wc-button>Deault Size</wc-button>
-<wc-button size="m">Medium Size</wc-button>
-<wc-button size="s">small Size</wc-button>
-```
-
-<section class="flex">
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
   <wc-button size="xxxl">xxxl Size</wc-button>
   <wc-button size="xxl">xxl Size</wc-button>
   <wc-button size="xl">xl Size</wc-button>
   <wc-button>Deault Size</wc-button>
   <wc-button size="m">Medium Size</wc-button>
   <wc-button size="s">small Size</wc-button>
-</section>
+</wc-space>
+  </wc-lang>
+</wc-sandbox>
+
+
+### 颜色&样式&形状
+可通过设置`type`属性修改按钮样式, 还可通过`solid`属性将按钮改成实心, 另外, `round`和`circle`这2个属性, 可以让按钮变成圆角和圆形。
+
+如果有其他半径需求, 可以直接通过css设置`border-radius`。
+
+
+`注:` circle属性会让移除掉按钮内文字, 只能用图标
+
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
+  <wc-button type="info">type=info</wc-button>
+  <wc-button type="danger">type=info</wc-button>
+  <wc-button solid type="info">type=info</wc-button>
+  <wc-button solid type="danger">type=info</wc-button>
+</wc-space>
+<wc-space>
+  <wc-button type="info" round>圆角矩形</wc-button>
+  <wc-button type="secondary" circle icon="edit"></wc-button>
+</wc-space>
+  </wc-lang>
+</wc-sandbox>
+
+
 
 ### 状态
 按钮有2种状态, `loading` 和 `disabled`, 这2种状态下, 都不能点击, 也无法获取焦点。
 
-```html
-<wc-button loading>Loading Status</wc-button>
-<wc-button disabled>Disabled Status</wc-button>
-<wc-button type="info" loading>Loading Status</wc-button>
-<wc-button type="info" disabled>Disabled Status</wc-button>
-```
-
-
-<section class="flex">
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
   <wc-button loading>Loading Status</wc-button>
   <wc-button disabled>Disabled Status</wc-button>
-  <wc-button type="info" loading>Loading Status</wc-button>
-  <wc-button type="info" disabled>Disabled Status</wc-button>
-</section>
+  <wc-button solid loading>Loading Status</wc-button>
+  <wc-button solid disabled>Disabled Status</wc-button>
+</wc-space>
+  </wc-lang>
+</wc-sandbox>
+
 
 
 ### 图标
 按钮可通过`icon`属性, 增加前置图标, 图标的名字, 参考前面的章节。
 
-```html
-<wc-button icon="edit">编辑</wc-button>
-<wc-button type="danger" icon="trash">删除</wc-button>
-<wc-button type="info" icon="load">静态菊花图标</wc-button>
-<wc-button type="success" icon="loading">动态加载图标</wc-button>
-<wc-button type="success" icon="fly">提交</wc-button>
-```
-
-<section class="flex">
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
   <wc-button icon="edit">编辑</wc-button>
   <wc-button type="danger" icon="trash">删除</wc-button>
   <wc-button type="info" icon="load">静态菊花图标</wc-button>
   <wc-button type="success" icon="loading">动态加载图标</wc-button>
   <wc-button type="success" icon="fly">提交</wc-button>
-</section>
+</wc-space>
+  </wc-lang>
+</wc-sandbox>
 
-### 特殊属性
-有2个特殊属性`round`和`circle`, 可以控制按钮的圆角半径, 如果有其他半径需求, 可以直接通过css设置`border-radius`。
-
-`注:` circle属性会让移除掉按钮内文字, 只能用图标
-
-```html
-<wc-button type="info" size="xxl" round>圆角矩形</wc-button>
-<wc-button type="info" size="xl" round>圆角矩形</wc-button>
-<wc-button type="info" round>圆角矩形</wc-button>
-<wc-button type="danger" size="xxl" circle icon="trash"></wc-button>
-<wc-button type="info" size="xl" circle icon="plus"></wc-button>
-<wc-button type="secondary" circle icon="edit"></wc-button>
-```
-
-<section class="flex-free">
-  <wc-button type="info" size="xxl" round>圆角矩形</wc-button>
-  <wc-button type="info" size="xl" round>圆角矩形</wc-button>
-  <wc-button type="info" round>圆角矩形</wc-button>
-  <wc-button type="danger" size="xxl" circle icon="trash"></wc-button>
-  <wc-button type="info" size="xl" circle icon="plus"></wc-button>
-  <wc-button type="secondary" circle icon="edit"></wc-button>
-</section>
 
 
 ### 完整APIs
 
 |  属性  |  值类型  |   默认值   |     描述   |
 |  :-:  |   :-:   |   :-:   |     -   |
-|  type  |  String  |   无   |   按钮类型, 仅能决定按钮的颜色, 无额外作用, 可选值有: primary、info、success、warning、default、inverse、danger   |
-|  size  |   String   |  default   |   按钮尺寸, 可选值有: large、medium、small、mini   |
-|  loading  |   Boolean  | false   |  按钮的加载状态, 为true时, 按钮会呈现loading动画, 且按钮点击事件无效 |
-|  disbaled  |   Boolean  | false   |  按钮的禁用状态, 为true时, 按钮点击事件无效 |
+|  type  |  String  |   无   |   按钮类型, 仅能决定按钮的颜色, 无额外作用, 可选值有: `primary、info、success、warning、default、secondary、danger`   |
+|  size  |   String   |  default   |   按钮尺寸, 可选值有: `xxxl、xxl、xl、l、m、s`   |
+|  loading  |   Boolean  | false   |  按钮的加载状态, 为`true`时, 按钮会呈现loading动画, 且按钮点击事件无效 |
+|  disbaled  |   Boolean  | false   |  按钮的禁用状态, 为`true`时, 按钮点击事件无效 |
 |  icon  |   String  |  无   |  为按钮设置前置图标 |
 |  round  |   无  |  无   |  为按钮设置大圆角半径。 不需要赋值   |
 |  circle  |   无  |  无   |  设置为正圆按钮, 且会让文字失效。 不需要赋值   |
diff --git a/src/pages/@wcui/docs/app.vue b/src/pages/@wcui/docs/app.vue
index 5f4d263..de4e370 100644
--- a/src/pages/@wcui/docs/app.vue
+++ b/src/pages/@wcui/docs/app.vue
@@ -68,10 +68,12 @@ a {
 
 .content {
   flex: 1;
+  /* max-width: 1024px; */
   height: 100%;
 }
 .detail {
   width: calc(100vw - 284px);
+  max-width: 960px;
   margin: 32px;
 }
 </style>