fix: popover dark and maxwidth

jdf2e · Dec 12, 2024 · 3bfa151 · 3bfa151
1 parent cb2bf37
commit 3bfa151
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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%);
@@ -227,7 +221,18 @@
   color: $popover-content-background-color;
 
   .nut-popover-arrow {
-    border-bottom-color: $popover-text-color;
+    &-top {
+      border-top-color: $popover-text-color;
+    }
+    &-bottom {
+      border-bottom-color: $popover-text-color;
+    }
+    &-left {
+      border-left-color: $popover-text-color;
+    }
+    &-right {
+      border-right-color: $popover-text-color;
+    }
   }
 
   .nut-popover-content {

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -1625,8 +1625,8 @@ $badge-dot-border: var(--nutui-badge-dot-border, 0px solid $color-primary-text);
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;
-$popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default;
 $popover-border-color: var(--nutui-popover-border-color, #ffffff) !default;
+$popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default;
 $popover-content-background-color: var(
   --nutui-popover-content-background-color,
   #ffffff
@@ -1652,6 +1652,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;