feat(doc): 重构表单组件展示页

jd-opensource · Jul 27, 2018 · d9645d4 · d9645d4
1 parent 5696ec1
commit d9645d4
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 34 deletions.
diff --git a/src/pages/form/checkbox/index.js b/src/pages/form/checkbox/index.js
@@ -25,8 +25,25 @@ export default class Index extends Taro.Component {
   }
   render () {
     return (
-      <View className='example__body'>
-        <AtCheckbox options={this.state.checkboxOption} selectedList={this.state.checkedList} onChange={this.handleCheckboxChange.bind(this)} />
+      <View className='page'>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>复选框</View>
+        </View>
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>基础复选框</View>
+            <View className='panel__content'>
+              <View className='example__body'>
+                <AtCheckbox options={this.state.checkboxOption} selectedList={this.state.checkedList} onChange={this.handleCheckboxChange.bind(this)} />
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
       </View>
     )
   }

diff --git a/src/pages/form/input-number/index.js b/src/pages/form/input-number/index.js
@@ -20,9 +20,26 @@ export default class Index extends Taro.Component {
   }
   render () {
     return (
-      <View className='example__body'>
-        <View className='item'><AtInputNumber min={0} max={10} step={3} value={this.state.number} onChange={this.handleNumberChange.bind(this)} /></View>
-        <View className='item'><AtInputNumber min={0} max={1} step={0.01} value={this.state.number} onChange={this.handleNumberChange.bind(this)} /></View>
+      <View className='page'>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>数字输入框</View>
+        </View>
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>基础数字输入框</View>
+            <View className='panel__content'>
+              <View className='example__body'>
+                <View className='item'><AtInputNumber min={0} max={10} step={3} value={this.state.number} onChange={this.handleNumberChange.bind(this)} /></View>
+                <View className='item'><AtInputNumber min={0} max={1} step={0.01} value={this.state.number} onChange={this.handleNumberChange.bind(this)} /></View>
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
       </View>
     )
   }

