From 229b03820a35fca23f2baab313f1567082d2eb83 Mon Sep 17 00:00:00 2001 From: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com> Date: Thu, 12 Dec 2024 10:06:37 +0800 Subject: [PATCH] =?UTF-8?q?feat(popover):=20=E5=A2=9E=E5=8A=A0=E6=9C=80?= =?UTF-8?q?=E5=A4=A7=E5=AE=BD=E5=BA=A6=E8=AE=BE=E7=BD=AE=EF=BC=8C=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E6=96=87=E6=9C=AC=E8=B6=85=E8=BF=87=E6=9C=80=E5=A4=A7?= =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E6=97=B6=EF=BC=8C=E6=8D=A2=E8=A1=8C=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E3=80=82=20(#2851)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: dark 模式下arrow 未配置 * feat(Popover): 增加最大值限定 * docs: 文档 * fix: 文档修改 * fix: 修复宽度问题 --- src/packages/popover/doc.en-US.md | 1 + src/packages/popover/doc.md | 1 + src/packages/popover/doc.taro.md | 1 + src/packages/popover/doc.zh-TW.md | 1 + src/packages/popover/popover.scss | 14 ++++---------- src/styles/variables.scss | 1 + 6 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/packages/popover/doc.en-US.md b/src/packages/popover/doc.en-US.md index 5344f61a68..2a40cedeef 100644 --- a/src/packages/popover/doc.en-US.md +++ b/src/packages/popover/doc.en-US.md @@ -165,3 +165,4 @@ The component provides the following CSS variables, which can be used to customi | \--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` | +| \--nutui-popover-menu-item-width | The width value of each item in the options | `160px` | diff --git a/src/packages/popover/doc.md b/src/packages/popover/doc.md index c2ee46972d..d9c18016d1 100644 --- a/src/packages/popover/doc.md +++ b/src/packages/popover/doc.md @@ -167,3 +167,4 @@ PopoverList 属性是一个由对象构成的数组，数组中的每个对象 | \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | | \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` | | \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | +| \--nutui-popover-menu-item-width | 选项区菜单每一项宽度值，超过宽度值后，会折行展示，保障信息的完整性 | `160px` | diff --git a/src/packages/popover/doc.taro.md b/src/packages/popover/doc.taro.md index ae32d86afa..0eca49b5e2 100644 --- a/src/packages/popover/doc.taro.md +++ b/src/packages/popover/doc.taro.md @@ -158,3 +158,4 @@ PopoverList 属性是一个由对象构成的数组，数组中的每个对象 | \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | | \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` | | \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | +| \--nutui-popover-menu-item-width | 选项区菜单每一项宽度值，超过宽度值后，会折行展示，保障信息的完整性 | `160px` | diff --git a/src/packages/popover/doc.zh-TW.md b/src/packages/popover/doc.zh-TW.md index 6e79010b9b..8dfac8902c 100644 --- a/src/packages/popover/doc.zh-TW.md +++ b/src/packages/popover/doc.zh-TW.md @@ -167,3 +167,4 @@ PopoverList 屬性是一個由對象構成的數組，數組中的每個對象 | \--nutui-popover-divider-color | 選項區的底部 border 顏色 | `$color-border` | | \--nutui-popover-disable-color | 選項禁用的顏色 | `$color-text-disabled` | | \--nutui-popover-menu-item-padding | 選項區菜單每一項的 padding 值 | `8px` | +| \--nutui-popover-menu-item-width | 選項區菜單每一項寬度值，超過寬度值後，會折行展示，保障信息的完整性 | `160px` | diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index 417365e7db..213d067cf2 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -95,18 +95,14 @@ justify-content: center; padding: $popover-menu-item-padding; border-bottom: 1px solid $popover-divider-color; + max-width: $popover-menu-item-width; + word-wrap: break-word; &:last-child { margin-bottom: 0px; border-bottom: none; } - // &:hover:not(:only-child) { - // cursor: pointer; - // color: $popover-hover-text-color; - // background-color: $popover-hover-background-color; - // } - &:hover:nth-of-type(2) { border-radius: 8px 8px 0px 0px; } @@ -130,9 +126,10 @@ } &-name { - width: 100%; + width: calc(100% - 34px); word-break: keep-all; margin: 0 6px 0 4px; + flex: 1; } &-action-icon { @@ -172,7 +169,6 @@ &-top-start { left: 0; - .nut-popover-arrow-top-start { left: 16px; transform: translateX(0%); @@ -188,7 +184,6 @@ &-bottom-end { right: 0; - .nut-popover-arrow-bottom-end { right: 16px; transform: translateX(0%); @@ -197,7 +192,6 @@ &-bottom-start { left: 0; - .nut-popover-arrow-bottom-start { left: 16px; transform: translateX(0%); diff --git a/src/styles/variables.scss b/src/styles/variables.scss index c1c326b1ec..627b7e90f8 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1553,6 +1553,7 @@ $popover-menu-item-padding: var( --nutui-popover-menu-item-padding, 8px ) !default; +$popover-menu-item-width: var(--nutui-popover-menu-item-width, 160px) !default; //progress（✅） $progress-height: var(--nutui-progress-height, 10px) !default;