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

[improvement] update info style (#1066)

Browse Source
This commit is contained in:
neverland 2018-12-12 16:19:56 +08:00 committed by GitHub
parent acc2b1da29
commit 9eedd9776d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 88 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/pages/badge/index.wxml
View File

@ -4,7 +4,7 @@
<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>
</view>
</demo-block>

2
example/pages/tabbar/index.wxml
View File

@ -9,7 +9,7 @@
<demo-block title="自定义图标">
<van-tabbar active="{{ active2 }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
<van-tabbar-item>
<van-tabbar-item info="3">
<span>自定义</span>
<image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
<image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" />

2
packages/badge/README.md
View File

@ -20,7 +20,7 @@
<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>
```

5
packages/badge/index.json
View File

@ -1,3 +1,6 @@
{
"component": true
"component": true,
"usingComponents": {
"van-info": "../info/index"
}
}

17
packages/badge/index.less
View File

@ -36,20 +36,7 @@
}
}
&__info {
position: absolute;
top: 4px;
right: 2px;
color: @white;
font-size: 12px;
font-weight: 500;
transform: scale(0.8);
text-align: center;
box-sizing: border-box;
padding: 0 6px;
min-width: 18px;
line-height: 18px;
border-radius: 9px;
background-color: @red;
&__text {
position: relative;
}
}

2
packages/badge/index.ts
View File

@ -7,7 +7,7 @@ VantComponent({
},
props: {
info: Number,
info: null,
title: String
},

10
packages/badge/index.wxml
View File

@ -1,4 +1,10 @@
<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onClick">
<view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
{{ title }}
<view class="van-badge__text">
<van-info
wx:if="{{ info !== null }}"
info="{{ info }}"
custom-style="right: 4px"
/>
{{ title }}
</view>
</view>

10
packages/common/style/var.less
View File

@ -37,6 +37,16 @@
@button-bottom-action-primary-color: @white;
@button-bottom-action-primary-background-color: @red;
// Info
@info-size: 16px;
@info-color: @white;
@info-padding: 0 3px;
@info-font-size: 12px;
@info-font-weight: 500;
@info-border-width: 1px;
@info-background-color: @red;
@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
// Notify
@notify-padding: 6px 15px;
@notify-font-size: 14px;

5
packages/icon/index.json
View File

@ -1,3 +1,6 @@
{
"component": true
"component": true,
"usingComponents": {
"van-info": "../info/index"
}
}

20
packages/icon/index.less
View File

@ -30,26 +30,6 @@
}
}
&__info {
position: absolute;
right: 0;
top: -8px;
color: @white;
font-size: 12px;
font-weight: 500;
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
text-align: center;
box-sizing: border-box;
padding: 0 3px;
min-width: 16px;
line-height: 14px;
border: 1px solid @white;
border-radius: 16px;
background-color: @red;
transform: translateX(50%);
transform-origin: 100%;
}
&::before {
display: inline-block;
}

8
packages/icon/index.wxml
View File

@ -5,12 +5,10 @@
style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + size + ';' : '' }}{{ customStyle }}"
bind:tap="onClick"
>
<view
<van-info
wx:if="{{ info !== null }}"
class="van-icon__info"
>
{{ info }}
</view>
info="{{ info }}"
/>
<image
wx:if="{{ utils.isSrc(name) }}"
src="{{ name }}"

3
packages/info/index.json Normal file
View File

@ -0,0 +1,3 @@
{
"component": true
}

21
packages/info/index.less Normal file
View File

@ -0,0 +1,21 @@
@import '../common/style/var.less';
.van-info {
position: absolute;
right: 0;
top: -@info-size / 2;
color: @info-color;
font-size: @info-font-size;
font-weight: @info-font-weight;
font-family: @info-font-family;
text-align: center;
box-sizing: border-box;
padding: @info-padding;
min-width: @info-size;
line-height: @info-size - @info-border-width * 2;
border: @info-border-width solid @white;
border-radius: @info-size;
background-color: @info-background-color;
transform: translateX(50%);
transform-origin: 100%;
}

8
packages/info/index.ts Normal file
View File

@ -0,0 +1,8 @@
import { VantComponent } from '../common/component';
VantComponent({
props: {
info: null,
customStyle: String
}
});

7
packages/info/index.wxml Normal file
View File

@ -0,0 +1,7 @@
<view
wx:if="{{ info !== null }}"
class="custom-class van-info"
style="{{ customStyle }}"
>
{{ info }}
</view>

3
packages/tabbar-item/index.json
View File

@ -1,6 +1,7 @@
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index"
"van-icon": "../icon/index",
"van-info": "../info/index"
}
}

24
packages/tabbar-item/index.less
View File

@ -19,27 +19,6 @@
margin-bottom: 5px;
position: relative;
.van-icon {
display: block;
&__info {
color: @white;
left: 100%;
top: -.5em;
font-size: .6em;
padding: 0 .25em;
text-align: center;
min-width: 1.4em;
line-height: 1.4;
position: absolute;
border-radius: .6em;
box-sizing: border-box;
background-color: @red;
transform: translateX(-50%);
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
}
}
&--dot {
&::after {
top: 0;
@ -54,8 +33,9 @@
}
image {
width: 50px;
width: 30px;
height: 18px;
display: block;
}
}

12
packages/tabbar-item/index.wxml
View File

@ -6,14 +6,20 @@
<van-icon
wx:if="{{ icon }}"
name="{{ icon }}"
info="{{ info }}"
customStyle="display: block"
/>
<block wx:else>
<slot wx:if="{{ active }}" name="icon-active" />
<slot
wx:if="{{ active }}"
name="icon-active"
/>
<slot wx:else name="icon" />
<view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
</block>
<van-info
wx:if="{{ info !== null }}"
info="{{ info }}"
custom-style="margin-top: 2px"
/>
</view>
<view class="van-tabbar-item__text">
<slot />

2
packages/tabbar/README.md
View File

@ -42,7 +42,7 @@ Page({
```html
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item>
<van-tabbar-item info="3">
<span>自定义</span>
<image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
<image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" />