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 0f192edd8c..3c0fc7df1c 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;