feat(hoverbutton): v14

src/packages/hoverbutton/__test__/__snapshots__/hoverbutton.spec.tsx.snap

@@ -120,7 +120,7 @@ exports[`tabbar height 1`] = `
 <div>
   <div
     class="nut-hoverbutton-container"
-    style="bottom: 64px;"
+    style="bottom: 108px;"
   >
     <div
       class="nut-hoverbutton"

src/packages/hoverbutton/__test__/hoverbutton.spec.tsx

@@ -34,7 +34,7 @@ test('tabbar height', () => {
 
   expect(container.querySelector('.nut-hoverbutton-container')).toHaveAttribute(
     'style',
-    'bottom: 64px;'
+    'bottom: 108px;'
   )
   expect(container).toMatchSnapshot()
 })

src/packages/hoverbutton/constant.ts

@@ -0,0 +1 @@
+export const UI_BOTTOM_DISTANCE = 60

src/packages/hoverbutton/demo.taro.tsx

@@ -8,6 +8,7 @@ import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
+import Demo6 from './demos/taro/demo6'
 import { harmonyAndRn } from '@/utils/platform-taro'
 // import Demo5 from './demos/taro/demo5'
 
@@ -18,6 +19,7 @@ const HoverDemo = () => {
     'zh-CN': {
       show: '展示',
       basic: '基础用法',
+      customNode: '自定义内容',
       multiButtons: '多个按钮',
       hasTabbar: '有底部导航栏的情况',
       customZIndex: '自定义层级',
@@ -26,6 +28,7 @@ const HoverDemo = () => {
     'zh-TW': {
       show: '展示',
       basic: '基礎用法',
+      customNode: '按鈕和文字',
       multiButtons: '多個按鈕',
       hasTabbar: '有底部導航欄的情況',
       customZIndex: '自定義層級',
@@ -34,6 +37,7 @@ const HoverDemo = () => {
     'en-US': {
       show: 'Show ',
       basic: 'Basic Usage',
+      customNode: 'Icon And Text',
       multiButtons: 'Multiple Buttons',
       hasTabbar: 'With Tabbar',
       customZIndex: 'Custom Z-Index',
@@ -91,9 +95,18 @@ const HoverDemo = () => {
             }}
           />
         )} */}
+
+        <View className="h2">{translated.customNode}</View>
+        <Cell
+          title={`${translated.show}${translated.customNode}`}
+          onClick={() => {
+            setCurDemo('customNode')
+          }}
+        />
       </ScrollView>
 
       {curDemo === 'basic' && <Demo1 />}
+      {curDemo === 'customNode' && <Demo6 />}
       {curDemo === 'multiButtons' && <Demo2 />}
       {curDemo === 'hasTabbar' && <Demo3 />}
       {curDemo === 'customZIndex' && <Demo4 />}

src/packages/hoverbutton/demo.tsx

@@ -6,12 +6,14 @@ import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
 
 const HoverButtonDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       show: '展示',
       basic: '基础用法',
+      customNode: '按钮和文字',
       multiButtons: '多个按钮',
       hasTabbar: '有底部导航栏的情况',
       customZIndex: '自定义层级',
@@ -20,6 +22,7 @@ const HoverButtonDemo = () => {
     'zh-TW': {
       show: '展示',
       basic: '基礎用法',
+      customNode: '自定義內容',
       multiButtons: '多個按鈕',
       hasTabbar: '有底部導航欄的情況',
       customZIndex: '自定義層級',
@@ -28,13 +31,14 @@ const HoverButtonDemo = () => {
     'en-US': {
       show: 'Show ',
       basic: 'Basic Usage',
+      customNode: 'Custom Node',
       multiButtons: 'Multiple Buttons',
       hasTabbar: 'With Tabbar',
       customZIndex: 'Custom Z-Index',
       customSpacing: 'Custom Spacing',
     },
   })
-  const [curDemo, setCurDemo] = useState('basic')
+  const [curDemo, setCurDemo] = useState('customNode')
 
   return (
     <>
@@ -84,6 +88,15 @@ const HoverButtonDemo = () => {
         />
         {curDemo === 'customSpacing' && <Demo5 />}
       </div>
+
+      <h2>{translated.customNode}</h2>
+      <Cell
+        title={`${translated.show}${translated.customNode}`}
+        onClick={() => {
+          setCurDemo('customNode')
+        }}
+      />
+      {curDemo === 'customNode' && <Demo6 />}
     </>
   )
 }

src/packages/hoverbutton/demos/h5/demo2.tsx

@@ -30,6 +30,9 @@ const Demo2 = () => {
       <HoverButton.Item icon={<Cart />} onClick={testClick1} />
       <HoverButton.Item icon={<Cart />} onClick={testClick2} />
       <HoverButton.Item icon={<Cart />} onClick={testClick3} />
+      <HoverButton.Item icon={<Cart />} onClick={testClick3}>
+        购物
+      </HoverButton.Item>
     </HoverButton>
   )
 }

src/packages/hoverbutton/demos/h5/demo6.tsx

@@ -0,0 +1,53 @@
+/**
+ * 基础用法
+ */
+import React from 'react'
+import { HoverButton } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  return (
+    <>
+      <HoverButton>
+        <div
+          className="nut-hoverbutton-item-container"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <span
+            style={{
+              fontSize: 12,
+              fontWeight: 700,
+              lineHeight: 1,
+              marginTop: 5,
+              fontFamily: 'JD',
+            }}
+          >
+            3
+          </span>
+          <div
+            style={{
+              height: 1,
+              width: 20,
+              background: '#1A1A1A',
+              marginTop: 3,
+              marginBottom: 3,
+            }}
+          />
+          <div
+            style={{
+              fontSize: 10,
+              lineHeight: '9px',
+              fontFamily: 'JD',
+            }}
+          >
+            238
+          </div>
+        </div>
+      </HoverButton>
+    </>
+  )
+}
+export default Demo1

src/packages/hoverbutton/demos/taro/demo2.tsx

@@ -21,6 +21,9 @@ const Demo2 = () => {
       <HoverButton.Item icon={<Cart />} onClick={testClick1} />
       <HoverButton.Item icon={<Cart />} onClick={testClick2} />
       <HoverButton.Item icon={<Cart />} onClick={testClick3} />
+      <HoverButton.Item icon={<Cart />} onClick={testClick3}>
+        购物
+      </HoverButton.Item>
     </HoverButton>
   )
 }

src/packages/hoverbutton/demos/taro/demo6.tsx

@@ -0,0 +1,56 @@
+/**
+ * 基础用法
+ */
+import React from 'react'
+import { HoverButton } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
+
+const Demo1 = () => {
+  return (
+    <>
+      <HoverButton>
+        <View
+          className="nut-hoverbutton-item nut-hoverbutton-item-container"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            marginBottom: 8,
+          }}
+        >
+          <View
+            style={{
+              fontSize: 12,
+              fontWeight: 700,
+              lineHeight: 1,
+              marginTop: 5,
+              fontFamily: 'JD',
+            }}
+          >
+            3
+          </View>
+          <View
+            style={{
+              height: 1,
+              width: 20,
+              background: '#1A1A1A',
+              marginTop: 3,
+              marginBottom: 3,
+            }}
+          />
+          <View
+            style={{
+              fontSize: 10,
+              lineHeight: pxTransform(9),
+              fontFamily: 'JD',
+            }}
+          >
+            238
+          </View>
+        </View>
+      </HoverButton>
+    </>
+  )
+}
+export default Demo1

src/packages/hoverbutton/doc.en-US.md

@@ -44,6 +44,14 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### Custom Node
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
@@ -79,4 +87,4 @@ The component provides the following CSS variables that can be used for custom s
 | \--nutui-hoverbutton-item-background | Button normal background color | `#FFFFFF` |
 | \--nutui-hoverbutton-item-background-active | Button active background color | `#F6F6F6` |
 | \--nutui-hoverbutton-item-icon-color | Icon normal color | `#1A1A1A` |
