diff --git a/migrate-from-v1.md b/migrate-from-v1.md index 8d00aca770..943067f3ea 100644 --- a/migrate-from-v1.md +++ b/migrate-from-v1.md @@ -626,6 +626,7 @@ plugins: [ - 新增 `targetId` 属性，用于自定义目标元素 id - 新增 `onOpen` 属性，用于点击菜单时触发 - 新增 `onClose` 属性，用于关闭菜单时触发 +- 新增 `action` 属性，用于为对应的选项添加方法 - `onChoose` 重命名为 `onSelect` - 继承Popup组件的 `overlayStyle` 、`overlayClassName` 、`overlay` 、`closeOnOverlayClick` 属性。 diff --git a/src/packages/popover/demo.scss b/src/packages/popover/demo.scss index 284a3ce891..ff72ff27aa 100644 --- a/src/packages/popover/demo.scss +++ b/src/packages/popover/demo.scss @@ -8,10 +8,12 @@ .nut-popover-content { width: auto; } + .self-content { width: 195px; display: flex; flex-wrap: wrap; + &-item { margin-top: 10px; margin-bottom: 10px; @@ -20,6 +22,7 @@ align-items: center; flex-direction: column; } + &-desc { margin-top: 5px; width: 60px; @@ -33,6 +36,7 @@ margin: 80px 0; display: flex; justify-content: center; + .brick { width: 60px; height: 60px; @@ -42,9 +46,7 @@ } .custom-color { - --nutui-popover-primary-text-color: rgb(255, 255, 255); + --nutui-popover-text-color: rgb(255, 255, 255); --nutui-popover-content-background-color: rgb(255, 0, 0); - --nutui-popover-white-background-color: rgb(255, 0, 0); - --nutui-popover-menu-item-hover-text-color: rgb(255, 255, 255); - --nutui-popover-menu-item-hover-background-color: rgb(255, 0, 0); + --nutui-popover-border-color: rgb(255, 0, 0); } diff --git a/src/packages/popover/demo.taro.tsx b/src/packages/popover/demo.taro.tsx index 88ddd0ed21..a07128ad99 100644 --- a/src/packages/popover/demo.taro.tsx +++ b/src/packages/popover/demo.taro.tsx @@ -8,10 +8,15 @@ import { Notice, Category, } from '@nutui/icons-react-taro' +import { useTranslate } from '../../sites/assets/locale' import { Button, Popover, Cell, Picker } from '@/packages/nutui.react.taro' import '@/packages/popover/demo.scss' import Header from '@/sites/components/header' +interface T { + [props: string]: string +} + interface List { key?: string name: string @@ -29,6 +34,47 @@ interface PickerOption { } const PopoverDemo = () => { + const [translated] = useTranslate({ + 'zh-CN': { + title: '基础用法', + title1: '选项配置', + title2: '自定义内容', + title3: '位置自定义', + title4: '自定义目标元素', + dark: '暗黑风格', + showIcon: '展示图标', + disableAction: '禁用选项', + content: '自定义内容', + contentColor: '自定义颜色', + showMoreDirection: '点击查看更多方向', + }, + 'en-US': { + title: 'Basic Usage', + title1: 'Option Configuration', + title2: 'Custom Content', + title3: 'Custom Location', + title4: 'Custom Target Element', + dark: 'Dark', + showIcon: 'Show Icon', + disableAction: 'Disabled', + content: 'Custom Content', + contentColor: 'Custom Color', + showMoreDirection: 'click show more direction', + }, + 'zh-TW': { + title: '基礎用法', + title1: '選項配置', + title2: '自定義內容', + title3: '位置自定義', + title4: '自定義目標元素', + dark: '暗黑風格', + showIcon: '展示圖標', + disableAction: '禁用選項', + content: '自定義內容', + contentColor: '自定義顏色', + showMoreDirection: '點擊查看更多方向', + }, + }) const selfContentStyle = { width: '195px', display: 'flex', @@ -67,19 +113,24 @@ const PopoverDemo = () => { { key: 'key1', name: 'option1', - icon: ( - - ), + icon: , + action: { + icon: , + onClick: (e: any) => { + console.log('onclick 1') + e.stopPropagation() + }, + }, }, { key: 'key2', name: 'option2', - icon: , + icon: , }, { key: 'key3', name: 'option3', - icon: , + icon: , }, ] const itemListDisabled = [ @@ -185,8 +236,7 @@ const PopoverDemo = () => { <>
-

基础用法

- +

{translated.title}

{ }} > -

选项配置

+

{translated.title1}

{ style={{ marginRight: '30px' }} > { onSelect={chooseHandle} > -

自定义内容

+

{translated.content}

{ @@ -245,7 +295,7 @@ const PopoverDemo = () => { className="customClass" > {customized ? (
@@ -271,10 +321,10 @@ const PopoverDemo = () => { '' )} -

位置自定义

+

{translated.title3}

@@ -312,7 +362,7 @@ const PopoverDemo = () => { location={curPostion} /> -

自定义目标元素

+

{translated.title4}

{ id="popid" onClick={clickCustomHandle} > - 自定义目标元素 + {translated.title4} -

自定义颜色

+

{translated.contentColor}

{ }} >
diff --git a/src/packages/popover/demo.tsx b/src/packages/popover/demo.tsx index 2496a1a6ce..0f69ba242d 100644 --- a/src/packages/popover/demo.tsx +++ b/src/packages/popover/demo.tsx @@ -113,19 +113,24 @@ const PopoverDemo = () => { { key: 'key1', name: 'option1', - icon: ( - - ), + icon: , + action: { + icon: , + onClick: (e: any) => { + console.log('onclick 1') + e.stopPropagation() + }, + }, }, { key: 'key2', name: 'option2', - icon: , + icon: , }, { key: 'key3', name: 'option3', - icon: , + icon: , }, ] const itemListDisabled = [ diff --git a/src/packages/popover/doc.en-US.md b/src/packages/popover/doc.en-US.md index 84b04aeefd..9cd4a8e898 100644 --- a/src/packages/popover/doc.en-US.md +++ b/src/packages/popover/doc.en-US.md @@ -521,6 +521,7 @@ The List property is an array of objects, each object in the array is configured | icon | @nutui/icons-react name | `ReactNode` | `-` | | disabled | whether to disable | `boolean` | `false` | | className | Add additional class names for corresponding options | `string` | `-` | +| action | Add additional actions for corresponding options | `{ icon?: React.ReactNode; onClick?: (e: any) => void }` | `-` | ## Theming @@ -531,12 +532,14 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | | \--nutui-popover-border-radius | The rounded corner value of the border of the popover content area | `8px` | -| \--nutui-popover-font-size | The font-size value of the popover content area | `14px` | -| \--nutui-popover-menu-item-hover-background-color | The background color of the finger click menu option | `#fff` | -| \--nutui-popover-menu-item-hover-text-color | Text color for finger click menu options | `#1a1a1a` | -| \--nutui-popover-primary-text-color | Text color of options area | `#ffffff` | -| \--nutui-popover-content-background-color | The background color of the options area | `#ffffff` | -| \--nutui-popover-white-background-color | Arrow colors for top, bottom, left and right | `#ffffff` | -| \--nutui-popover-border-bottom-color | The bottom border color of the options area | `rgba(229, 229, 229, 1)` | -| \--nutui-popover-disable-color | Option Disabled Colors | `rgba(154, 155, 157, 1)` | -| \--nutui-popover-menu-item-padding | The padding value of each item in the option area menu | `8px` | \ No newline at end of file +| \--nutui-popover-font-size | The font-size value of the popover content area | `12px` | +| \--nutui-popover-text-color | Text color of options area | `$color-title` | +| \--nutui-popover-content-background-color | The background color of the options area | `$white` | +| \--nutui-popover-hover-background-color | The background color of the finger click menu option | `#fff` | +| \--nutui-popover-hover-text-color | Text color for finger click menu options | `#1a1a1a` | +| \--nutui-popover-border-color| Arrow colors for top, bottom, left and right | `$white` | +| \--nutui-popover-divider-color | The bottom border color of the options area | `$color-border` | +| \--nutui-popover-disable-color | Option Disabled Colors | `$color-text-disabled` | +| \--nutui-popover-menu-item-padding | The padding value of each item in the option area menu | `8px` | + + diff --git a/src/packages/popover/doc.md b/src/packages/popover/doc.md index f706411833..bb2e703a2e 100644 --- a/src/packages/popover/doc.md +++ b/src/packages/popover/doc.md @@ -528,6 +528,7 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一 | icon | 参考 Icon 组件 | `ReactNode` | `-` | | disabled | 是否为禁用状态 | `boolean` | `false` | | className | 为对应选项添加额外的类名 | `string` | `-` | +| action | 为对应选项添加方法 | `{ icon?: React.ReactNode; onClick?: (e: any) => void }` | `-` | ## 主题定制 @@ -538,12 +539,12 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一 | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-popover-border-radius | popover 内容区的 border 的圆角值 | `8px` | -| \--nutui-popover-font-size | popover 内容区的 font-size 值 | `14px` | -| \--nutui-popover-menu-item-hover-background-color | 手指点击菜单选项选中的背景颜色 | `#fff` | -| \--nutui-popover-menu-item-hover-text-color | 手指点击菜单选项选中的文字颜色 | `#1a1a1a` | -| \--nutui-popover-primary-text-color | 选项区的文字颜色 | `#ffffff` | -| \--nutui-popover-content-background-color | 选项区的背景颜色 | `#ffffff` | -| \--nutui-popover-white-background-color | top、bottom、left 和 right 的箭头颜色 | `#ffffff` | -| \--nutui-popover-border-bottom-color | 选项区的底部 border 颜色 | `rgba(229, 229, 229, 1)` | -| \--nutui-popover-disable-color | 选项禁用的颜色 | `rgba(154, 155, 157, 1)` | -| \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | \ No newline at end of file +| \--nutui-popover-font-size | popover 内容区的 font-size 值 | `12px` | +| \--nutui-popover-text-color | 选项区的文字颜色 | `$color-title` | +| \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` | +| \--nutui-popover-hover-background-color | 手指点击菜单选项选中的背景颜色 | `#fff` | +| \--nutui-popover-hover-text-color | 手指点击菜单选项选中的文字颜色 | `#1a1a1a` | +| \--nutui-popover-border-color | top、bottom、left 和 right 的箭头颜色| `$white` | +| \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | +| \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` | +| \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | diff --git a/src/packages/popover/doc.taro.md b/src/packages/popover/doc.taro.md index 77c6e5ae0d..308b9c5a6f 100644 --- a/src/packages/popover/doc.taro.md +++ b/src/packages/popover/doc.taro.md @@ -527,6 +527,7 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一 | icon | 参考 Icon 组件 | `ReactNode` | `-` | | disabled | 是否为禁用状态 | `boolean` | `false` | | className | 为对应选项添加额外的类名 | `string` | `-` | +| action | 为对应选项添加方法 | `{ icon?: React.ReactNode; onClick?: (e: any) => void }` | `-` | ## 主题定制 @@ -537,12 +538,12 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一 | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-popover-border-radius | popover 内容区的 border 的圆角值 | `8px` | -| \--nutui-popover-font-size | popover 内容区的 font-size 值 | `14px` | -| \--nutui-popover-menu-item-hover-background-color | 手指点击菜单选项的选中的背景颜色 | `#fff` | -| \--nutui-popover-menu-item-hover-text-color | 手指点击菜单选项的选中的文字颜色 | `#1a1a1a` | -| \--nutui-popover-primary-text-color | 选项区的文字颜色 | `#ffffff` | -| \--nutui-popover-content-background-color | 选项区的背景颜色 | `#ffffff` | -| \--nutui-popover-white-background-color | top、bottom、left 和 right 的箭头颜色 | `#ffffff` | -| \--nutui-popover-border-bottom-color | 选项区的底部 border 颜色 | `rgba(229, 229, 229, 1)` | -| \--nutui-popover-disable-color | 选项禁用的颜色 | `rgba(154, 155, 157, 1)` | -| \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | \ No newline at end of file +| \--nutui-popover-font-size | popover 内容区的 font-size 值 | `12px` | +| \--nutui-popover-text-color | 选项区的文字颜色 | `$color-title` | +| \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` | +| \--nutui-popover-hover-background-color | 手指点击菜单选项选中的背景颜色 | `#fff` | +| \--nutui-popover-hover-text-color | 手指点击菜单选项选中的文字颜色 | `#1a1a1a` | +| \--nutui-popover-border-color | top、bottom、left 和 right 的箭头颜色| `$white` | +| \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | +| \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` | +| \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | diff --git a/src/packages/popover/doc.zh-TW.md b/src/packages/popover/doc.zh-TW.md index 3c9774a5b4..2db3d2cf25 100644 --- a/src/packages/popover/doc.zh-TW.md +++ b/src/packages/popover/doc.zh-TW.md @@ -528,6 +528,7 @@ List 屬性是一個由對象構成的數組，數組中的每個對象配置一 | icon | 參考 Icon 組件 | `ReactNode` | `-` | | disabled | 是否為禁用狀態 | `boolean` | `false` | | className | 為對應選項添加額外的類名 | `string` | `-` | +| action | 為對應選項添加方法 | `{ icon?: React.ReactNode; onClick?: (e: any) => void }` | `-` | ## 主題定製 @@ -538,12 +539,12 @@ List 屬性是一個由對象構成的數組，數組中的每個對象配置一 | 名稱 | 說明 | 默認值 | | --- | --- | --- | | \--nutui-popover-border-radius | popover 內容區的 border 的圓角值 | `8px` | -| \--nutui-popover-font-size | popover 內容區的 font-size 值 | `14px` | -| \--nutui-popover-menu-item-hover-background-color | 手指點擊菜單選項選中的背景顏色 | `#fff` | -| \--nutui-popover-menu-item-hover-text-color | 手指點擊菜單選項選中的文字顏色 | `#1a1a1a` | -| \--nutui-popover-primary-text-color | 選項區的文字顏色 | `#ffffff` | -| \--nutui-popover-content-background-color | 選項區的背景顏色 | `#ffffff` | -| \--nutui-popover-white-background-color | top、bottom、left 和 right 的箭頭顏色 | `#ffffff` | -| \--nutui-popover-border-bottom-color | 選項區的底部 border 顏色 | `rgba(229, 229, 229, 1)` | -| \--nutui-popover-disable-color | 選項禁用的顏色 | `rgba(154, 155, 157, 1)` | -| \--nutui-popover-menu-item-padding | 選項區菜單每一項的 padding 值 | `8px` | \ No newline at end of file +| \--nutui-popover-font-size | popover 內容區的 font-size 值 | `12px` | +| \--nutui-popover-text-color | 選項區的文字顏色 | `$color-title` | +| \--nutui-popover-content-background-color | 選項區的背景顏色 | `$white` | +| \--nutui-popover-hover-background-color | 手指點擊菜單選項選中的背景顏色 | `#fff` | +| \--nutui-popover-hover-text-color | 手指點擊菜單選項選中的文字顏色 | `#1a1a1a` | +| \--nutui-popover-border-color | top、bottom、left 和 right 的箭頭顏色| `$white` | +| \--nutui-popover-divider-color | 選項區的底部 border 顏色 | `$color-border` | +| \--nutui-popover-disable-color | 選項禁用的顏色 | `$color-text-disabled` | +| \--nutui-popover-menu-item-padding | 選項區菜單每一項的 padding 值 | `8px` | diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index c997c72d06..ac86275157 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -13,14 +13,14 @@ &-top { bottom: 0; - border-top-color: $popover-white-background-color; + border-top-color: $popover-border-color; border-bottom-width: 0; margin-bottom: -8px; } &-bottom { top: 0px; - border-bottom-color: $popover-white-background-color; + border-bottom-color: $popover-border-color; border-top-width: 0; margin-top: -8px; @@ -42,7 +42,7 @@ &-left { right: 0px; - border-left-color: $popover-white-background-color; + border-left-color: $popover-border-color; border-right-width: 0; margin-right: -8px; @@ -64,7 +64,7 @@ &-right { left: 0px; - border-right-color: $popover-white-background-color; + border-right-color: $popover-border-color; border-left-width: 0; margin-left: -8px; @@ -92,7 +92,7 @@ font-size: $popover-font-size; font-family: PingFangSC; font-weight: normal; - color: $popover-primary-text-color; + color: $popover-text-color; box-shadow: 0 2px 12px #3232331f; max-height: initial; overflow-y: initial; @@ -104,10 +104,12 @@ } .nut-popover-menu-item { + position: relative; display: flex; align-items: center; + justify-content: center; padding: $popover-menu-item-padding; - border-bottom: 1px solid $popover-border-bottom-color; + border-bottom: 1px solid $popover-divider-color; &:last-child { margin-bottom: 2px; @@ -116,8 +118,8 @@ &:hover { cursor: pointer; - color: $popover-menu-item-hover-text-color; - background-color: $popover-menu-item-hover-background-color; + color: $popover-hover-text-color; + background-color: $popover-hover-background-color; } &:hover:nth-of-type(2) { @@ -128,9 +130,31 @@ border-radius: 0px 0px 8px 8px; } - .nut-popover-menu-item-name { + &-icon { + display: flex; + justify-content: center; + align-items: center; + width: 12px; + height: 12px; + font-size: 12px; + } + + &-name { width: 100%; word-break: keep-all; + margin-left: 4px; + } + + &-action-icon { + position: absolute; + right: $popover-menu-item-padding; + display: flex; + justify-content: center; + align-items: center; + width: 12px; + height: 12px; + font-size: 12px; + color: $text-color; } &.nut-popover-menu-disabled { @@ -155,13 +179,11 @@ right: 16px; transform: translateX(0%); } - right: 0; } &--top-start { left: 0; - .nut-popover-arrow--top-start { left: 16px; transform: translateX(0%); diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 17b08a0944..1a59f08eaa 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -33,6 +33,7 @@ export interface List { icon?: React.ReactNode disabled?: boolean className?: string + action?: { icon?: React.ReactNode; onClick?: (e: any) => void } } export interface PopoverProps extends PopupProps { @@ -100,7 +101,6 @@ export const Popover: FunctionComponent< const popoverRef = useRef(null) const popoverContentRef = useRef(null) - const [showPopup, setShowPopup] = useState(false) const [elWidth, setElWidth] = useState(0) const [elHeight, setElHeight] = useState(0) @@ -204,7 +204,6 @@ export const Popover: FunctionComponent< const { width, height, left, top, right } = rootPosition const direction = location.split('-')[0] const skew = location.split('-')[1] - let cross = 0 let parallel = 0 if (Array.isArray(offset) && offset.length === 2) { @@ -342,8 +341,18 @@ export const Popover: FunctionComponent< key={item.key || index} onClick={() => handleSelect(item, index)} > - {item.icon ? item.icon : null} + {item.icon ? ( + {item.icon} + ) : null}
{item.name}
+ {item.action && item.action.icon ? ( + item.action?.onClick?.(e)} + > + {item.action.icon} + + ) : null}
) })} diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx index 159bfb19d2..2aaaedcf5c 100644 --- a/src/packages/popover/popover.tsx +++ b/src/packages/popover/popover.tsx @@ -33,6 +33,7 @@ export interface List { icon?: React.ReactNode disabled?: boolean className?: string + action?: { icon?: React.ReactNode; onClick?: (e: any) => void } } export interface PopoverProps extends PopupProps { @@ -327,8 +328,18 @@ export const Popover: FunctionComponent< key={item.key || index} onClick={() => handleSelect(item, index)} > - {item.icon ? item.icon : null} + {item.icon ? ( + {item.icon} + ) : null}
{item.name}
+ {item.action && item.action.icon ? ( + item.action?.onClick?.(e)} + > + {item.action.icon} + + ) : null} ) })} diff --git a/src/packages/tour/__test__/tour.spec.tsx b/src/packages/tour/__test__/tour.spec.tsx index 210dbde5dd..3be067968e 100644 --- a/src/packages/tour/__test__/tour.spec.tsx +++ b/src/packages/tour/__test__/tour.spec.tsx @@ -71,8 +71,8 @@ test('custom style', () => { location="bottom-end" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[0, 0]} maskWidth={50} @@ -96,8 +96,8 @@ test('custom offset', () => { location="bottom-end" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> @@ -118,8 +118,8 @@ test('slot render', () => { offset={[8, 8]} style={{ '--nutui-popover-content-background-color': 'rgb(75, 76, 77)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(75, 76, 77)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(75, 76, 77)', }} >
diff --git a/src/packages/tour/demo.taro.tsx b/src/packages/tour/demo.taro.tsx index 424dab7c4a..aee96f7f10 100644 --- a/src/packages/tour/demo.taro.tsx +++ b/src/packages/tour/demo.taro.tsx @@ -190,8 +190,8 @@ const TourDemo = () => { location="bottom-end" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[0, 0]} maskWidth={50} @@ -231,8 +231,8 @@ const TourDemo = () => { location="bottom-end" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> @@ -259,8 +259,8 @@ const TourDemo = () => { offset={[8, 8]} style={{ '--nutui-popover-content-background-color': 'rgb(75, 76, 77)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(75, 76, 77)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(75, 76, 77)', }} closeOnOverlayClick={false} > diff --git a/src/packages/tour/demo.tsx b/src/packages/tour/demo.tsx index 2c1c2ec8df..91eeb2be75 100644 --- a/src/packages/tour/demo.tsx +++ b/src/packages/tour/demo.tsx @@ -186,8 +186,8 @@ const TourDemo = () => { location="bottom-end" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[0, 0]} maskWidth={50} @@ -227,8 +227,8 @@ const TourDemo = () => { location="bottom-end" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> @@ -255,8 +255,8 @@ const TourDemo = () => { offset={[8, 8]} style={{ '--nutui-popover-content-background-color': 'rgb(75, 76, 77)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(75, 76, 77)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(75, 76, 77)', }} closeOnOverlayClick={false} > diff --git a/src/packages/tour/doc.en-US.md b/src/packages/tour/doc.en-US.md index 43985ef45a..bd012b5b36 100644 --- a/src/packages/tour/doc.en-US.md +++ b/src/packages/tour/doc.en-US.md @@ -106,8 +106,8 @@ const App = () => { location="bottom-end" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[0, 0]} maskWidth={50} @@ -176,8 +176,8 @@ const App = () => { location="bottom-end" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> @@ -232,8 +232,8 @@ const App = () => { location="bottom-end" style={{ '--nutui-popover-content-background-color': 'rgb(75, 76, 77)', - '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(75, 76, 77)', + '--nutui-popover-text-color': 'rgb(255, 255, 255)', + '--nutui-popover-border-color': 'rgb(75, 76, 77)', }} closeOnOverlayClick={false} > diff --git a/src/packages/tour/doc.md b/src/packages/tour/doc.md index a373f0ba91..108056dd6a 100644 --- a/src/packages/tour/doc.md +++ b/src/packages/tour/doc.md @@ -107,7 +107,7 @@ const App = () => { style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[0, 0]} maskWidth={50} @@ -177,7 +177,7 @@ const App = () => { style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> @@ -233,7 +233,7 @@ const App = () => { style={{ '--nutui-popover-content-background-color': 'rgb(75, 76, 77)', '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(75, 76, 77)', + '--nutui-popover-border-color': 'rgb(75, 76, 77)', }} closeOnOverlayClick={false} > diff --git a/src/packages/tour/doc.taro.md b/src/packages/tour/doc.taro.md index a421b10430..be6950ec05 100644 --- a/src/packages/tour/doc.taro.md +++ b/src/packages/tour/doc.taro.md @@ -107,7 +107,7 @@ const App = () => { style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[0, 0]} maskWidth={50} @@ -177,7 +177,7 @@ const App = () => { style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(255, 0, 0)', + '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> @@ -233,7 +233,7 @@ const App = () => { style={{ '--nutui-popover-content-background-color': 'rgb(75, 76, 77)', '--nutui-popover-primary-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-white-background-color': 'rgb(75, 76, 77)', + '--nutui-popover-border-color': 'rgb(75, 76, 77)', }} closeOnOverlayClick={false} > diff --git a/src/styles/variables.scss b/src/styles/variables.scss index eff1b59622..263155ec47 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1471,68 +1471,33 @@ $badge-dot-width: var(--nutui-badge-dot-width, 7px) !default; //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default; -$popover-font-size: var(--nutui-popover-font-size, $font-size-base) !default; -$popover-menu-item-height: var(--nutui-popover-menu-item-height, 30px) !default; -$popover-menu-item-hover-background-color: var( - --nutui-popover-menu-item-hover-background-color, - #fff -) !default; -$popover-menu-item-hover-text-color: var( - --nutui-popover-menu-item-hover-text-color, - #1a1a1a -) !default; -$popover-menu-item-border-width: var( - --nutui-popover-menu-item-border-width, - 80% -) !default; -$popover-menu-item-border-height: var( - --nutui-popover-menu-item-border-height, - 1px -) !default; -$popover-menu-item-border-left: var( - --nutui-popover-menu-item-border-left, - 10% -) !default; -$popover-menu-item-border-bottom: var( - --nutui-popover-menu-item-border-bottom, - 2% -) !default; -$popover-white-background-color: var( - --nutui-popover-white-background-color, - $gray6 -) !default; -$popover-dark-background-color: var( - --nutui-popover-dark-background-color, - rgba(75, 76, 77, 1) -) !default; +$popover-font-size: var(--nutui-popover-font-size, $font-size-small) !default; +$popover-border-color: var(--nutui-popover-border-color, #ffffff) !default; $popover-content-background-color: var( --nutui-popover-content-background-color, - $gray6 + #ffffff ) !default; -$popover-border-bottom-color: var( - --nutui-popover-border-bottom-color, - rgba(229, 229, 229, 1) +$popover-text-color: var(--nutui-popover-text-color, #1a1a1a) !default; +$popover-hover-background-color: var( + --nutui-popover-hover-background-color, + #fff ) !default; -$popover-primary-text-color: var( - --nutui-popover-primary-text-color, - $gray1 +$popover-hover-text-color: var( + --nutui-popover-hover-text-color, + #1a1a1a ) !default; $popover-disable-color: var( --nutui-popover-disable-color, rgba(154, 155, 157, 1) ) !default; +$popover-divider-color: var( + --nutui-popover-divider-color, + $color-border +) !default; $popover-menu-item-padding: var( --nutui-popover-menu-item-padding, 8px ) !default; -$popover-menu-item-margin: var( - --nutui-popover-menu-item-margin, - 0 8px -) !default; -$popover-menu-name-line-height: var( - --nutui-popover-menu-name-line-height, - normal -) !default; //progress（✅） $progress-height: var(--nutui-progress-height, 10px) !default;