Skip to content

Commit

Permalink
feat(doc): 完善 Button 组件展示页
Browse files Browse the repository at this point in the history
  • Loading branch information
@koppthe
koppthe committed Aug 2, 2018
1 parent aab78e2 commit 63f5de4
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 64 deletions.
164 changes: 106 additions & 58 deletions src/pages/basic/button/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
15 changes: 9 additions & 6 deletions src/pages/basic/button/index.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}

0 comments on commit 63f5de4

Please sign in to comment.