diff --git a/src/pages/form/input/index.js b/src/pages/form/input/index.js
@@ -6,7 +6,7 @@ import './index.scss'
 
 export default class Index extends Taro.Component {
   config = {
-    navigationBarTitleText: 'input 使用范例'
+    navigationBarTitleText: 'Taro UI'
   }
   constructor () {
     super(...arguments)
@@ -45,18 +45,35 @@ export default class Index extends Taro.Component {
   }
   render () {
     return (
-      <View className='example__body'>
-        <View className='item'><AtInput title='单项输入' placeholder='预设内容' value={this.state.inputValue} onChange={this.handleInput.bind(this)} /></View>
-        <View className='item'>
-          <AtInput autoFocus type='number' placeholder='请输入数字' value={this.state.inputValue} onChange={this.handleInput.bind(this)} />
-          <AtInput title='密码' type='password' placeholder='密码不能少于10位数' value={this.state.inputValue} onChange={this.handleInput.bind(this)} onFocus={this.clearValue.bind(this)} onBlur={this.handleBlur} />
-          <AtInput title='标题实在特别长就换行吧' placeholder='其他列保持正常间距' value={this.state.inputValue} onChange={this.handleInput.bind(this)} />
-          <AtInput title='出现错误' error placeholder='其他列保持正常间距' value={this.state.inputValue} onChange={this.handleInput.bind(this)} />
+      <View className='page'>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>输入框</View>
         </View>
-        <View className='input__item'>
-          <AtActionInput placeholder='输入验证码' actionName='获取验证码' value={this.state.inputValue} onChange={this.handleChange.bind(this)} onClick={this.handleClick.bind(this)} />
-          <AtActionInput placeholder='输入验证码' value={this.state.inputValue} onChange={this.handleChange.bind(this)} />
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>基础输入框</View>
+            <View className='panel__content'>
+              <View className='example__body'>
+                <View className='item'><AtInput title='单项输入' placeholder='预设内容' value={this.state.inputValue} onChange={this.handleInput.bind(this)} /></View>
+                <View className='item'>
+                  <AtInput autoFocus type='number' placeholder='请输入数字' value={this.state.inputValue} onChange={this.handleInput.bind(this)} />
+                  <AtInput title='密码' type='password' placeholder='密码不能少于10位数' value={this.state.inputValue} onChange={this.handleInput.bind(this)} onFocus={this.clearValue.bind(this)} onBlur={this.handleBlur} />
+                  <AtInput title='标题实在特别长就换行吧' placeholder='其他列保持正常间距' value={this.state.inputValue} onChange={this.handleInput.bind(this)} />
+                  <AtInput title='出现错误' error placeholder='其他列保持正常间距' value={this.state.inputValue} onChange={this.handleInput.bind(this)} />
+                </View>
+                <View className='input__item'>
+                  <AtActionInput placeholder='输入验证码' actionName='获取验证码' value={this.state.inputValue} onChange={this.handleChange.bind(this)} onClick={this.handleClick.bind(this)} />
+                  <AtActionInput placeholder='输入验证码' value={this.state.inputValue} onChange={this.handleChange.bind(this)} />
+                </View>
+              </View>
+            </View>
+          </View>
         </View>
+        {/* E Body */}
       </View>
     )
   }

diff --git a/src/pages/form/radio/index.js b/src/pages/form/radio/index.js
@@ -21,8 +21,25 @@ export default class Index extends Taro.Component {
   }
   render () {
     return (
-      <View className='example__body'>
-        <View className='item'><AtRadio options={this.state.radioOptions} value={this.state.radioValue} onClick={this.handleRadioChange.bind(this)} /></View>
+      <View className='page'>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>单选框</View>
+        </View>
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>基础单选框</View>
+            <View className='panel__content'>
+              <View className='example__body'>
+                <View className='item'><AtRadio options={this.state.radioOptions} value={this.state.radioValue} onClick={this.handleRadioChange.bind(this)} /></View>
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
       </View>
     )
   }

diff --git a/src/pages/form/rate/index.js b/src/pages/form/rate/index.js
@@ -20,11 +20,24 @@ export default class Index extends Taro.Component {
   }
   render () {
     return (
-      <View className='example__body'>
-        <View className='item'>
-          <View><AtRate size={20} value={this.state.rateValue} max={7} onChange={this.handleRateChange.bind(this)} /></View>
-          <View><AtRate /></View>
+      <View className='page'>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>评分</View>
         </View>
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>基础</View>
+            <View className='panel__content'>
+              <View><AtRate size={20} value={this.state.rateValue} max={7} onChange={this.handleRateChange.bind(this)} /></View>
+              <View><AtRate /></View>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
       </View>
     )
   }

diff --git a/src/pages/form/switch/index.js b/src/pages/form/switch/index.js
@@ -21,11 +21,28 @@ export default class Index extends Taro.Component {
   }
   render () {
     return (
-      <View className='example__body'>
-        <View className='item'>
-          <AtSwitch title='开启中' checked onChange={this.handleSwitchChange.bind(this)} />
-          <AtSwitch title='已关闭' />
+      <View className='page'>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>开关</View>
         </View>
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>基础</View>
+            <View className='panel__content'>
+              <View className='example__body'>
+                <View className='item'>
+                  <AtSwitch title='开启中' checked onChange={this.handleSwitchChange.bind(this)} />
+                  <AtSwitch title='已关闭' />
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
       </View>
     )
   }

diff --git a/src/pages/form/textarea/index.js b/src/pages/form/textarea/index.js
@@ -21,15 +21,32 @@ export default class Index extends Taro.Component {
 
   render () {
     return (
-      <View className='example__body'>
-        <View className='item'>
-          <AtTextarea
-            value={this.state.textareaValue}
-            onChange={this.handleTextAreaChange.bind(this)}
-            maxlength='200'
-            placeholder='你的问题是...'
-          />
+      <View className='page'>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>多行文本框</View>
         </View>
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>基础</View>
+            <View className='panel__content'>
+              <View className='example__body'>
+                <View className='item'>
+                  <AtTextarea
+                    value={this.state.textareaValue}
+                    onChange={this.handleTextAreaChange.bind(this)}
+                    maxlength='200'
+                    placeholder='你的问题是...'
+                  />
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
       </View>
     )
   }