blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Dialog: update style (#1906)

Browse Source
This commit is contained in:
neverland 2018-10-09 17:32:01 +08:00 committed by GitHub
parent 396819c355
commit e68ea547b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/dialog/demo/index.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('title1')"> <demo-block :title="$t('alert1')">
<van-button @click="onClickAlert">Alert</van-button> <van-button type="primary" plain @click="onClickAlert">{{ $t('alert1') }}</van-button>
<van-button @click="onClickAlert2">{{ $t('alert2') }}</van-button> <van-button type="primary" plain @click="onClickAlert2">{{ $t('alert2') }}</van-button>
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="$t('confirm')">
<van-button @click="onClickConfirm">Confirm</van-button> <van-button type="primary" plain @click="onClickConfirm">{{ $t('confirm') }}</van-button>
</demo-block> </demo-block>
<demo-block :title="$t('advancedUsage')"> <demo-block :title="$t('advancedUsage')">
<van-button @click="show = true">{{ $t('advancedUsage') }}</van-button> <van-button type="danger" plain @click="show = true">{{ $t('advancedUsage') }}</van-button>
<van-dialog <van-dialog
v-model="show" v-model="show"
show-cancel-button show-cancel-button
@ -36,14 +36,15 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
title1: '消息提示', alert1: '消息提示',
title2: '消息确认', alert2: '无标题提示',
alert2: '无标题 Alert' confirm: '消息确认',
content: '有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者'
}, },
'en-US': { 'en-US': {
title1: 'Alert dialog', alert1: 'Alert',
title2: 'Confirm dialog', alert2: 'Alert without title',
alert2: 'Alert without title' confirm: 'Confirm dialog'
} }
}, },
@ -90,7 +91,7 @@ export default {
<style lang="postcss"> <style lang="postcss">
.demo-dialog { .demo-dialog {
.van-doc-demo-block > .van-button { .van-doc-demo-block > .van-button {
margin: 15px; margin-left: 15px;
} }
} }
</style> </style>

10
packages/dialog/test/__snapshots__/demo.spec.js.snap
View File

@ -3,14 +3,14 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">Alert</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">消息提示</span></button>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">无标题 Alert</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">无标题提示</span></button>
</div> </div>
<div> <div>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">Confirm</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">消息确认</span></button>
</div> </div>
<div> <div>
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">高级用法</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">高级用法</span></button>
<div name="van-dialog-bounce" class="van-dialog" style="display:none;"> <div name="van-dialog-bounce" class="van-dialog" style="display:none;">
<!----> <!---->
<div class="van-dialog__content"> <div class="van-dialog__content">
@ -52,7 +52,7 @@ exports[`renders demo correctly 1`] = `
取消 取消
</span></button> </span></button>
<button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text"> <button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">
确认 消息确认
</span></button> </span></button>
</div> </div>
</div> </div>

10
packages/vant-css/src/dialog.css
View File

@ -13,7 +13,8 @@
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
&__header { &__header {
padding: 15px 0 0; font-weight: 500;
padding-top: 25px;
text-align: center; text-align: center;
&--isolated { &--isolated {
@ -22,12 +23,13 @@
} }
&__message { &__message {
padding: 20px; padding: 25px;
font-size: 14px;
line-height: 1.5; line-height: 1.5;
&--has-title { &--has-title {
padding-top: 12px;
color: $gray-darker; color: $gray-darker;
font-size: 14px;
} }
} }
@ -51,7 +53,7 @@
&__confirm { &__confirm {
&, &,
&:active { &:active {
color: $red; color: $blue;
} }
} }