From 63f5de48f85de3276fd771a5c90ff7259de1bed3 Mon Sep 17 00:00:00 2001
From: koppthe <kopptsoft@gmail.com>
Date: Thu, 2 Aug 2018 21:33:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(doc):=20=E5=AE=8C=E5=96=84=20Button=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B1=95=E7=A4=BA=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/basic/button/index.js   | 164 +++++++++++++++++++-----------
 src/pages/basic/button/index.scss |  15 +--
 2 files changed, 115 insertions(+), 64 deletions(-)

diff --git a/src/pages/basic/button/index.js b/src/pages/basic/button/index.js
index 7f18a7669..9867a9720 100644
--- a/src/pages/basic/button/index.js
+++ b/src/pages/basic/button/index.js
@@ -30,57 +30,57 @@ export default class ButtonPage extends Taro.Component {
           <View className='panel'>
             <View className='panel__title'>主操作</View>
             <View className='panel__content'>
-              <View className='example'>
-                <AtButton type='primary' onClick={this.onButtonClick.bind(this)}>页面主操作</AtButton>
+              <View className='btn-item'>
+                <AtButton type='primary' onClick={this.onButtonClick.bind(this)}>主操作按钮</AtButton>
               </View>
-              <View className='example'>
+              <View className='btn-item'>
                 <AtButton type='primary' loading onClick={this.onButtonClick.bind(this)}>带loading</AtButton>
               </View>
-              <View className='example'>
+              <View className='btn-item'>
                 <AtButton type='primary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
               </View>
-              <View className='example'>
+              <View className='btn-item'>
                 <AtButton type='primary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
               </View>
-              <View className='example'>
+              <View className='btn-item'>
                 <AtButton type='primary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
               </View>
             </View>
           </View>
 
-          {/* 次操作 */}
+          {/* 次要操作 */}
           <View className='panel'>
-            <View className='panel__title'>主操作</View>
+            <View className='panel__title'>次要操作</View>
             <View className='panel__content'>
-              <View className='example'>
-                <AtButton type='secondary' onClick={this.onButtonClick.bind(this)}>页面次操作</AtButton>
+              <View className='btn-item'>
+                <AtButton type='secondary' onClick={this.onButtonClick.bind(this)}>次操作按钮</AtButton>
               </View>
-              <View className='example'>
+              <View className='btn-item'>
                 <AtButton type='secondary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
               </View>
-              <View className='example'>
+              <View className='btn-item'>
                 <AtButton type='secondary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
               </View>
-              <View className='example'>
+              <View className='btn-item'>
                 <AtButton type='secondary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
               </View>
             </View>
           </View>
 
-          {/* 线框按钮 */}
+          {/* 次次要操作 */}
           <View className='panel'>
-            <View className='panel__title'>线框按钮</View>
+            <View className='panel__title'>次次要操作</View>
             <View className='panel__content'>
-              <View className='example'>
-                <AtButton onClick={this.onButtonClick.bind(this)}>页面次要操作</AtButton>
+              <View className='btn-item'>
+                <AtButton onClick={this.onButtonClick.bind(this)}>次次要操作按钮</AtButton>
               </View>
-              <View className='example'>
+              <View className='btn-item'>
                 <AtButton icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
               </View>
-              <View className='example'>
+              <View className='btn-item'>
                 <AtButton active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
               </View>
-              <View className='example'>
+              <View className='btn-item'>
                 <AtButton disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
               </View>
             </View>
@@ -90,25 +90,49 @@ export default class ButtonPage extends Taro.Component {
           <View className='panel'>
             <View className='panel__title'>小按钮</View>
             <View className='panel__content'>
-              <View className='example small'>
-                <AtButton type='primary' size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton type='secondary' size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-              </View>
-              <View className='example small'>
-                <AtButton type='primary' size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
-                <AtButton type='secondary' size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
-                <AtButton size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
-              </View>
-              <View className='example small'>
-                <AtButton type='primary' size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton type='secondary' size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-              </View>
-              <View className='example small'>
-                <AtButton type='primary' size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton type='secondary' size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+              <View className='btn-item'>
+                <View className='subitem'>
+                  <AtButton type='primary' size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton type='secondary' size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+              </View>
+              <View className='btn-item'>
+                <View className='subitem'>
+                  <AtButton type='primary' size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton type='secondary' size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
+                </View>
+              </View>
+              <View className='btn-item'>
+                <View className='subitem'>
+                  <AtButton type='primary' size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton type='secondary' size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+              </View>
+              <View className='btn-item'>
+                <View className='subitem'>
+                  <AtButton type='primary' size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton type='secondary' size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
               </View>
             </View>
           </View>
@@ -117,25 +141,49 @@ export default class ButtonPage extends Taro.Component {
           <View className='panel'>
             <View className='panel__title'>圆角按钮</View>
             <View className='panel__content'>
-              <View className='example small'>
-                <AtButton type='primary' size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton type='secondary' size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-              </View>
-              <View className='example small'>
-                <AtButton type='primary' size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
-                <AtButton type='secondary' size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
-                <AtButton size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
-              </View>
-              <View className='example small'>
-                <AtButton type='primary' size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton type='secondary' size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-              </View>
-              <View className='example small'>
-                <AtButton type='primary' size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton type='secondary' size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                <AtButton size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+              <View className='btn-item'>
+                <View className='subitem'>
+                  <AtButton type='primary' size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton type='secondary' size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+              </View>
+              <View className='btn-item'>
+                <View className='subitem'>
+                  <AtButton type='primary' size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton type='secondary' size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
+                </View>
+              </View>
+              <View className='btn-item'>
+                <View className='subitem'>
+                  <AtButton type='primary' size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton type='secondary' size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+              </View>
+              <View className='btn-item'>
+                <View className='subitem'>
+                  <AtButton type='primary' size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton type='secondary' size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
+                <View className='subitem'>
+                  <AtButton size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                </View>
               </View>
             </View>
           </View>
diff --git a/src/pages/basic/button/index.scss b/src/pages/basic/button/index.scss
index c54bfec0b..5d6b73799 100644
--- a/src/pages/basic/button/index.scss
+++ b/src/pages/basic/button/index.scss
@@ -1,11 +1,14 @@
-.example {
-  margin-bottom: 15px;
+.panel__content {
+  .btn-item {
+    margin-bottom: 20px;
 
-  &.small {
-    text-align: center;
+    &:last-child {
+      margin-bottom: 0;
+    }
 
-    .at-button {
-      margin: 0 20px;
+    .subitem {
+      display: inline-block;
+      margin-left: 24px;
     }
   }
 }