From af630c90c7ed36f1f46a0ad69e470a72fd659aa0 Mon Sep 17 00:00:00 2001
From: running snail <13641039885@163.com>
Date: Tue, 5 Apr 2022 11:24:07 +0800
Subject: [PATCH] refactor(ui/BottomNavigation): docs optimize & code optimize
 & add class (#394)

* perf(ui/divider): add class

* refactor(ui/BottomNavigation): code optimize

* docs: unified card level
---
 .../BottomNavigationItem.less                 |  36 ++-
 .../BottomNavigationItem.vue                  |  32 +-
 .../src/bottom-navigation-item/provide.ts     |   8 +-
 .../bottom-navigation/BottomNavigation.vue    |  28 +-
 .../__snapshots__/index.spec.js.snap          | 286 ++++++------------
 .../src/bottom-navigation/docs/en-US.md       |  48 ++-
 .../src/bottom-navigation/docs/zh-CN.md       |  49 ++-
 .../src/bottom-navigation/example/index.vue   |   2 +-
 .../src/bottom-navigation/provide.ts          |  12 +-
 packages/varlet-ui/src/card/docs/en-US.md     |   2 +-
 .../src/checkbox-group/docs/en-US.md          |  16 +-
 .../src/checkbox-group/docs/zh-CN.md          |  16 +-
 .../varlet-ui/src/index-bar/docs/en-US.md     |   8 +-
 .../varlet-ui/src/index-bar/docs/zh-CN.md     |   8 +-
 .../varlet-ui/src/radio-group/docs/en-US.md   |  18 +-
 .../varlet-ui/src/radio-group/docs/zh-CN.md   |  18 +-
 packages/varlet-ui/src/row/docs/en-US.md      |  12 +-
 packages/varlet-ui/src/row/docs/zh-CN.md      |  12 +-
 packages/varlet-ui/src/select/docs/en-US.md   |  16 +-
 packages/varlet-ui/src/select/docs/zh-CN.md   |  16 +-
 packages/varlet-ui/src/space/docs/en-US.md    |   3 +-
 packages/varlet-ui/src/steps/docs/en-US.md    |   8 +-
 packages/varlet-ui/src/steps/docs/zh-CN.md    |   8 +-
 packages/varlet-ui/src/tabs/docs/en-US.md     |  24 +-
 packages/varlet-ui/src/tabs/docs/zh-CN.md     |  24 +-
 25 files changed, 318 insertions(+), 392 deletions(-)

diff --git a/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.less b/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.less
index dd0cf273db7..0730b2b9b1b 100644
--- a/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.less
+++ b/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.less
@@ -18,22 +18,33 @@
 
 .var-bottom-navigation-item {
   height: 100%;
-  padding-top: 6px;
+  padding: 6px 12px 8px;
   position: relative;
-  flex: 1;
-  text-align: center;
+  display: inline-flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   line-height: var(--bottom-navigation-item-line-height);
   color: var(--bottom-navigation-item-inactive-color);
-  transition: margin 0.25s;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  text-decoration: none;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, margin 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    padding-top 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
   &--active {
-    background-color: var(--bottom-navigation-item-active-background-color);
-    transition: background-color 0.25s;
     color: var(--bottom-navigation-item-active-color);
+    background-color: var(--bottom-navigation-item-active-background-color);
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
-    .var-icon,
-    .var-bottom-navigation__label {
-      transform: scale(1.1);
+    .var-bottom-navigation-item__label {
+      font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);
     }
   }
 
@@ -51,18 +62,17 @@
 
   &__icon[var-bottom-navigation-item-cover] {
     font-size: var(--bottom-navigation-item-icon-size);
-    transition: transform 0.25s;
   }
 
   &__badge[var-bottom-navigation-item-cover] {
     position: absolute;
-    left: -10px;
-    transform: translate(20%, -20px);
+    left: 4px;
+    transform: translateY(-22px);
   }
 
   &__label {
     margin-top: var(--bottom-navigation-item-icon-margin-bottom);
     font-size: var(--bottom-navigation-item-font-size);
-    transition: transform 0.25s;
+    transition: font-size 0.2s ease 0.1s;
   }
 }
diff --git a/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.vue b/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.vue
index 6b5b6f83ca6..16d5d65f41d 100644
--- a/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.vue
+++ b/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.vue
@@ -1,8 +1,7 @@
 <template>
-  <div
-    class="var-bottom-navigation-item"
+  <button
+    :class="classes(n(), [active === index || active === name, n('--active')])"
     v-ripple
-    :class="`${active === index || active === name ? 'var-bottom-navigation-item--active' : ''}`"
     :style="{
       color: computeColorStyle(),
     }"
@@ -12,24 +11,18 @@
       v-if="icon && !$slots.icon"
       :name="icon"
       :namespace="namespace"
-      class="var-bottom-navigation-item__icon"
+      :class="classes(n('icon'))"
       var-bottom-navigation-item-cover
     />
     <slot name="icon" :active="active === index || active === name"></slot>
-    <var-badge
-      v-if="badge"
-      v-bind="badgeProps"
-      class="var-bottom-navigation-item__badge"
-      var-bottom-navigation-item-cover
-    />
-
-    <div class="var-bottom-navigation-item__label">
+    <var-badge v-if="badge" v-bind="badgeProps" :class="classes(n('badge'))" var-bottom-navigation-item-cover />
+    <span :class="classes(n('label'))">
       <template v-if="!$slots.default">
         {{ label }}
       </template>
       <slot></slot>
-    </div>
-  </div>
+    </span>
+  </button>
 </template>
 
 <script lang="ts">
@@ -42,6 +35,9 @@ import type { ComputedRef } from 'vue'
 import type { BadgeProps } from '../../types/badge'
 import { useBottomNavigation } from './provide'
 import type { BottomNavigationItemProvider } from './provide'