-| \--nutui-hoverbutton-item-icon-color-active | Icon active color | `#595959` |
+| \--nutui-hoverbutton-item-icon-color-active | Icon active color | `#595959` |

src/packages/hoverbutton/doc.md

@@ -44,6 +44,22 @@ import { HoverButton } from '@nutui/nutui-react'
 
 :::
 
+### 自定义间距
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
+### 自定义内容
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
@@ -79,4 +95,4 @@ import { HoverButton } from '@nutui/nutui-react'
 | \--nutui-hoverbutton-item-background | 按钮背景色-正常态 | `#FFFFFF` |
 | \--nutui-hoverbutton-item-background-active | 按钮背景色-点击态 | `#F6F6F6` |
 | \--nutui-hoverbutton-item-icon-color | 图标色-正常态 | `#1A1A1A` |
-| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` |
+| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` |

src/packages/hoverbutton/doc.taro.md

@@ -44,6 +44,14 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### 自定义内容
+
+:::demo
+
+<CodeBlock src='taro/demo6.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
@@ -79,4 +87,4 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 | \--nutui-hoverbutton-item-background | 按钮背景色-正常态 | `#FFFFFF` |
 | \--nutui-hoverbutton-item-background-active | 按钮背景色-点击态 | `#F6F6F6` |
 | \--nutui-hoverbutton-item-icon-color | 图标色-正常态 | `#1A1A1A` |
-| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` |
+| \--nutui-hoverbutton-item-icon-color-active | 图标色-点击态 | `#595959` |

src/packages/hoverbutton/doc.zh-TW.md

@@ -44,6 +44,22 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 
 :::
 
+### 自訂間距
+
+:::demo
+
+<CodeBlock src='taro/demo5.tsx'></CodeBlock>
+
+:::
+
+### 自定義內容
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ## HoverButton
 
 ### Props
@@ -79,4 +95,4 @@ import { HoverButton } from '@nutui/nutui-react-taro'
 | \--nutui-hoverbutton-item-background | 按鈕背景色-正常態 | `#FFFFFF` |
 | \--nutui-hoverbutton-item-background-active | 按鈕背景色-點擊態 | `#F6F6F6` |
 | \--nutui-hoverbutton-item-icon-color | 圖標色-正常態 | `#1A1A1A` |
-| \--nutui-hoverbutton-item-icon-color-active | 圖標色-點擊態 | `#595959` |
+| \--nutui-hoverbutton-item-icon-color-active | 圖標色-點擊態 | `#595959` |

src/packages/hoverbutton/hoverbutton.taro.tsx

@@ -9,6 +9,7 @@ import HoverButtonItem, {
 } from '@/packages/hoverbuttonitem/index.taro'
 import SafeArea from '@/packages/safearea/index.taro'
 import pxTransform from '@/utils/px-transform'
+import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/constant'
 
 export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps {
   zIndex: number
@@ -37,7 +38,7 @@ export const HoverButton: FunctionComponent<
   const baseStyle = { ...style }
 
   if (tabbarHeight) {
-    baseStyle.bottom = pxTransform(tabbarHeight + 16)
+    baseStyle.bottom = pxTransform(tabbarHeight + UI_BOTTOM_DISTANCE)
   }
 
   if (typeof zIndex !== 'undefined') {

src/packages/hoverbutton/hoverbutton.tsx

@@ -6,6 +6,7 @@ import HoverButtonItem, {
   HoverButtonItemProps,
 } from '@/packages/hoverbuttonitem/index'
 import SafeArea from '@/packages/safearea/index'
+import { UI_BOTTOM_DISTANCE } from '@/packages/hoverbutton/constant'
 
 export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps {
   zIndex: number
@@ -34,7 +35,7 @@ export const HoverButton: FunctionComponent<
   const baseStyle = { ...style }
 
   if (tabbarHeight) {
-    const bottom = tabbarHeight + 16
+    const bottom = tabbarHeight + UI_BOTTOM_DISTANCE
     baseStyle.bottom = `${bottom}px`
   }