From 9eedd9776d4a77aafec6b44f777eb2e1476b7e91 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 12 Dec 2018 16:19:56 +0800
Subject: [PATCH] [improvement] update info style (#1066)
---
example/pages/badge/index.wxml | 2 +-
example/pages/tabbar/index.wxml | 2 +-
packages/badge/README.md | 2 +-
packages/badge/index.json | 5 ++++-
packages/badge/index.less | 17 ++---------------
packages/badge/index.ts | 2 +-
packages/badge/index.wxml | 10 ++++++++--
packages/common/style/var.less | 10 ++++++++++
packages/icon/index.json | 5 ++++-
packages/icon/index.less | 20 --------------------
packages/icon/index.wxml | 8 +++-----
packages/info/index.json | 3 +++
packages/info/index.less | 21 +++++++++++++++++++++
packages/info/index.ts | 8 ++++++++
packages/info/index.wxml | 7 +++++++
packages/tabbar-item/index.json | 3 ++-
packages/tabbar-item/index.less | 24 ++----------------------
packages/tabbar-item/index.wxml | 12 +++++++++---
packages/tabbar/README.md | 2 +-
19 files changed, 88 insertions(+), 75 deletions(-)
create mode 100644 packages/info/index.json
create mode 100644 packages/info/index.less
create mode 100644 packages/info/index.ts
create mode 100644 packages/info/index.wxml
diff --git a/example/pages/badge/index.wxml b/example/pages/badge/index.wxml
index 7fa324cd..efe5582b 100644
--- a/example/pages/badge/index.wxml
+++ b/example/pages/badge/index.wxml
@@ -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>
diff --git a/example/pages/tabbar/index.wxml b/example/pages/tabbar/index.wxml
index 0d7f220a..cf665aae 100644
--- a/example/pages/tabbar/index.wxml
+++ b/example/pages/tabbar/index.wxml
@@ -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" />
diff --git a/packages/badge/README.md b/packages/badge/README.md
index 953af0a7..0a23bb20 100644
--- a/packages/badge/README.md
+++ b/packages/badge/README.md
@@ -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>
```
diff --git a/packages/badge/index.json b/packages/badge/index.json
index 467ce294..bf0ebe00 100644
--- a/packages/badge/index.json
+++ b/packages/badge/index.json
@@ -1,3 +1,6 @@
{
- "component": true
+ "component": true,
+ "usingComponents": {
+ "van-info": "../info/index"
+ }
}
diff --git a/packages/badge/index.less b/packages/badge/index.less
index 7d7b233f..2b3939f4 100644
--- a/packages/badge/index.less
+++ b/packages/badge/index.less
@@ -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;
}
}
diff --git a/packages/badge/index.ts b/packages/badge/index.ts
index 2bf4168f..c8857364 100644
--- a/packages/badge/index.ts
+++ b/packages/badge/index.ts
@@ -7,7 +7,7 @@ VantComponent({
},
props: {
- info: Number,
+ info: null,
title: String
},
diff --git a/packages/badge/index.wxml b/packages/badge/index.wxml
index 3e55ca3a..425b4739 100644
--- a/packages/badge/index.wxml
+++ b/packages/badge/index.wxml
@@ -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>
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index fbec3342..81293627 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -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;
diff --git a/packages/icon/index.json b/packages/icon/index.json
index 467ce294..bf0ebe00 100644
--- a/packages/icon/index.json
+++ b/packages/icon/index.json
@@ -1,3 +1,6 @@
{
- "component": true
+ "component": true,
+ "usingComponents": {
+ "van-info": "../info/index"
+ }
}
diff --git a/packages/icon/index.less b/packages/icon/index.less
index 85de28bd..9ee115e6 100644
--- a/packages/icon/index.less
+++ b/packages/icon/index.less
@@ -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;
}
diff --git a/packages/icon/index.wxml b/packages/icon/index.wxml
index 156ab17f..0c37bcd3 100644
--- a/packages/icon/index.wxml
+++ b/packages/icon/index.wxml
@@ -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 }}"
diff --git a/packages/info/index.json b/packages/info/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/info/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/info/index.less b/packages/info/index.less
new file mode 100644
index 00000000..86d50e88
--- /dev/null
+++ b/packages/info/index.less
@@ -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%;
+}
diff --git a/packages/info/index.ts b/packages/info/index.ts
new file mode 100644
index 00000000..a90bcf73
--- /dev/null
+++ b/packages/info/index.ts
@@ -0,0 +1,8 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+ props: {
+ info: null,
+ customStyle: String
+ }
+});
diff --git a/packages/info/index.wxml b/packages/info/index.wxml
new file mode 100644
index 00000000..7deb39b0
--- /dev/null
+++ b/packages/info/index.wxml
@@ -0,0 +1,7 @@
+<view
+ wx:if="{{ info !== null }}"
+ class="custom-class van-info"
+ style="{{ customStyle }}"
+>
+ {{ info }}
+</view>
diff --git a/packages/tabbar-item/index.json b/packages/tabbar-item/index.json
index 0a336c08..16f174c5 100644
--- a/packages/tabbar-item/index.json
+++ b/packages/tabbar-item/index.json
@@ -1,6 +1,7 @@
{
"component": true,
"usingComponents": {
- "van-icon": "../icon/index"
+ "van-icon": "../icon/index",
+ "van-info": "../info/index"
}
}
diff --git a/packages/tabbar-item/index.less b/packages/tabbar-item/index.less
index 398cbc75..5aa636bc 100644
--- a/packages/tabbar-item/index.less
+++ b/packages/tabbar-item/index.less
@@ -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;
}
}
diff --git a/packages/tabbar-item/index.wxml b/packages/tabbar-item/index.wxml
index e1da8a18..6f7251f1 100644
--- a/packages/tabbar-item/index.wxml
+++ b/packages/tabbar-item/index.wxml
@@ -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 />
diff --git a/packages/tabbar/README.md b/packages/tabbar/README.md
index 75851724..1a42e1b3 100644
--- a/packages/tabbar/README.md
+++ b/packages/tabbar/README.md
@@ -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" />