Skip to content

Commit

Permalink
feat: 添加快应用下按钮的样式
Browse files Browse the repository at this point in the history
  • Loading branch information
edward.xu committed Mar 11, 2019
1 parent 5ee52b6 commit 7f9d8e2
Show file tree
Hide file tree
Showing 2 changed files with 186 additions and 57 deletions.
135 changes: 79 additions & 56 deletions packages/cli/templates/qunar/source/pages/demo/native/button/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ class P extends React.Component {
warnSize: 'default',
disabled: false,
plain: false,
loading: false
loading: false,
ANU_ENV: process.env.ANU_ENV
};

}

setDisabled() {
Expand All @@ -38,64 +40,85 @@ class P extends React.Component {
console.log(e);
}

click(e) {
console.log('click', e);
}

render() {
return (
<div class="anu-block">
<div style="margin: 4px 0px">
<button
class="anu-block"
type="default"
loading={this.state.loading}
disabled={this.state.disabled}
plain={this.state.plain}
>
default
</button>
</div>
<div style="margin: 4px 0px">
<button
class="anu-block"
type="primary"
size="mini"
loading={this.state.loading}
disabled={this.state.disabled}
plain={this.state.plain}
>
primary
</button>
</div>
<div style="margin: 4px 0px">
<button
class="anu-block"
type="warn"
disabled={this.state.disabled}
plain={this.state.plain}
loading={this.state.loading}
>
warn
</button>
<button class="anu-block" type="warn" disabled={this.state.disabled} plain={this.state.plain}>
warn
</button>
</div>
<div style="margin: 4px 0px">
<button onClick={this.setDisabled.bind(this)}>点击设置以上按钮disabled属性</button>
</div>
<div style="margin: 4px 0px">
<button onClick={this.setPlain.bind(this)}>点击设置以上按钮plain属性</button>
</div>
<div style="margin: 4px 0px">
<button onClick={this.setLoading.bind(this)}>点击设置以上按钮loading属性</button>
</div>
<button
class="bottom"
type="primary"
open-type="getUserInfo"
lang="zh_CN"
onGetUserInfo={this.getUserInfo.bind(this)}
>
授权登录{' '}
</button>{' '}
{
this.state.ANU_ENV === 'quick' ?
<div class="quick-container">
<text disabled={this.state.disabled} class={'quick-button ' + (this.state.plain ? 'default-plain' : 'default')} onTap={this.click}>default</text>
<text disabled={this.state.disabled} class={'quick-button ' + (this.state.plain ? 'primary-plain' : 'primary')} onTap={this.click}>primary</text>
<text disabled={this.state.disabled} class={'quick-button ' + (this.state.plain ? 'warning-plain' : 'warning')} onTap={this.click}>warning</text>


<text class="quick-button default" onTap={this.setDisabled.bind(this)}>点击设置以上按钮disabled属性</text>
<text class="quick-button default" onTap={this.setPlain.bind(this)}>点击设置以上按钮plain属性</text>
</div> :
<div>
<div style="margin: 4px 0px">
<button
class="anu-block"
type="default"
loading={this.state.loading}
disabled={this.state.disabled}
plain={this.state.plain}
>
default
</button>
</div>
<div style="margin: 4px 0px">
<button
class="anu-block"
type="primary"
size="mini"
loading={this.state.loading}
disabled={this.state.disabled}
plain={this.state.plain}
>
primary
</button>
</div>
<div style="margin: 4px 0px">
<button
class="anu-block"
type="warn"
disabled={this.state.disabled}
plain={this.state.plain}
loading={this.state.loading}
>
warn
</button>
<button class="anu-block" type="warn" disabled={this.state.disabled} plain={this.state.plain}>
warn
</button>
</div>
<div style="margin: 4px 0px">
<button onClick={this.setDisabled.bind(this)}>点击设置以上按钮disabled属性</button>
</div>
<div style="margin: 4px 0px">
<button onClick={this.setPlain.bind(this)}>点击设置以上按钮plain属性</button>
</div>
<div style="margin: 4px 0px">
<button onClick={this.setLoading.bind(this)}>点击设置以上按钮loading属性</button>
</div>
<button
class="bottom"
type="primary"
open-type="getUserInfo"
lang="zh_CN"
onGetUserInfo={this.getUserInfo.bind(this)}
>
授权登录{' '}
</button>{' '}
</div>

}


</div>
);
}
Expand Down
108 changes: 107 additions & 1 deletion packages/cli/templates/qunar/source/pages/demo/native/button/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1 +1,107 @@
@import '@assets/global.scss';
@import '@assets/global.scss';

$defaultcolor: #F8F8F8;
$primarycolor: #1AAD19;
$warningcolor: #E64340;
$fontcolor: #000000;

.quick-container {
display: flex;
flex-direction: column;
}

.quick-button {
padding-left:14px;
padding-right:14px;
box-sizing:border-box;
font-size:18px;
text-align:center;
text-decoration:none;
line-height: 46px;
border-radius:5px;
-webkit-tap-highlight-color:transparent;
color:#000000;
background-color: $defaultcolor;
margin-top: 12px;



}

.primary {
color:#FFFFFF;
background-color: $primarycolor;
&:active {
color:#FFFFFF;
background-color: darken($primarycolor, 5%);
}
&:disabled {
color:#FFFFFF;
background-color: lighten($primarycolor, 50%);
}

&-plain {
color:$primarycolor;
border:1rpx solid $primarycolor;
background-color:transparent;
&:active {
color:lighten($primarycolor, 15%);
border:1rpx solid lighten($primarycolor, 15%);
}
&:disabled {
color:lighten($fontcolor, 50%);
border:1rpx solid lighten($fontcolor, 50%);
}
}
}


.warning {
color:#FFFFFF;
background-color: $warningcolor;
&:active {
color:#FFFFFF;
background-color: darken($warningcolor, 5%);
}
&:disabled {
color:#FFFFFF;
background-color: lighten($warningcolor, 20%);
}

&-plain {
color:$warningcolor;
border:1rpx solid $warningcolor;
background-color:transparent;
&:active {
color:lighten($warningcolor, 15%);
border:1rpx solid lighten($warningcolor, 15%);
}
&:disabled {
color:lighten($fontcolor, 50%);
border:1rpx solid lighten($fontcolor, 50%);
}
}
}



.default {
&:active {
background-color: darken($defaultcolor, 5%);
}

&-plain {
color:$fontcolor;
border:1rpx solid $fontcolor;
background-color:transparent;
&:active {
color:lighten($fontcolor, 30%);
border:1rpx solid lighten($fontcolor, 30%);
}
&:disabled {
color:lighten($fontcolor, 50%);
border:1rpx solid lighten($fontcolor, 50%);
}
}

}

0 comments on commit 7f9d8e2

Please sign in to comment.