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] Badge: update info style (#2122)

Browse Source
This commit is contained in:
neverland 2018-11-22 21:50:27 +08:00 committed by GitHub
parent 58c06e7d34
commit 8042e37829
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 59 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/badge/demo/index.vue
View File

@ -16,7 +16,7 @@
/>
<van-badge
:title="$t('title')"
info="199"
info="99+"
/>
</van-badge-group>
</demo-block>

2
packages/badge/en-US.md
View File

@ -18,7 +18,7 @@ Use `active-key` prop to set index of chosen 'badge'
<van-badge title="Title" />
<van-badge title="Title" info="8" />
<van-badge title="Title" info="99" />
<van-badge title="Title" info="199" />
<van-badge title="Title" info="99+" />
</van-badge-group>
```

12
packages/badge/index.less
View File

@ -13,6 +13,10 @@
background-color: @background-color;
border-left: 3px solid transparent;
&__text {
position: relative;
}
&:active {
background-color: @active-color;
}
@ -36,11 +40,7 @@
}
}
&__info {
top: 7px;
left: auto;
right: 5px;
font-size: 12px;
transform: scale(0.9);
.van-info {
right: 4px;
}
}

12
packages/badge/index.vue
View File

@ -4,11 +4,13 @@
:href="url"
@click="onClick"
>
<van-info
:info="info"
:class="b('info')"
/>
{{ title }}
<div :class="b('text')">
{{ title }}
<van-info
:info="info"
:class="b('info')"
/>
</div>
</a>
</template>

30
packages/badge/test/__snapshots__/demo.spec.js.snap
View File

@ -5,26 +5,34 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-hairline--top-bottom van-badge-group">
<a class="van-badge van-badge--select van-hairline">
<!---->
标签名称
<div class="van-badge__text">
标签名称
<!---->
</div>
</a>
<a class="van-badge van-hairline">
<div class="van-info van-badge__info">
8
<div class="van-badge__text">
标签名称
<div class="van-info van-badge__info">
8
</div>
</div>
标签名称
</a>
<a class="van-badge van-hairline">
<div class="van-info van-badge__info">
99
<div class="van-badge__text">
标签名称
<div class="van-info van-badge__info">
99
</div>
</div>
标签名称
</a>
<a class="van-badge van-hairline">
<div class="van-info van-badge__info">
199
<div class="van-badge__text">
标签名称
<div class="van-info van-badge__info">
99+
</div>
</div>
标签名称
</a>
</div>
</div>

2
packages/badge/zh-CN.md
View File

@ -19,7 +19,7 @@ Vue.use(BadgeGroup);
<van-badge title="标签名称" />
<van-badge title="标签名称" info="8" />
<van-badge title="标签名称" info="99" />
<van-badge title="标签名称" info="199" />
<van-badge title="标签名称" info="99+" />
</van-badge-group>
```

37
packages/info/index.less
View File

@ -1,19 +1,30 @@
@import '../style/var';
@van-info-size: 16px;
@van-info-color: @white;
@van-info-padding: 0 3px;
@van-info-font-size: 12px;
@van-info-font-weight: 500;
@van-info-border-width: 1px;
@van-info-background-color: @red;
@van-info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
.van-info {
left: 100%;
top: -.5em;
color: @white;
font-size: .6em;
font-weight: 500;
padding: 0 .25em;
text-align: center;
min-width: 1.4em;
line-height: 1.4;
position: absolute;
border-radius: .7em;
right: 0;
top: -@van-info-size / 2;
color: @van-info-color;
font-size: @van-info-font-size;
font-weight: @van-info-font-weight;
font-family: @van-info-font-family;
text-align: center;
box-sizing: border-box;
background-color: @red;
transform: translateX(-50%);
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
padding: @van-info-padding;
min-width: @van-info-size;
line-height: @van-info-size - @van-info-border-width * 2;
border: @van-info-border-width solid @white;
border-radius: @van-info-size;
background-color: @van-info-background-color;
transform: translateX(50%);
transform-origin: 100%;
}