+import { createNamespace, call } from '../utils/components'
+
+const { n, classes } = createNamespace('bottom-navigation-item')
 
 const defaultBadgeProps = {
   type: 'danger',
@@ -76,9 +72,9 @@ export default defineComponent({
     const handleClick = () => {
       const active = name.value || index.value
 
-      props.onClick?.(active)
+      call(props.onClick, active)
 
-      bottomNavigation?.onToggle(active)
+      call(bottomNavigation.onToggle, active)
     }
 
     watch(
@@ -90,6 +86,8 @@ export default defineComponent({
     )
 
     return {
+      n,
+      classes,
       index,
       active,
       badge,
@@ -105,5 +103,5 @@ export default defineComponent({
 @import '../styles/common';
 @import '../icon/icon';
 @import '../ripple/ripple';
-@import './BottomNavigationItem';
+@import './bottomNavigationItem';
 </style>
diff --git a/packages/varlet-ui/src/bottom-navigation-item/provide.ts b/packages/varlet-ui/src/bottom-navigation-item/provide.ts
index 1f6b8ca1045..c00bf464ebe 100644
--- a/packages/varlet-ui/src/bottom-navigation-item/provide.ts
+++ b/packages/varlet-ui/src/bottom-navigation-item/provide.ts
@@ -1,8 +1,8 @@
 import type { ComputedRef } from 'vue'
 import { useAtParentIndex, useParent } from '../utils/components'
 import {
-  BOTTOMNAVIGATION_BIND_BOTTOMNAVIGATIONITEM_KEY,
-  BOTTOMNAVIGATION_COUNT_BOTTOMNAVIGATIONITEM_KEY,
+  BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY,
+  BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY,
   BottomNavigationProvider,
 } from '../bottom-navigation/provide'
 
@@ -13,9 +13,9 @@ export interface BottomNavigationItemProvider {
 
 export function useBottomNavigation() {
   const { parentProvider, bindParent } = useParent<BottomNavigationProvider, BottomNavigationItemProvider>(
-    BOTTOMNAVIGATION_BIND_BOTTOMNAVIGATIONITEM_KEY
+    BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY
   )
-  const { index } = useAtParentIndex(BOTTOMNAVIGATION_COUNT_BOTTOMNAVIGATIONITEM_KEY)
+  const { index } = useAtParentIndex(BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY)
 
   if (!parentProvider || !bindParent || !index) {
     throw Error('<var-bottom-navigation-item/> must in <var-bottom-navigation/>')
diff --git a/packages/varlet-ui/src/bottom-navigation/BottomNavigation.vue b/packages/varlet-ui/src/bottom-navigation/BottomNavigation.vue
index bc375a5a7d3..833d21ce755 100644
--- a/packages/varlet-ui/src/bottom-navigation/BottomNavigation.vue
+++ b/packages/varlet-ui/src/bottom-navigation/BottomNavigation.vue
@@ -1,15 +1,13 @@
 <template>
   <div
-    class="var-bottom-navigation"
+    :class="classes(n(), [fixed, n('--fixed')], [border, n('--border')])"
     ref="bottomNavigationDom"
-    :class="`${fixed ? 'var-bottom-navigation--fixed' : ''} ${border ? 'var-bottom-navigation--border' : ''}`"
     :style="`z-index:${zIndex}`"
   >
     <slot></slot>
     <div
       v-if="$slots.fab"
-      class="var-bottom-navigation__fab var-elevation--8"
-      :class="length % 2 ? 'var-bottom-navigation--fab-right' : 'var-bottom-navigation--fab-center'"
+      :class="classes(n('fab'), 'var-elevation--6', [length % 2, n('--fab-right'), n('--fab-center')])"
     >
       <slot name="fab"></slot>
     </div>
@@ -22,10 +20,14 @@ import type { Ref, ComputedRef } from 'vue'
 import { props } from './props'
 import { useBottomNavigationItems } from './provide'
 import type { BottomNavigationProvider } from './provide'
+import { createNamespace, call } from '../utils/components'
 
-const RIGHT_HALF_SPACE_CLASS = 'var-bottom-navigation-item--right-half-space'
-const LEFT_HALF_SPACE_CLASS = 'var-bottom-navigation-item--left-half-space'
-const RIGHT_SPACE_CLASS = 'var-bottom-navigation-item--right-space'
+const { n, classes } = createNamespace('bottom-navigation')
+const { n: nItem } = createNamespace('bottom-navigation-item')
+
+const RIGHT_HALF_SPACE_CLASS = nItem('--right-half-space')
+const LEFT_HALF_SPACE_CLASS = nItem('--left-half-space')
+const RIGHT_SPACE_CLASS = nItem('--right-space')
 
 export default defineComponent({
   name: 'VarBottomNavigation',
@@ -45,7 +47,7 @@ export default defineComponent({
     }
 
     const handleBeforeChange = (changedValue: number | string) => {
-      Promise.resolve(props.onBeforeChange?.(changedValue)).then((res) => {
+      Promise.resolve(call(props.onBeforeChange, changedValue)).then((res) => {
         if (res) {
           handleChange(changedValue)
         }
@@ -53,8 +55,8 @@ export default defineComponent({
     }
 
     const handleChange = (changedValue: number | string) => {
-      props['onUpdate:modelValue']?.(changedValue)
-      props.onChange?.(changedValue)
+      call(props['onUpdate:modelValue'], changedValue)
+      call(props.onChange, changedValue)
     }
 
     const { length, bindBottomNavigationItem } = useBottomNavigationItems()
@@ -93,7 +95,7 @@ export default defineComponent({
     }
 
     const getBottomNavigationItems = () => {
-      return Array.from(bottomNavigationDom.value!.querySelectorAll(`.var-bottom-navigation-item`))
+      return Array.from(bottomNavigationDom.value!.querySelectorAll(`.${nItem()}`))
     }
 
     const bottomNavigationProvider: BottomNavigationProvider = {
@@ -124,6 +126,8 @@ export default defineComponent({
     })
 
     return {
+      n,
+      classes,
       length,
       bottomNavigationDom,
     }
@@ -133,5 +137,5 @@ export default defineComponent({
 
 <style lang="less">
 @import '../styles/common';
-@import './BottomNavigation';
+@import './bottomNavigation';
 </style>
diff --git a/packages/varlet-ui/src/bottom-navigation/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/bottom-navigation/__tests__/__snapshots__/index.spec.js.snap
index c98dc67aae6..98652ffa366 100644
--- a/packages/varlet-ui/src/bottom-navigation/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/bottom-navigation/__tests__/__snapshots__/index.spec.js.snap
@@ -1,235 +1,149 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`fab button 1`] = `
-"<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\">
-  <div class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item var-bottom-navigation-item--right-space\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation__fab var-elevation--8 var-bottom-navigation--fab-right\\">
+"<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--right-space\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
+  <div class=\\"var-bottom-navigation__fab var-elevation--6 var-bottom-navigation--fab-right\\">
     <div class=\\"tab_example\\"></div>
   </div>
 </div>"
 `;
 
 exports[`test BottomNavigation relation BottomNavigationItems 1`] = `
-"<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\">
-  <div class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
+"<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
   <!--v-if-->
 </div>"
 `;
 
 exports[`test BottomNavigation relation BottomNavigationItems 2`] = `
-"<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\">
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
+"<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
   <!--v-if-->
 </div>"
 `;
 
 exports[`test bottom-navigation example 1`] = `
 "<div class=\\"app-type\\">基本使用</div>
-<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\">
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
+<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
   <!--v-if-->
 </div>
 <div class=\\"app-type\\">通过名称匹配</div>
-<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\">
-  <div class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
+<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
   <!--v-if-->
 </div>
 <div class=\\"app-type\\">徽标提示</div>
-<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\">
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
     <div class=\\"var-badge var--box\\">
       <transition-stub><span class=\\"var-bottom-navigation-item__badge var-badge__content var-badge--danger var-badge__dot var-badge__dot--right\\" var-bottom-navigation-item-cover=\\"\\"><span></span></span></transition-stub>
-    </div>
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    </div><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
     <div class=\\"var-badge var--box\\">
       <transition-stub><span class=\\"var-bottom-navigation-item__badge var-badge__content var-badge--primary\\" var-bottom-navigation-item-cover=\\"\\"><span>66</span></span></transition-stub>
-    </div>
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
+    </div><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
   <!--v-if-->
 </div>
 <div class=\\"app-type\\">自定义图标</div>
-<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\">
-  <div class=\\"var-bottom-navigation-item\\">
+<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item\\">
     <!--v-if--><img style=\\"width: 20px;\\" src=\\"https://varlet.gitee.io/varlet-ui/home_inactive.jpg\\">
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
   <!--v-if-->
 </div>
 <div class=\\"app-type\\">自定义颜色</div>
-<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\">
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
+<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
   <!--v-if-->
 </div>
 <div class=\\"app-type\\">监听切换事件</div>
-<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\">
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
+<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
   <!--v-if-->
 </div>
 <div class=\\"app-type\\">监听点击事件</div>
-<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\">
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
+<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
   <!--v-if-->
 </div>
 <div class=\\"app-type\\">悬浮按钮</div>
-<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1; margin-top: 10px;\\">
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item var-bottom-navigation-item--right-half-space\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item var-bottom-navigation-item--left-half-space\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
-    <!--v-if-->
-    <div class=\\"var-bottom-navigation-item__label\\">标签</div>
-  </div>
-  <div class=\\"var-bottom-navigation__fab var-elevation--8 var-bottom-navigation--fab-center\\">
-    <div class=\\"fab_example\\"><i class=\\"var-icon var-icon--set var-icon-plus\\" style=\\"color: rgb(255, 255, 255); transition: transform 0ms; font-size: 34px;\\"></i></div>
+<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1; margin-top: 10px;\\"><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--right-half-space\\"><i class=\\"var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--left-half-space\\"><i class=\\"var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button><button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon\\" style=\\"transition: transform 0ms;\\" var-bottom-navigation-item-cover=\\"\\"></i>
+    <!--v-if--><span class=\\"var-bottom-navigation-item__label\\">标签</span>
+  </button>
+  <div class=\\"var-bottom-navigation__fab var-elevation--6 var-bottom-navigation--fab-center\\">
+    <div class=\\"fab_example\\"><i class=\\"var-icon var-icon--set var-icon-plus\\" style=\\"color: rgb(255, 255, 255); transition: transform 0ms; font-size: 24px;\\"></i></div>
   </div>
 </div>"
 `;
diff --git a/packages/varlet-ui/src/bottom-navigation/docs/en-US.md b/packages/varlet-ui/src/bottom-navigation/docs/en-US.md
index fbb53e1b052..61fbb7f1e19 100644
--- a/packages/varlet-ui/src/bottom-navigation/docs/en-US.md
+++ b/packages/varlet-ui/src/bottom-navigation/docs/en-US.md
@@ -6,9 +6,9 @@
 import { createApp } from 'vue'
 import { BottomNavigation, BottomNavigationItem } from '@varlet/ui'
 
-const app = createApp();
-app.use(BottomNavigation);
-app.use(BottomNavigationItem);
+const app = createApp()
+app.use(BottomNavigation)
+app.use(BottomNavigationItem)
 ```
 
 ### Basic Usage
@@ -89,8 +89,8 @@ export default {
 ```html
 <var-bottom-navigation v-model="active">
   <var-bottom-navigation-item name="home" label="label">
-    <template #icon="props">
-      <img style="width: 20px" :src="props.active ? homeIcon.active : homeIcon.inactive" />
+    <template #icon="{ active }">
+      <img style="width: 20px" :src="active ? homeIcon.active : homeIcon.inactive" />
     </template>
   </var-bottom-navigation-item>
   <var-bottom-navigation-item label="label" icon="magnify" />
@@ -106,8 +106,8 @@ export default {
   setup() {
     const active = ref(0)
     const homeIcon = {
-      active: 'https://cdn.jsdelivr.net/npm/@vant/assets/user-active.png',
-      inactive: 'https://cdn.jsdelivr.net/npm/@vant/assets/user-inactive.png'
+      active: 'https://varlet.gitee.io/varlet-ui/home_active.jpg',
+      inactive: 'https://varlet.gitee.io/varlet-ui/home_inactive.jpg',
     }
 
     return { active, homeIcon }
@@ -157,7 +157,7 @@ import Snackbar from '../../snackbar'
 export default {
   setup() {
     const active = ref(0)
-    function handleChange(active) {
+    const handleChange = (active) => {
       Snackbar.info(`changed to ${active}`)
     }
 
@@ -184,7 +184,7 @@ import Snackbar from '../../snackbar'
 export default {
   setup() {
     const active = ref(0)
-    function handleClick(active) {
+    const handleClick = (active) => {
       Snackbar.success(`clicked ${active}`)
     }
 
@@ -199,30 +199,29 @@ export default {
 <var-bottom-navigation v-model="fab" style="margin-top: 10px">
   <template #fab>
     <div class="fab_example">
-      <var-icon name="plus" color="#fff" size="34" />
+      <var-icon name="plus" color="#fff" size="24" />
     </div>
   </template>
-  <var-bottom-navigation-item :label="pack.label" icon="home" />
-  <var-bottom-navigation-item :label="pack.label" icon="magnify" />
-  <var-bottom-navigation-item :label="pack.label" icon="heart" />
-  <var-bottom-navigation-item :label="pack.label" icon="account-circle" />
+  <var-bottom-navigation-item label="label" icon="home" />
+  <var-bottom-navigation-item label="label" icon="magnify" />
+  <var-bottom-navigation-item label="label" icon="heart" />
+  <var-bottom-navigation-item label="label" icon="account-circle" />
 </var-bottom-navigation>
 ```
 
 ```js
 import { ref } from 'vue'
-import VarIcon from '../../icon'
 
 export default {
   components:{VarIcon},
   setup() {
     const active = ref(0)
+
     return { active }
   }
 }
 ```
 ```css
-<style lang="less" scoped>
 .fab_example {
   width: 100%;
   height: 100%;
@@ -231,14 +230,13 @@ export default {
   justify-content: center;
   background-color: var(--color-primary);
 }
-</style>
 ```
 
 ## API
 
 ### Props
 
-### BottomNavigation Props
+#### BottomNavigation Props
 
 |Prop | Description | Type | Default |
 | ---- | ---- | ---- | ---- |
@@ -249,7 +247,7 @@ export default {
 | `active-color` | Color of active tab item | _string_ | `-` |
 | `inactive-color` | Color of inactive tab item | _string_ | `-` |
 
-### BottomNavigationItem Props
+#### BottomNavigationItem Props
 
 |Prop | Description | Type | Default |
 | ---- | ---- | ---- | ---- |
@@ -261,14 +259,14 @@ export default {
 
 ### Events
 
-### BottomNavigation Events
+#### BottomNavigation Events
 
 |Event | Description | Arguments |
 | ---- | ---- | ---- |
 | `before-change` | The callback function before switching labels, which returns false to prevent switching, supports the return of promise | `active: number \| string` |
 | `change` | Triggered when switching labels | `active: number \| string` |
 
-### BottomNavigationItem Events
+#### BottomNavigationItem Events
 
 |Event | Description | Arguments |
 | ---- | ---- | ---- |
@@ -276,12 +274,12 @@ export default {
 
 ### Slots
 
-### BottomNavigation Slots
+#### BottomNavigation Slots
 
 | Slot | Description | Arguments |
 | ---- | ---- | ----|
 | `fab` | Support for inserting a custom Fab button in the center of the component | `-` |
-### BottomNavigationItem Slots
+#### BottomNavigationItem Slots
 
 | Slot | Description | Arguments |
 | ---- | ---- | ----|
@@ -291,7 +289,7 @@ export default {
 ### Style Variables
 Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)
 
-### BottomNavigation Variables
+#### BottomNavigation Variables
 
 | Variable | Default |
 | --- | --- |
@@ -300,7 +298,7 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--bottom-navigation-background-color` | `#fff` |
 | `--bottom-navigation-border-color` | `#bcc2cb` |
 
-### BottomNavigationItem Variables
+#### BottomNavigationItem Variables
 
 | Variable | Default |
 | --- | --- |
diff --git a/packages/varlet-ui/src/bottom-navigation/docs/zh-CN.md b/packages/varlet-ui/src/bottom-navigation/docs/zh-CN.md
index c2228565c00..3c08f2c3782 100644
--- a/packages/varlet-ui/src/bottom-navigation/docs/zh-CN.md
+++ b/packages/varlet-ui/src/bottom-navigation/docs/zh-CN.md
@@ -6,9 +6,9 @@
 import { createApp } from 'vue'
 import { BottomNavigation, BottomNavigationItem } from '@varlet/ui'
 
-const app = createApp();
-app.use(BottomNavigation);
-app.use(BottomNavigationItem);
+const app = createApp()
+app.use(BottomNavigation)
+app.use(BottomNavigationItem)
 ```
 
 ### 基础用法
@@ -89,8 +89,8 @@ export default {
 ```html
 <var-bottom-navigation v-model="active">
   <var-bottom-navigation-item name="home" label="标签">
-    <template #icon="props">
-      <img style="width: 20px" :src="props.active ? homeIcon.active : homeIcon.inactive" />
+    <template #icon="{ active }">
+      <img style="width: 20px" :src="active ? homeIcon.active : homeIcon.inactive" />
     </template>
   </var-bottom-navigation-item>
   <var-bottom-navigation-item label="标签" icon="magnify" />
@@ -106,8 +106,8 @@ export default {
   setup() {
     const active = ref(0)
     const homeIcon = {
-      active: 'https://cdn.jsdelivr.net/npm/@vant/assets/user-active.png',
-      inactive: 'https://cdn.jsdelivr.net/npm/@vant/assets/user-inactive.png'
+      active: 'https://varlet.gitee.io/varlet-ui/home_active.jpg',
+      inactive: 'https://varlet.gitee.io/varlet-ui/home_inactive.jpg',
     }
 
     return { active, homeIcon }
@@ -157,7 +157,7 @@ import Snackbar from '../../snackbar'
 export default {
   setup() {
     const active = ref(0)
-    function handleChange(active) {
+    const handleChange = (active) => {
       Snackbar.info(`changed to ${active}`)
     }
 
@@ -184,7 +184,7 @@ import Snackbar from '../../snackbar'
 export default {
   setup() {
     const active = ref(0)
-    function handleClick(active) {
+    const handleClick = (active) => {
       Snackbar.success(`clicked ${active}`)
     }
 
@@ -199,30 +199,28 @@ export default {
 <var-bottom-navigation v-model="fab" style="margin-top: 10px">
   <template #fab>
     <div class="fab_example">
-      <var-icon name="plus" color="#fff" size="34" />
+      <var-icon name="plus" color="#fff" size="24" />
     </div>
   </template>
-  <var-bottom-navigation-item :label="pack.label" icon="home" />
-  <var-bottom-navigation-item :label="pack.label" icon="magnify" />
-  <var-bottom-navigation-item :label="pack.label" icon="heart" />
-  <var-bottom-navigation-item :label="pack.label" icon="account-circle" />
+  <var-bottom-navigation-item label="标签" icon="home" />
+  <var-bottom-navigation-item label="标签" icon="magnify" />
+  <var-bottom-navigation-item label="标签" icon="heart" />
+  <var-bottom-navigation-item label="标签" icon="account-circle" />
 </var-bottom-navigation>
 ```
 
 ```js
 import { ref } from 'vue'
-import VarIcon from '../../icon'
 
 export default {
-  components:{VarIcon},
   setup() {
     const active = ref(0)
+
     return { active }
   }
 }
 ```
 ```css
-<style lang="less" scoped>
 .fab_example {
   width: 100%;
   height: 100%;
@@ -231,14 +229,13 @@ export default {
   justify-content: center;
   background-color: var(--color-primary);
 }
-</style>
 ```
 
 ## API
 
 ### 属性
 
-### BottomNavigation Props
+#### BottomNavigation Props
 
 |参数 | 说明 | 类型 | 默认值 |
 | ---- | ---- | ---- | ---- |
@@ -250,7 +247,7 @@ export default {
 | `inactive-color` | 未选中标签的颜色 | _string_ | `-` |
 
 
-### BottomNavigationItem Props
+#### BottomNavigationItem Props
 
 |参数 | 说明 | 类型 | 默认值 |
 | ---- | ---- | ---- | ---- |
@@ -263,14 +260,14 @@ export default {
 
 ### 事件
 
-### BottomNavigation Events
+#### BottomNavigation Events
 
 |事件名 | 说明 | 回调参数 |
 | ---- | ---- | ---- |
 | `before-change` | 切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise | `active: number \| string` |
 | `change` | 切换标签时触发 | `active: number \| string` |
 
-### BottomNavigationItem Events
+#### BottomNavigationItem Events
 
 |事件名 | 说明 | 回调参数 |
 | ---- | ---- | ---- |
@@ -278,13 +275,13 @@ export default {
 
 ### 插槽
 
-### BottomNavigation Slots
+#### BottomNavigation Slots
 
 | 名称 | 说明 | 参数 |
 | ---- | ---- | ----|
 | `fab` | 支持在组件中心插入一个自定义的 fab 按钮 | `-` |
 
-### BottomNavigationItem Slots
+#### BottomNavigationItem Slots
 
 | 名称 | 说明 | 参数 |
 | ---- | ---- | ----|
@@ -294,7 +291,7 @@ export default {
 ### 样式变量
 以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制
 
-### BottomNavigation Variables
+#### BottomNavigation Variables
 
 | 变量名 | 默认值 |
 | --- | --- |
@@ -303,7 +300,7 @@ export default {
 | `--bottom-navigation-background-color` | `#fff` |
 | `--bottom-navigation-border-color` | `#bcc2cb` |
 
-### BottomNavigationItem Variables
+#### BottomNavigationItem Variables
 
 | 变量名 | 默认值 |
 | --- | --- |
diff --git a/packages/varlet-ui/src/bottom-navigation/example/index.vue b/packages/varlet-ui/src/bottom-navigation/example/index.vue
index 0541c21d444..161d81a1a3c 100644
--- a/packages/varlet-ui/src/bottom-navigation/example/index.vue
+++ b/packages/varlet-ui/src/bottom-navigation/example/index.vue
@@ -63,7 +63,7 @@
   <var-bottom-navigation v-model="fab" style="margin-top: 10px">
     <template #fab>
       <div class="fab_example">
-        <var-icon name="plus" color="#fff" size="34" />
+        <var-icon name="plus" color="#fff" size="24" />
       </div>
     </template>
     <var-bottom-navigation-item :label="pack.label" icon="home" />
diff --git a/packages/varlet-ui/src/bottom-navigation/provide.ts b/packages/varlet-ui/src/bottom-navigation/provide.ts
index 2374694fc3e..f38bda15e3c 100644
--- a/packages/varlet-ui/src/bottom-navigation/provide.ts
+++ b/packages/varlet-ui/src/bottom-navigation/provide.ts
@@ -9,14 +9,18 @@ export interface BottomNavigationProvider {
   onToggle(value: number | string): void
 }
 
-export const BOTTOMNAVIGATION_BIND_BOTTOMNAVIGATIONITEM_KEY = Symbol('BOTTOMNAVIGATION_BIND_BOTTOMNAVIGATIONITEM_KEY')
-export const BOTTOMNAVIGATION_COUNT_BOTTOMNAVIGATIONITEM_KEY = Symbol('BOTTOMNAVIGATION_COUNT_BOTTOMNAVIGATIONITEM_KEY')
+export const BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY = Symbol(
+  'BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY'
+)
+export const BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY = Symbol(
+  'BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY'
+)
 
 export function useBottomNavigationItems() {
   const { childProviders, bindChildren } = useChildren<BottomNavigationProvider, BottomNavigationItemProvider>(
-    BOTTOMNAVIGATION_BIND_BOTTOMNAVIGATIONITEM_KEY
+    BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY
   )
-  const { length } = useAtChildrenCounter(BOTTOMNAVIGATION_COUNT_BOTTOMNAVIGATIONITEM_KEY)
+  const { length } = useAtChildrenCounter(BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY)
 
   return {
     length,
diff --git a/packages/varlet-ui/src/card/docs/en-US.md b/packages/varlet-ui/src/card/docs/en-US.md
index bdd23fc39d1..6494762bf33 100644
--- a/packages/varlet-ui/src/card/docs/en-US.md
+++ b/packages/varlet-ui/src/card/docs/en-US.md
@@ -63,7 +63,7 @@ createApp().use(Card)
 
 ## API
 
-### 属性
+### Props
 
 | Prop          | Description                                                     | Type               | Default |
 | ------------- | --------------------------------------------------------------- | ------------------ | ------- |
diff --git a/packages/varlet-ui/src/checkbox-group/docs/en-US.md b/packages/varlet-ui/src/checkbox-group/docs/en-US.md
index 9b94a2acff8..2419aeb0638 100644
--- a/packages/varlet-ui/src/checkbox-group/docs/en-US.md
+++ b/packages/varlet-ui/src/checkbox-group/docs/en-US.md
@@ -144,7 +144,7 @@ export default {
 
 ### Props
 
-### CheckboxGroup Props
+#### CheckboxGroup Props
 
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -153,7 +153,7 @@ export default {
 | `direction` | The layout direction，Optional value is `horizontal` `vertical` | _string \| number_ | `horizontal` |
 | `rules` | The validation rules，Returns `true` to indicate that the validation passed，The remaining values are converted to text as user prompts | _Array<(value: any[]) => any>_ | `horizontal` |
 
-### Checkbox Props
+#### Checkbox Props
 
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -170,7 +170,7 @@ export default {
 
 ### Methods
 
-### CheckboxGroup Methods
+#### CheckboxGroup Methods
 
 | Method | Description | Arguments | Return |
 | --- | --- | --- | --- |
@@ -180,7 +180,7 @@ export default {
 | `checkAll` | Check all | `-` | `value: any` |
 | `inverseAll` | Inverse all | `-` | `value: any` |
 
-### Checkbox Methods
+#### Checkbox Methods
 
 | Method | Description | Arguments | Return |
 | --- | --- | --- | --- |
@@ -191,13 +191,13 @@ export default {
 
 ### Events
 
-### CheckboxGroup Events
+#### CheckboxGroup Events
 
 | Event | Description | Arguments |
 | --- | --- | --- |
 | `change` | Trigger on change | `value: any[]` |
 
-### Checkbox Events
+#### Checkbox Events
 
 | Event | Description | Arguments |
 | --- | --- | --- |
@@ -206,13 +206,13 @@ export default {
 
 ### Slots
 
-### CheckboxGroup Slots
+#### CheckboxGroup Slots
 
 | Slot | Description | Arguments |
 | --- | --- | --- |
 | `default` | Checkbox group content | `-` |
 
-### Checkbox Slots
+#### Checkbox Slots
 
 | Slot | Description | Arguments |
 | --- | --- | --- |
diff --git a/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md b/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md
index 7553005fa95..9e0527f2d58 100644
--- a/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md
+++ b/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md
@@ -144,7 +144,7 @@ export default {
 
 ### 属性
 
-### CheckboxGroup Props
+#### CheckboxGroup Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -153,7 +153,7 @@ export default {
 | `direction` | 布局方向，可选值为 `horizontal` `vertical` | _string \| number_ | `horizontal` |
 | `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(value: any[]) => any>_ | `horizontal` |
 
-### Checkbox Props
+#### Checkbox Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -170,7 +170,7 @@ export default {
 
 ### 方法
 
-### CheckboxGroup Methods
+#### CheckboxGroup Methods
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -180,7 +180,7 @@ export default {
 | `checkAll` | 全选 | `-` | `value: any` |
 | `inverseAll` | 反选 | `-` | `value: any` |
 
-### Checkbox Methods
+#### Checkbox Methods
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -191,13 +191,13 @@ export default {
 
 ### 事件
 
-### CheckboxGroup Events
+#### CheckboxGroup Events
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
 | `change` | 变更时触发 | `value: any[]` |
 
-### Checkbox Events
+#### Checkbox Events
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
@@ -206,13 +206,13 @@ export default {
 
 ### 插槽
 
-### CheckboxGroup Slots
+#### CheckboxGroup Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
 | `default` | 复选框组的内容 | `-` |
 
-### Checkbox Slots
+#### Checkbox Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
diff --git a/packages/varlet-ui/src/index-bar/docs/en-US.md b/packages/varlet-ui/src/index-bar/docs/en-US.md
index dd241203875..1785cab7adb 100644
--- a/packages/varlet-ui/src/index-bar/docs/en-US.md
+++ b/packages/varlet-ui/src/index-bar/docs/en-US.md
@@ -65,7 +65,7 @@ export default {
 
 ### Props
 
-### IndexBar Props
+#### IndexBar Props
 
 | Prop | Description | Type | Default |
 | ----- | -------------- | -------- | ---------- |
@@ -77,7 +77,7 @@ export default {
 | `highlight-color` | Index character highlight color | _string_ | `#ee0a24` |
 | `duration` | Animation duration | _string \| number_ | `0` |
 
-### IndexAnchor Props
+#### IndexAnchor Props
 
 | Prop | Description | Type | Default |
 | ----- | -------------- | -------- | ---------- |
@@ -85,7 +85,7 @@ export default {
 
 ### Events
 
-### IndexBar Events
+#### IndexBar Events
 
 | Event | Description | arguments |
 | ----- | -------------- | -------- |
@@ -94,7 +94,7 @@ export default {
 
 ### Slots
 
-### IndexAnchor Slots
+#### IndexAnchor Slots
 
 | Name | Description | SlotProps |
 | --- | --- | --- |
diff --git a/packages/varlet-ui/src/index-bar/docs/zh-CN.md b/packages/varlet-ui/src/index-bar/docs/zh-CN.md
index cad929b8499..2370fc09977 100644
--- a/packages/varlet-ui/src/index-bar/docs/zh-CN.md
+++ b/packages/varlet-ui/src/index-bar/docs/zh-CN.md
@@ -65,7 +65,7 @@ export default {
 
 ### 属性
 
-### IndexBar Props
+#### IndexBar Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | ----- | -------------- | -------- | ---------- |
@@ -77,7 +77,7 @@ export default {
 | `highlight-color` | 索引字符高亮颜色 | _string_ | `#ee0a24` |
 | `duration` | 动画持续时间 | _string \| number_ | `0` |
 
-### IndexAnchor Props
+#### IndexAnchor Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | ----- | -------------- | -------- | ---------- |
@@ -85,7 +85,7 @@ export default {
 
 ### 事件
 
-### IndexBar Events
+#### IndexBar Events
 
 | 事件名 | 说明 | 回调参数 |
 | ----- | -------------- | -------- |
@@ -94,7 +94,7 @@ export default {
 
 ### 插槽
 
-### IndexAnchor Slots
+#### IndexAnchor Slots
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
diff --git a/packages/varlet-ui/src/radio-group/docs/en-US.md b/packages/varlet-ui/src/radio-group/docs/en-US.md
index 842312c8d1a..48df5d063ed 100644
--- a/packages/varlet-ui/src/radio-group/docs/en-US.md
+++ b/packages/varlet-ui/src/radio-group/docs/en-US.md
@@ -141,7 +141,7 @@ export default {
 
 ### Props
 
-### RadioGroup Props
+#### RadioGroup Props
 
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -149,7 +149,7 @@ export default {
 | `direction` | The layout direction，Optional value is `horizontal` `vertical` | _string_ | `horizontal` |
 | `rules` | The validation rules，Returns `true` to indicate that the validation passed，The remaining values are converted to text as user prompts | _Array<(value: any) => any>_ | `-` |
 
-### Radio Props
+#### Radio Props
 
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -166,7 +166,7 @@ export default {
 
 ### Methods
 
-### RadioGroup Methods
+#### RadioGroup Methods
 
 | Method | Description | Arguments | Return |
 | --- | --- | --- | --- |
@@ -174,7 +174,7 @@ export default {
 | `resetValidation` | Clearing validate messages | `-` | `-` |
 | `reset` | Clear the value of the binding(set to `undefined`) and validate messages | `-` | `-` |
 
-### Radio Methods
+#### Radio Methods
 
 | Method | Description | Arguments | Return |
 | --- | --- | --- | --- |
@@ -185,13 +185,13 @@ export default {
 
 ### Events
 
-### RadioGroup Events
+#### RadioGroup Events
 
 | Event | Description | Arguments |
 | --- | --- | --- |
 | `change` | Trigger on change | `value: any` |
 
-### Radio Events
+#### Radio Events
 
 | Event | Description | Arguments |
 | --- | --- | --- |
@@ -200,13 +200,13 @@ export default {
 
 ### Slots
 
-### RadioGroup Slots
+#### RadioGroup Slots
 
 | Slot | Description | Arguments |
 | --- | --- | --- |
 | `default` | Radio group content | `-` |
 
-### Radio Slots
+#### Radio Slots
 
 | Slot | Description | Arguments |
 | --- | --- | --- |
@@ -217,7 +217,7 @@ export default {
 ### Style Variables
 Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)
 
-### Radio Variables
+#### Radio Variables
 
 | Variable | Default |
 | --- | --- |
diff --git a/packages/varlet-ui/src/radio-group/docs/zh-CN.md b/packages/varlet-ui/src/radio-group/docs/zh-CN.md
index 3733fafb2ef..61276e0d201 100644
--- a/packages/varlet-ui/src/radio-group/docs/zh-CN.md
+++ b/packages/varlet-ui/src/radio-group/docs/zh-CN.md
@@ -141,7 +141,7 @@ export default {
 
 ### 属性
 
-### RadioGroup Props
+#### RadioGroup Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -149,7 +149,7 @@ export default {
 | `direction` | 布局方向，可选值为 `horizontal` `vertical` | _string_ | `horizontal` |
 | `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(value: any) => any>_ | `-` |
 
-### Radio Props
+#### Radio Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -166,7 +166,7 @@ export default {
 
 ### 方法
 
-### RadioGroup Methods
+#### RadioGroup Methods
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -174,7 +174,7 @@ export default {
 | `resetValidation` | 清空校验信息 | `-` | `-` |
 | `reset` | 清空绑定的值(设置为 `undefined`)和校验信息 | `-` | `-` |
 
-### Radio Methods
+#### Radio Methods
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -185,13 +185,13 @@ export default {
 
 ### 事件
 
-### RadioGroup Events
+#### RadioGroup Events
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
 | `change` | 变更时触发 | `value: any` |
 
-### Radio Events
+#### Radio Events
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
@@ -200,13 +200,13 @@ export default {
 
 ### 插槽
 
-### RadioGroup Slots
+#### RadioGroup Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
 | `default` | 单选框组的内容 | `-` |
 
-### Radio Slots
+#### Radio Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
@@ -217,7 +217,7 @@ export default {
 ### 样式变量
 以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制
 
-### Radio Variables
+#### Radio Variables
 
 | 变量名 | 默认值 |
 | --- | --- |
diff --git a/packages/varlet-ui/src/row/docs/en-US.md b/packages/varlet-ui/src/row/docs/en-US.md
index 5ded16806c4..7b17a8af6f8 100644
--- a/packages/varlet-ui/src/row/docs/en-US.md
+++ b/packages/varlet-ui/src/row/docs/en-US.md
@@ -157,7 +157,7 @@ import ObjectExample from '../example/ResponsiveObject.vue'
 
 ### Props
 
-### Row Props
+#### Row Props
 
 | Prop      | Description                                                                                          | Type               | Default      |
 | --------- | ---------------------------------------------------------------------------------------------------- | ------------------ | ------------ |
@@ -165,7 +165,7 @@ import ObjectExample from '../example/ResponsiveObject.vue'
 | `justify` | Spindle alignment, optional value is `flex-start` `flex-end` `center` `space-between` `space-around` | _string_           | `flex-start` |
 | `align`   | Cross axis alignment, optional value is `flex-start` `flex-end` `center`                             | _string_           | `flex-start` |
 
-### Col Props
+#### Col Props
 
 | Prop     | Description                                         | Type     | Default |
 |----------| --------------------------------------------------- |----------| ------- |
@@ -179,13 +179,13 @@ import ObjectExample from '../example/ResponsiveObject.vue'
 
 ### Events
 
-### Row Events
+#### Row Events
 
 | Event   | Description                  | Arguments      |
 | ------- | ---------------------------- | -------------- |
 | `click` | Triggered when you click Row | `event: Event` |
 
-### Col Events
+#### Col Events
 
 | Event   | Description                  | Arguments      |
 | ------- | ---------------------------- | -------------- |
@@ -193,13 +193,13 @@ import ObjectExample from '../example/ResponsiveObject.vue'
 
 ### Slots
 
-### Row Slots
+#### Row Slots
 
 | Slot      | Description | Arguments |
 | --------- | ----------- | --------- |
 | `default` | Row content | `-`       |
 
-### Col Slots
+#### Col Slots
 
 | Slot      | Description | Arguments |
 | --------- | ----------- | --------- |
diff --git a/packages/varlet-ui/src/row/docs/zh-CN.md b/packages/varlet-ui/src/row/docs/zh-CN.md
index c0a8dd3230c..dc4ab010fc4 100644
--- a/packages/varlet-ui/src/row/docs/zh-CN.md
+++ b/packages/varlet-ui/src/row/docs/zh-CN.md
@@ -150,7 +150,7 @@ import ObjectExample from '../example/ResponsiveObject.vue'
 
 ### 属性
 
-### Row Props
+#### Row Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -158,7 +158,7 @@ import ObjectExample from '../example/ResponsiveObject.vue'
 | `justify` | 主轴对齐方式, 可选值为 `flex-start` `flex-end` `center` `space-between` `space-around` | _string_ | `flex-start` |
 | `align` | 交叉轴对齐方式, 可选值为 `flex-start` `flex-end` `center` | _string_ | `flex-start` |
 
-### Col Props
+#### Col Props
 
 | 参数       | 说明                       | 类型       | 默认值     |
 |----------|--------------------------|----------|---------|
@@ -172,13 +172,13 @@ import ObjectExample from '../example/ResponsiveObject.vue'
 
 ### 事件
 
-### Row Events
+#### Row Events
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
 | `click` | 点击 Row 时触发 | `event: Event` |
 
-### Col Events
+#### Col Events
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
@@ -186,13 +186,13 @@ import ObjectExample from '../example/ResponsiveObject.vue'
 
 ### 插槽
 
-### Row Slots
+#### Row Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
 | `default` | Row 内容 | `-` |
 
-### Col Slots
+#### Col Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
diff --git a/packages/varlet-ui/src/select/docs/en-US.md b/packages/varlet-ui/src/select/docs/en-US.md
index 2a047bb022a..e2ece764188 100644
--- a/packages/varlet-ui/src/select/docs/en-US.md
+++ b/packages/varlet-ui/src/select/docs/en-US.md
@@ -208,7 +208,7 @@ export default {
 
 ### Props
 
-### Select Props
+#### Select Props
 
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -228,7 +228,7 @@ export default {
 | `validate-trigger` | Timing to trigger validation， Optional value is `onFocus` `onBlur` `onChange` `onClick` `onClear` `onClose` | _ValidateTriggers[]_ | `['onChange', 'onClear', 'onClose']` |
 | `rules` | The validation rules，Returns `true` to indicate that the validation passed，The remaining values are converted to text as user prompts | _Array<(v: any \| any[]) => any>_ | `-` |
 
-### Option Props
+#### Option Props
 
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -237,7 +237,7 @@ export default {
 
 ### Methods
 
-### Select Methods
+#### Select Methods
 
 | Method | Description | Arguments | Return |
 | --- | --- | --- | --- |
@@ -249,7 +249,7 @@ export default {
 
 ### Events
 
-### Select Events
+#### Select Events
 
 | Event | Description | Arguments |
 | --- | --- | --- |
@@ -262,14 +262,14 @@ export default {
 
 ### Slots
 
-### Select Slots
+#### Select Slots
 
 | Slot | Description | Arguments |
 | --- | --- | --- |
 | `prepend-icon` | Prepend icon | `-` |
 | `append-icon` | Append icon | `-` |
 
-### Option Slots
+#### Option Slots
 
 | Slot | Description | Arguments |
 | --- | --- | --- |
@@ -278,7 +278,7 @@ export default {
 ### Style Variables
 Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)
 
-### Select Variables
+#### Select Variables
 
 | Variable | Default |
 | --- | --- |
@@ -300,7 +300,7 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--select-arrow-size` | `20px` |
 | `--select-disabled-color` | `var(--color-text-disabled)` |
 
-### Option Variables
+#### Option Variables
 
 | Variable | Default |
 | --- | --- |
diff --git a/packages/varlet-ui/src/select/docs/zh-CN.md b/packages/varlet-ui/src/select/docs/zh-CN.md
index 913e31fb74a..0f85142c42e 100644
--- a/packages/varlet-ui/src/select/docs/zh-CN.md
+++ b/packages/varlet-ui/src/select/docs/zh-CN.md
@@ -205,7 +205,7 @@ export default {
 
 ### 属性
 
-### Select Props
+#### Select Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -225,7 +225,7 @@ export default {
 | `validate-trigger` | 触发验证的时机，可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onClose` | _ValidateTriggers[]_ | `['onChange', 'onClear', 'onClose']` |
 | `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(v: any \| any[]) => any>_ | `-` |
 
-### Option Props
+#### Option Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -234,7 +234,7 @@ export default {
 
 ### 方法
 
-### Select Methods
+#### Select Methods
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -246,7 +246,7 @@ export default {
 
 ### 事件
 
-### Select Events
+#### Select Events
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
@@ -259,14 +259,14 @@ export default {
 
 ### 插槽
 
-### Select Slots
+#### Select Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
 | `prepend-icon` | 前置图标 | `-` |
 | `append-icon` | 后置图标 | `-` |
 
-### Option Slots
+#### Option Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
@@ -275,7 +275,7 @@ export default {
 ### 样式变量
 以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制
 
-### Select Variables
+#### Select Variables
 
 | 变量名 | 默认值 |
 | --- | --- |
@@ -297,7 +297,7 @@ export default {
 | `--select-arrow-size` | `20px` |
 | `--select-disabled-color` | `var(--color-text-disabled)` |
 
-### Option Variables
+#### Option Variables
 
 | 变量名 | 默认值 |
 | --- | --- |
diff --git a/packages/varlet-ui/src/space/docs/en-US.md b/packages/varlet-ui/src/space/docs/en-US.md
index 378bce07a09..2d654d5dd4f 100644
--- a/packages/varlet-ui/src/space/docs/en-US.md
+++ b/packages/varlet-ui/src/space/docs/en-US.md
@@ -1,4 +1,4 @@
-# Space 
+# Space
 
 ### Intro
 
@@ -86,6 +86,7 @@ createApp().use(Space)
 
 ## API
 
+### Props
 
 |     Prop      |      Description     |     Type   |    Default  |
 | ------------- | ------------ | --------- | --------- |
diff --git a/packages/varlet-ui/src/steps/docs/en-US.md b/packages/varlet-ui/src/steps/docs/en-US.md
index 09f92216175..00037d592d5 100644
--- a/packages/varlet-ui/src/steps/docs/en-US.md
+++ b/packages/varlet-ui/src/steps/docs/en-US.md
@@ -86,7 +86,7 @@ Change the display direction of the step bar through the `direction` attribute.
 
 ### Props
 
-### Steps Props
+#### Steps Props
 
 | Prop | Description | Type | Default |
 | ----- | -------------- | -------- | ---------- |
@@ -95,7 +95,7 @@ Change the display direction of the step bar through the `direction` attribute.
 | `active-color` | Active step color | _string_ | `#2979ff` |
 | `inactive-color` | Inactive step color | _string_ | `#9e9e9e` |
 
-### Step Props
+#### Step Props
 
 | Prop | Description | Type | Default |
 | ----- | -------------- | -------- | ---------- |
@@ -105,7 +105,7 @@ Change the display direction of the step bar through the `direction` attribute.
 
 ### Events
 
-### Steps Events
+#### Steps Events
 
 | Event | Description | arguments |
 | ----- | -------------- | -------- |
@@ -113,7 +113,7 @@ Change the display direction of the step bar through the `direction` attribute.
 
 ### Slots
 
-### Step Slots
+#### Step Slots
 
 | Name | Description | SlotProps |
 | ----- | -------------- | -------- |
diff --git a/packages/varlet-ui/src/steps/docs/zh-CN.md b/packages/varlet-ui/src/steps/docs/zh-CN.md
index 41f8165e41c..a6ef225a664 100644
--- a/packages/varlet-ui/src/steps/docs/zh-CN.md
+++ b/packages/varlet-ui/src/steps/docs/zh-CN.md
@@ -86,7 +86,7 @@ export default {
 
 ### 属性
 
-### Steps Props
+#### Steps Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | ----- | -------------- | -------- | ---------- |
@@ -95,7 +95,7 @@ export default {
 | `active-color` | 激活状态颜色 | _string_ | `#2979ff` |
 | `inactive-color` | 未激活状态颜色 | _string_ | `#9e9e9e` |
 
-### Step Props
+#### Step Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | ----- | -------------- | -------- | ---------- |
@@ -105,7 +105,7 @@ export default {
 
 ### 事件
 
-### Steps Events
+#### Steps Events
 
 | 事件名 | 说明 | 回调参数 |
 | ----- | -------------- | -------- |
@@ -113,7 +113,7 @@ export default {
 
 ### 插槽
 
-### Step Slots
+#### Step Slots
 
 | 名称 | 说明 | 参数 |
 | ----- | -------------- | -------- |
diff --git a/packages/varlet-ui/src/tabs/docs/en-US.md b/packages/varlet-ui/src/tabs/docs/en-US.md
index e5f06eff982..ae54a990e8b 100644
--- a/packages/varlet-ui/src/tabs/docs/en-US.md
+++ b/packages/varlet-ui/src/tabs/docs/en-US.md
@@ -238,7 +238,7 @@ Click the Tab to scroll automatically to the center of the viewport.
 
 ### Props
 
-### Tabs Props
+#### Tabs Props
 
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -256,14 +256,14 @@ Click the Tab to scroll automatically to the center of the viewport.
 | `sticky` | Whether to enable sticky layouts | _boolean_ | `false` |
 | `offset-top` | Distance offset top | _string \| number_ | `0` |
 
-### Tab Props
+#### Tab Props
 
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
 | `name` | tab's name | _string \| number_ | `index` |
 | `disabled` | Whether to disable tab | _boolean_ | `false` |
 
-### TabsItems Props
+#### TabsItems Props
 
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -271,7 +271,7 @@ Click the Tab to scroll automatically to the center of the viewport.
 | `can-swipe` | Whether to allow swipe switch | _boolean_ | `true` |
 | `loop` | Whether to allow cycle switching | _boolean_ | `false` |
 
-### TabItem Props
+#### TabItem Props
 
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -285,14 +285,14 @@ Click the Tab to scroll automatically to the center of the viewport.
 
 ### Events
 
-### Tabs Events
+#### Tabs Events
 
 | Event | Description | Arguments |
 | --- | --- | --- |
 | `click` | Triggered when the tab is clicked, but not when the tab `disabled` status is `true` | `active: string \| number` |
 | `change` | Triggered when switching tab | `active: string \| number` |
 
-### Tab Events
+#### Tab Events
 
 | Event | Description | Arguments |
 | --- | --- | --- |
@@ -300,25 +300,25 @@ Click the Tab to scroll automatically to the center of the viewport.
 
 ### Slots
 
-### Tabs Slots
+#### Tabs Slots
 
 | Slot | Description | Arguments |
 | --- | --- | --- |
 | `default` | tabs content | `-` |
 
-### Tab Slots
+#### Tab Slots
 
 | Slot | Description | Arguments |
 | --- | --- | --- |
 | `default` | tab's content | `-` |
 
-### TabsItems Slots
+#### TabsItems Slots
 
 | Slot | Description | Arguments |
 | --- | --- | --- |
 | `default` | TabsItems content | `-` |
 
-### TabItem Slots
+#### TabItem Slots
 
 | Slot | Description | Arguments |
 | --- | --- | --- |
@@ -328,7 +328,7 @@ Click the Tab to scroll automatically to the center of the viewport.
 
 Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)
 
-### Tabs Variables
+#### Tabs Variables
 
 | Variable | Default |
 | --- | --- |
@@ -340,7 +340,7 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--tabs-indicator-background` | `var(--color-primary)` |
 | `--tabs-background` | `#fff` |
 
-### Tab Variables
+#### Tab Variables
 
 | Variable | Default |
 | --- | --- |
diff --git a/packages/varlet-ui/src/tabs/docs/zh-CN.md b/packages/varlet-ui/src/tabs/docs/zh-CN.md
index 799b814902a..809599780ef 100644
--- a/packages/varlet-ui/src/tabs/docs/zh-CN.md
+++ b/packages/varlet-ui/src/tabs/docs/zh-CN.md
@@ -240,7 +240,7 @@ export default {
 
 ### 属性
 
-### Tabs Props
+#### Tabs Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -259,14 +259,14 @@ export default {
 | `offset-top` | 吸顶距离 | _string \| number_ | `0` |
 
 
-### Tab Props
+#### Tab Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `name` | 选项卡的名字 | _string \| number_ | `index` |
 | `disabled` | 是否禁用选项卡 | _boolean_ | `false` |
 
-### TabsItems Props
+#### TabsItems Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -274,7 +274,7 @@ export default {
 | `can-swipe` | 是否允许滑动切换 | _boolean_ | `true` |
 | `loop` | 是否允许循环切换 | _boolean_ | `false` |
 
-### TabItem Props
+#### TabItem Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -288,14 +288,14 @@ export default {
 
 ### 事件
 
-### Tabs Events
+#### Tabs Events
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
 | `click` | 点击选项卡时触发, 在选项卡 `disabled` 状态为 `true` 时不触发 | `active: string \| number` |
 | `change` | 切换选项卡时触发 | `active: string \| number` |
 
-### Tab Events
+#### Tab Events
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
@@ -303,25 +303,25 @@ export default {
 
 ### 插槽
 
-### Tabs Slots
+#### Tabs Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
 | `default` | 选项卡组的内容 | `-` |
 
-### Tab Slots
+#### Tab Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
 | `default` | 选项卡内容 | `-` |
 
-### TabsItems Slots
+#### TabsItems Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
 | `default` | 视图组的内容 | `-` |
 
-### TabItem Slots
+#### TabItem Slots
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
@@ -331,7 +331,7 @@ export default {
 
 以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制
 
-### Tabs Variables
+#### Tabs Variables
 
 | 变量名 | 默认值 |
 | --- | --- |
@@ -343,7 +343,7 @@ export default {
 | `--tabs-indicator-background` | `var(--color-primary)` |
 | `--tabs-background` | `#fff` |
 
-### Tab Variables
+#### Tab Variables
 
 | 变量名 | 默认值 |
 | --- | --- |