Skip to content

Commit

Permalink
feat(doc): 重构基础组件展示页
Browse files Browse the repository at this point in the history
  • Loading branch information
@koppthe
koppthe committed Jul 27, 2018
1 parent 2f73d2b commit 190bffa
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 97 deletions.
199 changes: 117 additions & 82 deletions src/pages/basic/button/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,96 +22,131 @@ export default class ButtonPage extends Taro.Component {
}

render () {
// let {icons} = this.state
return (
<View className='page'>
<View className='example'>
<AtButton type='primary' onClick={this.onButtonClick.bind(this)}>页面主操作</AtButton>
{/* S Header */}
<View className='doc-header'>
<View className='doc-header__title'>按钮</View>
</View>
<View className='example'>
<AtButton type='primary' loading onClick={this.onButtonClick.bind(this)}>带loading</AtButton>
</View>
<View className='example'>
<AtButton type='primary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
</View>
<View className='example'>
<AtButton type='primary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
</View>
<View className='example'>
<AtButton type='primary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
</View>

{/* E Header */}

<View className='example'>
<AtButton type='secondary' onClick={this.onButtonClick.bind(this)}>页面次操作</AtButton>
</View>
<View className='example'>
<AtButton type='secondary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
</View>
<View className='example'>
<AtButton type='secondary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
</View>
<View className='example'>
<AtButton type='secondary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
</View>

<View className='example'>
<AtButton onClick={this.onButtonClick.bind(this)}>页面次要操作</AtButton>
</View>
<View className='example'>
<AtButton icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
</View>
<View className='example'>
<AtButton active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
</View>
<View className='example'>
<AtButton disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
</View>
{/* S Body */}
<View className='doc-body'>
{/* 主操作 */}
<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>
<View className='example'>
<AtButton type='primary' loading onClick={this.onButtonClick.bind(this)}>带loading</AtButton>
</View>
<View className='example'>
<AtButton type='primary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
</View>
<View className='example'>
<AtButton type='primary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
</View>
<View className='example'>
<AtButton type='primary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
</View>
</View>
</View>

<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>
{/* 次操作 */}
<View className='panel'>
<View className='panel__title'>主操作</View>
<View className='panel__content'>
<View className='example'>
<AtButton type='secondary' onClick={this.onButtonClick.bind(this)}>页面次操作</AtButton>
</View>
<View className='example'>
<AtButton type='secondary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
</View>
<View className='example'>
<AtButton type='secondary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
</View>
<View className='example'>
<AtButton type='secondary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
</View>
</View>
</View>

{/* 带圆角 */}
<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>
{/* 线框按钮 */}
<View className='panel'>
<View className='panel__title'>线框按钮</View>
<View className='panel__content'>
<View className='example'>
<AtButton onClick={this.onButtonClick.bind(this)}>页面次要操作</AtButton>
</View>
<View className='example'>
<AtButton icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
</View>
<View className='example'>
<AtButton active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
</View>
<View className='example'>
<AtButton disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
</View>
</View>
</View>

{/* 小按钮 */}
<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>
</View>
</View>

{/* 圆角按钮 */}
<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>
</View>
</View>
</View>
{/* E Body */}
</View>
)
}
Expand Down
6 changes: 1 addition & 5 deletions src/pages/basic/button/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@


.page {
background-color: #fff;
}
@import '../../../assets/style/common.scss';

.example {
margin-bottom: 15px;
Expand Down
23 changes: 18 additions & 5 deletions src/pages/basic/icon/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,25 @@ export default class IconPage extends Taro.Component {
const { icons } = this.state
return (
<View className='page'>
<View className='example'>
{icons.map((icon, index) => (
<AtIcon value={icon} color='#f00' size={30} key={index}>
</AtIcon>
))}
{/* 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'>ICON</View>
<View className='panel__content'>
<View className='example'>
{icons.map((icon, index) => (
<AtIcon value={icon} color='#f00' size={30} key={index}>
</AtIcon>
))}
</View>
</View>
</View>
</View>
</View>
)
Expand Down
6 changes: 1 addition & 5 deletions src/pages/basic/icon/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@


.page {
background-color: #fff;
}
@import '../../../assets/style/common.scss';

.at-icon {
margin: 0 10px;
Expand Down

0 comments on commit 190bffa

Please sign in to comment.