[improvement] update info style (#1066)

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>

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" />

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>
 ```
 

packages/badge/index.json

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

packages/badge/index.less

@@ -36,20 +36,7 @@
     }
   }
 
-  &__info {
+  &__text {
-    position: absolute;
+    position: relative;
-    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;
   }
 }

packages/badge/index.ts

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

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>
+  <view class="van-badge__text">
+    <van-info
+      wx:if="{{ info !== null }}"
+      info="{{ info }}"
+      custom-style="right: 4px"
+    />
     {{ title }}
   </view>
+</view>

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;

packages/icon/index.json

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

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;
   }

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="{{ info }}"
-  >
+  />
-    {{ info }}
-  </view>
   <image
     wx:if="{{ utils.isSrc(name) }}"
     src="{{ name }}"

packages/info/index.json

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

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%;
+}

packages/info/index.ts

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

packages/info/index.wxml

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

packages/tabbar-item/index.json

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

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;
     }
   }
 

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 />

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" />