From 8d41a635079e20b315cea18be411c5298a751209 Mon Sep 17 00:00:00 2001 From: songsong <353833373@qq.com> Date: Wed, 18 Dec 2024 18:05:37 +0800 Subject: [PATCH] =?UTF-8?q?feat(badge):=20v15=E9=80=82=E9=85=8D=20(#2826)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: update marking * fix: v14适配 * fix: update docs * feat: 0.5px边框 * fix: update types * fix: update test and docs * fix: tabbar test 有问题 * fix: update doc * fix: modify style * fix: 升级文档pr修改 * fix: removing the color property is done using a css variable * fix: update test * fix: update test * fix: update test --- migrate-from-v2.md | 7 +- src/config.json | 3 +- .../__snapshots__/badge.spec.tsx.snap | 5 +- src/packages/badge/__test__/badge.spec.tsx | 38 ++------ src/packages/badge/badge.scss | 95 ++++++++++++------- src/packages/badge/badge.taro.tsx | 72 ++++---------- src/packages/badge/badge.tsx | 54 ++++------- src/packages/badge/demos/h5/demo1.tsx | 58 ++++++++--- src/packages/badge/demos/h5/demo2.tsx | 8 +- src/packages/badge/demos/h5/demo3.tsx | 35 ++++--- src/packages/badge/demos/h5/demo4.tsx | 17 +--- src/packages/badge/demos/h5/demo5.tsx | 22 ++--- src/packages/badge/demos/h5/demo6.tsx | 14 +-- src/packages/badge/demos/h5/demo7.tsx | 8 +- src/packages/badge/demos/h5/demo8.tsx | 14 +-- src/packages/badge/demos/taro/demo1.tsx | 67 ++++++++----- src/packages/badge/demos/taro/demo2.tsx | 25 ++--- src/packages/badge/demos/taro/demo3.tsx | 48 +++++----- src/packages/badge/demos/taro/demo4.tsx | 47 ++------- src/packages/badge/demos/taro/demo5.tsx | 34 ++----- src/packages/badge/demos/taro/demo6.tsx | 23 ++--- src/packages/badge/demos/taro/demo7.tsx | 14 +-- src/packages/badge/demos/taro/demo8.tsx | 32 +++---- src/packages/badge/doc.en-US.md | 39 ++++---- src/packages/badge/doc.md | 30 +++--- src/packages/badge/doc.taro.md | 30 +++--- src/packages/badge/doc.zh-TW.md | 30 +++--- src/packages/badge/index.taro.ts | 2 +- src/packages/badge/index.ts | 2 +- src/packages/badge/types.ts | 14 +++ .../__snapshots__/tabbar.spec.tsx.snap | 2 +- src/styles/variables.scss | 27 ++++-- 32 files changed, 432 insertions(+), 484 deletions(-) create mode 100644 src/packages/badge/types.ts diff --git a/migrate-from-v2.md b/migrate-from-v2.md index ffcd44f21a..95e11099a3 100644 --- a/migrate-from-v2.md +++ b/migrate-from-v2.md @@ -667,11 +667,8 @@ plugins: [ #### Badge -- 移除 `zIndex`，目前没有用到，也不生效，直接去掉。 -- 移除 `icon`，自定义 `icon` 可放在 `value` 中实现，扩充了 `value` 的类型。 -- 修改 `max` 的最大值为99（之前为10000），比较贴合实际场景。 -- 主题定制的 `css` 变量中，去掉和 `dot` 有关的其他值，只保留 `width`。其他值由 `width` 计算而来. -- 主题定制，增加包含 icon 情况下的样式变量。 +- 新增 `size` 属性，dot 尺寸，当 dot 等于 `true` 时生效 +- 移除 `徽标背景颜色`，通过css变量`--nutui-badge-background-color`实现 #### CircleProgress diff --git a/src/config.json b/src/config.json index e1ff16c552..2ca7625731 100644 --- a/src/config.json +++ b/src/config.json @@ -739,6 +739,7 @@ "sort": 4, "show": true, "taro": true, + "v14": true, "author": "lzz" }, { @@ -1274,4 +1275,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap b/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap index 4ed86572f6..35c4685cbf 100644 --- a/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap +++ b/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap @@ -7,6 +7,7 @@ exports[`should match custom icon 1`] = ` >
8
diff --git a/src/packages/badge/__test__/badge.spec.tsx b/src/packages/badge/__test__/badge.spec.tsx index 8f38b2578a..6a9919e66c 100644 --- a/src/packages/badge/__test__/badge.spec.tsx +++ b/src/packages/badge/__test__/badge.spec.tsx @@ -12,13 +12,13 @@ test('should match snapshot', () => { test('should match value is string', () => { const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] + const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] expect(badgeContent).toHaveTextContent('new') }) test('should match max size', () => { const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] + const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] expect(badgeContent.textContent).toBe('9+') }) @@ -29,42 +29,18 @@ test('should match dot', () => { }) test('should match top、right: bad number', () => { - const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] - expect(badgeContent).toHaveStyle({ top: '0px' }) -}) - -test('should match top、right: have px', () => { - const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] - expect(badgeContent).toHaveStyle({ top: '10px', right: '0px' }) + const { container } = render() + const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] + expect(badgeContent).toHaveStyle({ top: '10px' }) }) test('should match top、right: float', () => { - const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] + const { container } = render() + const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] expect(badgeContent).toHaveStyle({ top: '10.8px', right: '0.5px' }) }) -test('should match custom color', () => { - const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] - expect(badgeContent).toHaveStyle({ 'background-color': 'orange' }) -}) - test('should match custom icon', () => { const { asFragment } = render(} />) expect(asFragment()).toMatchSnapshot() }) - -test('should match custom color when fill = outline', () => { - const { container } = render( - - ) - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] - expect(badgeContent).toHaveStyle({ - border: '1px solid orange', - color: 'orange', - background: '#fff', - }) -}) diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss index b320fffc1a..5f904fd2f7 100644 --- a/src/packages/badge/badge.scss +++ b/src/packages/badge/badge.scss @@ -2,22 +2,14 @@ position: relative; display: inline-flex; width: auto; - /* #ifdef harmony */ - min-width: 1px; - /* #endif */ - /* #ifndef harmony */ - min-width: auto; - /* #endif */ + &-icon { - position: absolute; display: flex; justify-content: center; align-items: center; background: $badge-background-color; padding: $badge-icon-padding; text-align: center; - border: $badge-border; - border-radius: $badge-border-radius; z-index: $badge-z-index; .nut-icon { @@ -27,53 +19,88 @@ } } + &-sup, + &-icon { + border-radius: $badge-border-radius; + &::after { + content: ''; + position: absolute; + top: -50%; + bottom: -50%; + left: -50%; + right: -50%; + transform: scale(0.5); + border: $badge-border; + border-radius: $badge-border-radius; + } + } + &-sup { - height: $badge-height; - position: absolute; - display: flex; + display: inline-flex; justify-content: center; - align-items: center; - /* #ifdef harmony */ - background: $color-primary; - /* #endif */ - /* #ifndef harmony */ - background: $badge-background-color; - /* #endif */ - color: $badge-color; + height: $badge-height; + min-width: $badge-min-width; padding: $badge-padding; + box-sizing: border-box; + color: $badge-color; font-size: $badge-font-size; - font-weight: normal; - text-align: center; - border: $badge-border; - border-radius: $badge-border-radius; - min-width: $badge-min-width; + line-height: 12px; white-space: nowrap; + font-weight: normal; + vertical-align: middle; + background: $badge-background-color; z-index: 1; } + &-number { + font-family: 'JD'; + /* #ifdef harmony */ + line-height: 12px; + /* #endif */ + /* #ifndef harmony */ + line-height: 13px; + /* #endif */ + } + &-one { height: $badge-height; width: $badge-height; - padding: 0; } &-content { - /* #ifndef rn */ + position: absolute; transform: $badge-content-transform; - /* #endif */ } &-dot { - width: $badge-dot-width; - height: $badge-dot-width; - border: $badge-dot-border; - border-radius: $badge-dot-width; padding: 0; + border-radius: 50%; + &::after { + border: $badge-dot-border; + border-radius: 50%; + } + &-normal { + min-width: $badge-dot-width; + width: $badge-dot-width; + height: $badge-dot-width; + } + &-small { + min-width: $badge-dot-small-width; + width: $badge-dot-small-width; + height: $badge-dot-small-width; + } + &-large { + min-width: $badge-dot-large-width; + width: $badge-dot-large-width; + height: $badge-dot-large-width; + } } &-outline { background: $color-primary-text; - border: 1px solid $color-primary; - color: $color-primary; + color: $badge-outline-color; + &::after { + border: $badge-outline-border; + } } } diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx index 339a6254c6..31a1d8cf10 100644 --- a/src/packages/badge/badge.taro.tsx +++ b/src/packages/badge/badge.taro.tsx @@ -1,38 +1,27 @@ import React, { CSSProperties, FunctionComponent, - ReactNode, useEffect, useRef, useState, } from 'react' import classNames from 'classnames' import { View } from '@tarojs/components' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' import pxTransform from '@/utils/px-transform' -import { getRectByTaro } from '@/utils/get-rect-by-taro' -import { harmony, rn } from '@/utils/platform-taro' +import { harmony } from '@/utils/platform-taro' +import { BadgeProps } from './types' -export type BadgeFill = 'solid' | 'outline' -export interface BadgeProps extends BasicComponent { - value: ReactNode - dot: boolean - max: number - top: string | number - right: string | number - color: string - fill: BadgeFill -} const defaultProps = { ...ComponentDefaults, value: '', dot: false, max: 99, - top: '4', - right: '8', - color: '', + top: 0, + right: 0, fill: 'solid', + size: 'large', } as BadgeProps export const Badge: FunctionComponent> = (props) => { const rtl = useRtl() @@ -45,8 +34,8 @@ export const Badge: FunctionComponent> = (props) => { dot, top, right, - color, fill, + size, } = { ...defaultProps, ...props, @@ -77,12 +66,15 @@ export const Badge: FunctionComponent> = (props) => { if (typeof value === 'string' && value) return value } - const contentClasses = classNames(`${classPrefix}-content`, { + const contentClasses = classNames({ [`${classPrefix}-sup`]: isNumber() || isString() || dot, + [`${classPrefix}-number`]: isNumber(), [`${classPrefix}-one`]: typeof content() === 'string' && `${content()}`?.length === 1, [`${classPrefix}-dot`]: dot, + [`${classPrefix}-dot-${size}`]: dot, [`${classPrefix}-${fill}`]: fill === 'outline', + [`${classPrefix}-content`]: children, }) useEffect(() => { @@ -92,41 +84,14 @@ export const Badge: FunctionComponent> = (props) => { }, []) const getPositionStyle = async () => { const style: CSSProperties = {} - style.top = pxTransform(-Number(top) || 0) - if (rn()) { - const reacts = await getRectByTaro(badgeRef.current) - style.left = - reacts?.width && reacts?.width > Number(right) - ? pxTransform(reacts.width - Number(right)) - : 0 - } else { - const dir = rtl ? 'left' : 'right' - style[dir] = isHarmony - ? pxTransform(Number(right)) - : `${Number(right) || parseFloat(String(right)) || 0}px` - } + style.top = pxTransform(Number(top) || 0) + const dir = rtl ? 'left' : 'right' + style[dir] = isHarmony + ? pxTransform(Number(right)) + : `${Number(right) || 0}px` setContentStyle(style) } - const getStyle = () => { - const style: CSSProperties = {} - if (color) { - if (fill === 'outline') { - style.color = color - isHarmony - ? (style.backgroundColor = '#fff') - : (style.background = '#fff') - if (!color?.includes('gradient')) { - style.borderColor = color - } - } else { - style.color = '#fff' - isHarmony ? (style.backgroundColor = color) : (style.background = color) - } - } - return style - } - return ( {isIcon() && ( @@ -142,10 +107,7 @@ export const Badge: FunctionComponent> = (props) => { )} {children} {!isIcon() && ( - + {content()} )} diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx index a49031bc24..edc527ec87 100644 --- a/src/packages/badge/badge.tsx +++ b/src/packages/badge/badge.tsx @@ -1,28 +1,18 @@ -import React, { CSSProperties, FunctionComponent, ReactNode } from 'react' +import React, { CSSProperties, FunctionComponent } from 'react' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider' +import { BadgeProps } from './types' -export type BadgeFill = 'solid' | 'outline' - -export interface BadgeProps extends BasicComponent { - value: ReactNode - dot: boolean - max: number - top: string | number - right: string | number - color: string - fill: BadgeFill -} const defaultProps = { ...ComponentDefaults, value: '', dot: false, max: 99, - top: '4', - right: '8', - color: '', + top: 0, + right: 0, fill: 'solid', + size: 'large', } as BadgeProps export const Badge: FunctionComponent> = (props) => { const rtl = useRtl() @@ -35,16 +25,14 @@ export const Badge: FunctionComponent> = (props) => { dot, top, right, - color, fill, + size, } = { ...defaultProps, ...props, } const classPrefix = 'nut-badge' - const classes = classNames(classPrefix, className, { - [`${classPrefix}-${fill}`]: fill === 'outline', - }) + const classes = classNames(classPrefix, className) function content() { if (dot || typeof value === 'object' || value === 0) return null @@ -66,33 +54,24 @@ export const Badge: FunctionComponent> = (props) => { if (typeof value === 'string' && value) return value } - const contentClasses = classNames(`${classPrefix}-content`, { + const contentClasses = classNames({ [`${classPrefix}-sup`]: isNumber() || isString() || dot, + [`${classPrefix}-number`]: isNumber(), [`${classPrefix}-one`]: typeof content() === 'string' && `${content()}`?.length === 1, [`${classPrefix}-dot`]: dot, + [`${classPrefix}-dot-${size}`]: dot, [`${classPrefix}-${fill}`]: fill === 'outline', + [`${classPrefix}-content`]: children, }) - const getStyle = () => { + const getPositionStyle = () => { const style: CSSProperties = {} - style.top = `${Number(-top) || parseFloat(String(-top)) || 0}px` + style.top = `${Number(top) || 0}px` const dir = rtl ? 'left' : 'right' style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px` - - if (color) { - if (fill === 'outline') { - style.color = color - style.background = '#fff' - if (!color?.includes('gradient')) { - style.border = `1px solid ${color}` - } - } else { - style.color = '#fff' - style.background = color - } - } return style } + return (
{isIcon() && ( @@ -101,13 +80,14 @@ export const Badge: FunctionComponent> = (props) => { [`${classPrefix}-icon`]: true, [`${classPrefix}-icon-rtl`]: rtl, })} + style={getPositionStyle()} > {value}
)} {children} {!isIcon() && ( -
+
{content()}
)} diff --git a/src/packages/badge/demos/h5/demo1.tsx b/src/packages/badge/demos/h5/demo1.tsx index 8e542d0e10..f627259e76 100644 --- a/src/packages/badge/demos/h5/demo1.tsx +++ b/src/packages/badge/demos/h5/demo1.tsx @@ -1,23 +1,51 @@ -import { User } from '@nutui/icons-react' +import { Dongdong, User } from '@nutui/icons-react' import { Avatar, Badge, Cell } from '@nutui/nutui-react' import React from 'react' const Demo1 = () => { + const renderText = () => { + return ( + + 文字内容 + + ) + } return ( - - - } shape="square" /> - - - } shape="square" /> - - - } shape="square" /> - - - } shape="square" /> - - + <> + + {renderText()} + + + + + } shape="square" /> + + + + {renderText()} + + + + + } shape="square" /> + + + + + {renderText()} + + + + + + } shape="square" /> + + + ) } export default Demo1 diff --git a/src/packages/badge/demos/h5/demo2.tsx b/src/packages/badge/demos/h5/demo2.tsx index 12d6101cf3..b7e93fdf47 100644 --- a/src/packages/badge/demos/h5/demo2.tsx +++ b/src/packages/badge/demos/h5/demo2.tsx @@ -4,14 +4,14 @@ import { User } from '@nutui/icons-react' const Demo2 = () => { return ( - - + + } shape="square" /> - + } shape="square" /> - + } shape="square" /> diff --git a/src/packages/badge/demos/h5/demo3.tsx b/src/packages/badge/demos/h5/demo3.tsx index e173df2f4d..d6be8764c5 100644 --- a/src/packages/badge/demos/h5/demo3.tsx +++ b/src/packages/badge/demos/h5/demo3.tsx @@ -4,34 +4,31 @@ import { User } from '@nutui/icons-react' const Demo3 = () => { return ( - + - } shape="square" /> - - } shape="square" /> } shape="square" /> } shape="square" /> diff --git a/src/packages/badge/demos/h5/demo4.tsx b/src/packages/badge/demos/h5/demo4.tsx index 38eb81691b..29b41b1695 100644 --- a/src/packages/badge/demos/h5/demo4.tsx +++ b/src/packages/badge/demos/h5/demo4.tsx @@ -4,23 +4,14 @@ import { User, Checklist, Link as LinkIcon, Download } from '@nutui/icons-react' const Demo4 = () => { return ( - - } - > + + }> } shape="square" /> - } - > + }> } shape="square" /> - } - > + }> } shape="square" /> diff --git a/src/packages/badge/demos/h5/demo5.tsx b/src/packages/badge/demos/h5/demo5.tsx index 034634ddd4..02114f4892 100644 --- a/src/packages/badge/demos/h5/demo5.tsx +++ b/src/packages/badge/demos/h5/demo5.tsx @@ -6,23 +6,17 @@ const customTheme = { nutuiBadgeBorderRadius: '12px 12px 12px 0', } -const customTheme2 = { - nutuiBadgeDotWidth: '14px', - nutuiBadgeDotHeight: '14px', - nutuiBadgeBorder: '2px solid #fff', -} - const Demo5 = () => { return ( - + + + } shape="square" /> + + + } shape="square" /> + - - } shape="square" /> - - - - - + } shape="square" /> diff --git a/src/packages/badge/demos/h5/demo6.tsx b/src/packages/badge/demos/h5/demo6.tsx index c933a73c3a..66f7e37bbe 100644 --- a/src/packages/badge/demos/h5/demo6.tsx +++ b/src/packages/badge/demos/h5/demo6.tsx @@ -4,15 +4,15 @@ import React from 'react' const Demo6 = () => { return ( - - - } shape="square" /> + + + } /> - - } shape="square" /> + + } /> - - } shape="square" /> + + } /> ) diff --git a/src/packages/badge/demos/h5/demo7.tsx b/src/packages/badge/demos/h5/demo7.tsx index d8b63f6d54..7ec29a60e7 100644 --- a/src/packages/badge/demos/h5/demo7.tsx +++ b/src/packages/badge/demos/h5/demo7.tsx @@ -3,10 +3,10 @@ import React from 'react' const Demo7 = () => { return ( - - - - + + + + ) } diff --git a/src/packages/badge/demos/h5/demo8.tsx b/src/packages/badge/demos/h5/demo8.tsx index 6124b11036..548d9b12dc 100644 --- a/src/packages/badge/demos/h5/demo8.tsx +++ b/src/packages/badge/demos/h5/demo8.tsx @@ -4,18 +4,20 @@ import React from 'react' const Demo8 = () => { return ( - - + + } shape="square" /> - + } shape="square" /> } shape="square" /> diff --git a/src/packages/badge/demos/taro/demo1.tsx b/src/packages/badge/demos/taro/demo1.tsx index 7f51d295ee..cdb42f65e3 100644 --- a/src/packages/badge/demos/taro/demo1.tsx +++ b/src/packages/badge/demos/taro/demo1.tsx @@ -1,32 +1,53 @@ -import { User } from '@nutui/icons-react-taro' -import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' import React from 'react' +import { Dongdong, User } from '@nutui/icons-react-taro' +import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' +import { Text } from '@tarojs/components' import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo1 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> + const renderText = () => { + return ( + + 文字内容 + + ) } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - {renderChildren()} - - - {renderChildren()} - - - {renderChildren()} - - - {renderChildren()} - - + <> + + {renderText()} + + + + + } shape="square" /> + + + + {renderText()} + + + + + } shape="square" /> + + + + + {renderText()} + + + + + + } shape="square" /> + + + ) } export default Demo1 diff --git a/src/packages/badge/demos/taro/demo2.tsx b/src/packages/badge/demos/taro/demo2.tsx index 1bb5941275..2764308982 100644 --- a/src/packages/badge/demos/taro/demo2.tsx +++ b/src/packages/badge/demos/taro/demo2.tsx @@ -1,27 +1,18 @@ +import React from 'react' import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' -import React from 'react' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo2 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - {renderChildren()} + + + } shape="square" /> - - {renderChildren()} + + } shape="square" /> - - {renderChildren()} + + } shape="square" /> ) diff --git a/src/packages/badge/demos/taro/demo3.tsx b/src/packages/badge/demos/taro/demo3.tsx index 1eafbbf3f6..4148dbb84c 100644 --- a/src/packages/badge/demos/taro/demo3.tsx +++ b/src/packages/badge/demos/taro/demo3.tsx @@ -1,36 +1,36 @@ +import React from 'react' import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' -import React from 'react' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo3 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - {renderChildren()} - - - {renderChildren()} + + + } shape="square" /> - - {renderChildren()} + + } shape="square" /> - {renderChildren()} + } shape="square" /> ) diff --git a/src/packages/badge/demos/taro/demo4.tsx b/src/packages/badge/demos/taro/demo4.tsx index e52bf7a2cd..fd4442e772 100644 --- a/src/packages/badge/demos/taro/demo4.tsx +++ b/src/packages/badge/demos/taro/demo4.tsx @@ -1,46 +1,19 @@ -import { Checklist, User } from '@nutui/icons-react-taro' -import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' import React from 'react' -import { Icon } from '@tarojs/components' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' +import { Checklist, User, Dongdong, Download } from '@nutui/icons-react-taro' +import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' const Demo4 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } - const renderIcon = () => { - return ( - <> - {isRnAndHarmony ? ( - - ) : ( - - )} - - ) - } return ( - - - {renderChildren()} + + }> + } shape="square" /> + + }> + } shape="square" /> - {/* } - > - {renderChildren()} + }> + } shape="square" /> - } - > - {renderChildren()} - */} ) } diff --git a/src/packages/badge/demos/taro/demo5.tsx b/src/packages/badge/demos/taro/demo5.tsx index 1bab589954..06feb167d1 100644 --- a/src/packages/badge/demos/taro/demo5.tsx +++ b/src/packages/badge/demos/taro/demo5.tsx @@ -1,38 +1,24 @@ +import React from 'react' import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell, ConfigProvider } from '@nutui/nutui-react-taro' -import React from 'react' import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const customTheme = { nutuiBadgeBorderRadius: `${pxTransform(12)} ${pxTransform(12)} ${pxTransform(12)} 0`, } -const customTheme2 = { - nutuiBadgeDotWidth: pxTransform(14), - nutuiBadgeDotHeight: pxTransform(14), - nutuiBadgeBorder: `${pxTransform(2)} solid #000`, -} - const Demo5 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - + + + } shape="square" /> + + + } shape="square" /> + - - {renderChildren()} - - - - - - {renderChildren()} + + } shape="square" /> diff --git a/src/packages/badge/demos/taro/demo6.tsx b/src/packages/badge/demos/taro/demo6.tsx index bfaf5b92ea..a245e37280 100644 --- a/src/packages/badge/demos/taro/demo6.tsx +++ b/src/packages/badge/demos/taro/demo6.tsx @@ -1,27 +1,18 @@ import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' import React from 'react' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo6 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - {renderChildren()} + + + } /> - - {renderChildren()} + + } /> - - {renderChildren()} + + } /> ) diff --git a/src/packages/badge/demos/taro/demo7.tsx b/src/packages/badge/demos/taro/demo7.tsx index 2aecef14b1..089388c9ae 100644 --- a/src/packages/badge/demos/taro/demo7.tsx +++ b/src/packages/badge/demos/taro/demo7.tsx @@ -1,18 +1,12 @@ import React from 'react' import { Badge, Cell } from '@nutui/nutui-react-taro' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo7 = () => { - const isRnAndHarmony = harmonyAndRn() - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - - + + + + ) } diff --git a/src/packages/badge/demos/taro/demo8.tsx b/src/packages/badge/demos/taro/demo8.tsx index 75f1be594f..48bfc0d3c5 100644 --- a/src/packages/badge/demos/taro/demo8.tsx +++ b/src/packages/badge/demos/taro/demo8.tsx @@ -1,27 +1,25 @@ +import React from 'react' import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' -import React from 'react' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo8 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - {renderChildren()} + + + } shape="square" /> - - {renderChildren()} + + } shape="square" /> - - {renderChildren()} + + } shape="square" /> ) diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md index 90f1f32589..ca72b96ac2 100644 --- a/src/packages/badge/doc.en-US.md +++ b/src/packages/badge/doc.en-US.md @@ -83,9 +83,10 @@ import { Badge } from '@nutui/nutui-react' | value | value to show, eg number、charctor and custom content | `ReactNode` | `-` | | max | when value is number, it's the max size | `number` | `99` | | dot | Is dotted, When `value` is a custom content, dot does not take effect | `boolean` | `false` | -| top | Up and down offset, support unit setting, can be set to: "0" or 0, etc. | `string` \| `number` | `"0"` | -| right | Left and right offset, support unit setting, can be set to: "5" or 5, etc. | `string` \| `number` | `"5"` | -| color | background color,the default value is the theme primary color | `string` | `-` | + +| size | dot size, effective when dot is equal to `true` | `small` \| `normal` \| `large` | `large` | +| top | Up and down offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` | +| right | Left and right offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` | | fill | Fill Mode | `solid` \| `outline` | `solid` | ## Theming @@ -96,17 +97,21 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-badge-height | badge height | `14px` | -| \--nutui-badge-background-color | badge background color | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | -| \--nutui-badge-color | badge content color | `#fff` | -| \--nutui-badge-font-size | badge content font size | `$font-size-s` | -| \--nutui-badge-border | badge border | `0px solid $color-primary-text` | -| \--nutui-badge-border-radius | badge border-radius | `14px` | -| \--nutui-badge-min-width | badge min-width | `5px` | -| \--nutui-badge-padding | badge padding value | `0 5px` | -| \--nutui-badge-icon-padding | when badge is icon,badge padding | `2px` | -| \--nutui-badge-icon-size | when badge is icon,badge size | `12px` | -| \--nutui-badge-content-transform | badge content transform | `translateY(-50%) translateX(100%)` | -| \--nutui-badge-z-index | when badge is icon, badge z-index | `1` | -| \--nutui-badge-dot-width | when badge is dot, the dot width,height and border radius | `7px` | -| \--nutui-badge-dot-border | when badge is dot, the dot border | `0px solid $color-primary-text` | +| \--nutui-badge-height | The height of the badge | `14px` | +| \--nutui-badge-background-color | badge background color | `$color-primary` | +| \--nutui-badge-color | badge content color value | `$color-primary-text)` | +| \--nutui-badge-font-size | badge content font size | `$font-size-xxs` | +| \--nutui-badge-border | badge border | `1px solid $color-primary-text` | +| \--nutui-badge-border-radius | badge border rounded corners | `14px` | +| \--nutui-badge-min-width | badge minimum width | `6px` | +| \--nutui-badge-padding | badge’s padding value | `1px 4px` | +| \--nutui-badge-icon-padding | The padding value when badge is a custom icon | `2px` | +| \--nutui-badge-icon-size | The size of badge when it is a custom icon | `10px` | +| \--nutui-badge-content-transform | badge content position | `translate(50%, -50%)` | +| \--nutui-badge-z-index | badge z-index when customizing the icon | `1` | +| \--nutui-badge-dot-width | When the badge is a dot, the size is equal to the width and height of normal | `6px` | +| \--nutui-badge-dot-small-width | When badge is a dot, size is equal to the width and height of small | `4px` | +| \--nutui-badge-dot-large-width | When the badge is a dot, size is equal to the width and height of large | `8px` | +| \--nutui-badge-dot-border | The border when the badge is a dot | `1px solid $color-primary-text` | +| \--nutui-badge-outline-color | The border when badge is outline text color value | `$color-primary` | +| \--nutui-badge-outline-border | The border when badge is outline fill mode | `1px solid $color-primary-text` | diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md index a6643dfebb..17d94c954c 100644 --- a/src/packages/badge/doc.md +++ b/src/packages/badge/doc.md @@ -83,9 +83,9 @@ import { Badge } from '@nutui/nutui-react' | value | 显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` | | max | value 为数值时，最大值 | `number` | `99` | | dot | 是否为小点，当`value`值为自定义内容时，dot不生效 | `boolean` | `false` | -| top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `"0"` | -| right | 左右偏移量，支持单位设置，可设置为："5"或5 等 | `string` \| `number` | `"5"` | -| color | 徽标背景颜色,默认值为当前主题色 | `string` | `-` | +| size | dot 尺寸，当 dot 等于 `true` 时生效 | `small` \| `normal` \| `large` | `large` | +| top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` | +| right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` | | fill | 填充模式 | `solid` \| `outline` | `solid` | ## 主题定制 @@ -97,16 +97,20 @@ import { Badge } from '@nutui/nutui-react' | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-badge-height | badge 的高度 | `14px` | -| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | -| \--nutui-badge-color | badge 内容色值 | `#fff` | -| \--nutui-badge-font-size | badge 内容字号 | `$font-size-s` | -| \--nutui-badge-border | badge 边框 | `0px solid $color-primary-text` | +| \--nutui-badge-background-color | badge 背景色 | `$color-primary` | +| \--nutui-badge-color | badge 内容色值 | `$color-primary-text` | +| \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` | +| \--nutui-badge-border | badge 边框 | `1px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 边框圆角 | `14px` | -| \--nutui-badge-min-width | badge 最小宽度 | `5px` | -| \--nutui-badge-padding | badge 的padding值 | `0 5px` | +| \--nutui-badge-min-width | badge 最小宽度 | `6px` | +| \--nutui-badge-padding | badge 的padding值 | `1px 4px` | | \--nutui-badge-icon-padding | badge 为自定义icon时 的 padding值 | `2px` | -| \--nutui-badge-icon-size | badge 为自定义icon时 的 size | `12px` | -| \--nutui-badge-content-transform | badge 内容位置 | `translateY(-50%) translateX(100%)` | +| \--nutui-badge-icon-size | badge 为自定义icon时 的 size | `10px` | +| \--nutui-badge-content-transform | badge 内容位置 | `translate(50%, -50%)` | | \--nutui-badge-z-index | badge 自定义icon时的z-index | `1` | -| \--nutui-badge-dot-width | badge 为圆点时的宽度、高度、圆角 | `7px` | -| \--nutui-badge-dot-border | badge 为圆点时的边框 | `0px solid $color-primary-text` | +| \--nutui-badge-dot-width | badge 为圆点时，size 等于 normal 的宽高 | `6px` | +| \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽高 | `4px` | +| \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽高 | `8px` | +| \--nutui-badge-dot-border | badge 为圆点时的边框 | `1px solid $color-primary-text` | +| \--nutui-badge-outline-color | badge 为 outline 文字色值 | `$color-primary` | +| \--nutui-badge-outline-border | badge 为 outline 填充模式时的边框 | `1px solid $color-primary-text` | diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md index c1eb009cb6..c7aaed3911 100644 --- a/src/packages/badge/doc.taro.md +++ b/src/packages/badge/doc.taro.md @@ -83,9 +83,9 @@ import { Badge } from '@nutui/nutui-react-taro' | value | 显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` | | max | value 为数值时，最大值 | `number` | `99` | | dot | 是否为小点，当`value`值为自定义内容时，dot不生效 | `boolean` | `false` | -| top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `"0"` | -| right | 左右偏移量，支持单位设置，可设置为："5"或5 等 | `string` \| `number` | `"5"` | -| color | 徽标背景颜色 | `string` | `-` | +| size | dot 尺寸，当 dot 等于 `true` 时生效 | `small` \| `normal` \| `large` | `large` | +| top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` | +| right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` | | fill | 填充模式 | `solid` \| `outline` | `solid` | ## 主题定制 @@ -97,16 +97,20 @@ import { Badge } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-badge-height | badge 的高度 | `14px` | -| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | -| \--nutui-badge-color | badge 内容色值 | `#fff` | -| \--nutui-badge-font-size | badge 内容字号 | `$font-size-s` | -| \--nutui-badge-border | badge 边框 | `0px solid $color-primary-text` | +| \--nutui-badge-background-color | badge 背景色 | `$color-primary` | +| \--nutui-badge-color | badge 内容色值 | `$color-primary-text` | +| \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` | +| \--nutui-badge-border | badge 边框 | `1px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 边框圆角 | `14px` | -| \--nutui-badge-min-width | badge 最小宽度 | `5px` | -| \--nutui-badge-padding | badge 的padding值 | `0 5px` | +| \--nutui-badge-min-width | badge 最小宽度 | `6px` | +| \--nutui-badge-padding | badge 的padding值 | `1px 4px` | | \--nutui-badge-icon-padding | badge 为自定义icon时 的 padding值 | `2px` | -| \--nutui-badge-icon-size | badge 为自定义icon时 的 size | `12px` | -| \--nutui-badge-content-transform | badge 内容位置 | `translateY(-50%) translateX(100%)` | +| \--nutui-badge-icon-size | badge 为自定义icon时 的 size | `10px` | +| \--nutui-badge-content-transform | badge 内容位置 | `translate(50%, -50%)` | | \--nutui-badge-z-index | badge 自定义icon时的z-index | `1` | -| \--nutui-badge-dot-width | badge 为圆点时的宽度、高度、圆角 | `7px` | -| \--nutui-badge-dot-border | badge 为圆点时的边框 | `0px solid $color-primary-text` | +| \--nutui-badge-dot-width | badge 为圆点时，size 等于 normal 的宽高 | `6px` | +| \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽高 | `4px` | +| \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽高 | `8px` | +| \--nutui-badge-dot-border | badge 为圆点时的边框 | `1px solid $color-primary-text` | +| \--nutui-badge-outline-color | badge 为 outline 文字色值 | `$color-primary` | +| \--nutui-badge-outline-border | badge 为 outline 填充模式时的边框 | `1px solid $color-primary-text` | diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md index 8637392947..947d9ef103 100644 --- a/src/packages/badge/doc.zh-TW.md +++ b/src/packages/badge/doc.zh-TW.md @@ -83,9 +83,9 @@ import { Badge } from '@nutui/nutui-react' | value | 顯示的內容，支持數字、字符和自定義內容 | `ReactNode` | `-` | | max | value 為數值時，最大值 | `number` | `99` | | dot | 是否為小點，當`value`值為自定義內容時，dot不生效 | `boolean` | `false` | -| top | 上下偏移量，支持單位設置，可設置為："0"或0 等 | `string` \| `number` | `"0"` | -| right | 左右偏移量，支持單位設置，可設置為："5"或5 等 | `string` \| `number` | `"5"` | -| color | 徽標背景顏色,默認值為當前主題色 | `string` | `-` | +| size | dot 尺寸，當 dot 等於 `true` 時生效 | `small` \| `normal` \| `large` | `large` | +| top | 上下偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` | +| right | 左右偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` | | fill | 填充模式 | `solid` \| `outline` | `solid` | ## 主題定制 @@ -97,16 +97,20 @@ import { Badge } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | | \--nutui-badge-height | badge 的高度 | `14px` | -| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | -| \--nutui-badge-color | badge 內容色值 | `#fff` | -| \--nutui-badge-font-size | badge 內容字號 | `$font-size-s` | -| \--nutui-badge-border | badge 邊框 | `0px solid $color-primary-text` | +| \--nutui-badge-background-color | badge 背景色 | `$color-primary` | +| \--nutui-badge-color | badge 內容色值 | `$color-primary-text)` | +| \--nutui-badge-font-size | badge 內容字號 | `$font-size-xxs` | +| \--nutui-badge-border | badge 邊框 | `1px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 邊框圓角 | `14px` | -| \--nutui-badge-min-width | badge 最小寬度 | `5px` | -| \--nutui-badge-padding | badge 的padding值 | `0 5px` | +| \--nutui-badge-min-width | badge 最小寬度 | `6px` | +| \--nutui-badge-padding | badge 的padding值 | `1px 4px` | | \--nutui-badge-icon-padding | badge 為自定義icon時 的 padding值 | `2px` | -| \--nutui-badge-icon-size | badge 為自定義icon時 的 size | `12px` | -| \--nutui-badge-content-transform | badge 內容位置 | `translateY(-50%) translateX(100%)` | +| \--nutui-badge-icon-size | badge 為自定義icon時 的 size | `10px` | +| \--nutui-badge-content-transform | badge 內容位置 | `translate(50%, -50%)` | | \--nutui-badge-z-index | badge 自定義icon時的z-index | `1` | -| \--nutui-badge-dot-width | badge 為圓點時的寬度、高度、圓角 | `7px` | -| \--nutui-badge-dot-border | badge 為圓點時的邊框 | `0px solid $color-primary-text` | +| \--nutui-badge-dot-width | badge 為圓點時，size 等於 normal 的寬高 | `6px` | +| \--nutui-badge-dot-small-width | badge 為圓點時，size 等於 small 的寬高 | `4px` | +| \--nutui-badge-dot-large-width | badge 為圓點時，size 等於 large 的寬高 | `8px` | +| \--nutui-badge-dot-border | badge 為圓點時的邊框 | `1px solid $color-primary-text` | +| \--nutui-badge-outline-color | badge 為 outline 文字色值 | `$color-primary` | +| \--nutui-badge-outline-border | badge 為 outline 填充模式時的邊框 | `1px solid $color-primary-text` | diff --git a/src/packages/badge/index.taro.ts b/src/packages/badge/index.taro.ts index 3191faeb66..3ce5d6af76 100644 --- a/src/packages/badge/index.taro.ts +++ b/src/packages/badge/index.taro.ts @@ -1,4 +1,4 @@ import { Badge } from './badge.taro' -export type { BadgeFill, BadgeProps } from './badge.taro' +export type { BadgeFill, BadgeDotSize, BadgeProps } from './types' export default Badge diff --git a/src/packages/badge/index.ts b/src/packages/badge/index.ts index 89062c5a6d..77131479f3 100644 --- a/src/packages/badge/index.ts +++ b/src/packages/badge/index.ts @@ -1,4 +1,4 @@ import { Badge } from './badge' -export type { BadgeFill, BadgeProps } from './badge' +export type { BadgeFill, BadgeDotSize, BadgeProps } from './types' export default Badge diff --git a/src/packages/badge/types.ts b/src/packages/badge/types.ts new file mode 100644 index 0000000000..473b24078d --- /dev/null +++ b/src/packages/badge/types.ts @@ -0,0 +1,14 @@ +import { BasicComponent } from '@/utils/typings' + +export type BadgeFill = 'solid' | 'outline' +export type BadgeDotSize = 'small' | 'normal' | 'large' + +export interface BadgeProps extends BasicComponent { + value: React.ReactNode + dot: boolean + max: number + top: string | number + right: string | number + fill: BadgeFill + size: BadgeDotSize +} diff --git a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap index 2c1b62f27f..e09c341b1f 100644 --- a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap +++ b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap @@ -1,5 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`should only render title 1`] = `"
首页
11
分类
发现
"`; +exports[`should only render title 1`] = `"
首页
11
分类
发现
"`; exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index e995510c55..1c573916cc 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1602,26 +1602,33 @@ $tag-mark-border-radius: var( $badge-height: var(--nutui-badge-height, 14px) !default; $badge-background-color: var( --nutui-badge-background-color, - $color-primary-gradient-1 + $color-primary ) !default; -$badge-color: var(--nutui-badge-color, #fff) !default; +$badge-color: var(--nutui-badge-color, $color-primary-text) !default; $badge-font-size: var(--nutui-badge-font-size, $font-size-xxs) !default; $badge-border: var( --nutui-badge-border, - 0px solid $color-primary-text + 1px solid $color-primary-text ) !default; $badge-border-radius: var(--nutui-badge-border-radius, $badge-height) !default; -$badge-min-width: var(--nutui-badge-min-width, 5px) !default; -$badge-padding: var(--nutui-badge-padding, 0 4px) !default; -$badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default; -$badge-icon-size: var(--nutui-badge-icon-size, 12px) !default; +$badge-min-width: var(--nutui-badge-min-width, 6px) !default; +$badge-padding: var(--nutui-badge-padding, 1px 4px) !default; +$badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default; +$badge-icon-size: var(--nutui-badge-icon-size, 10px) !default; $badge-content-transform: var( --nutui-badge-content-transform, - translateX(100%) + translate(50%, -50%) ) !default; $badge-z-index: var(--nutui-badge-z-index, 1) !default; -$badge-dot-width: var(--nutui-badge-dot-width, 7px) !default; -$badge-dot-border: var(--nutui-badge-dot-border, 0px solid $color-primary-text); +$badge-dot-width: var(--nutui-badge-dot-width, 6px) !default; +$badge-dot-small-width: var(--nutui-badge-dot-width, 4px) !default; +$badge-dot-large-width: var(--nutui-badge-dot-width, 8px) !default; +$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text); +$badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default; +$badge-outline-border: var( + --nutui-badge-outline-border, + 1px solid $color-primary +); //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;