Bläddra i källkod

fix: add disabled selected style to disabled pagination (#1645)

YannLynn 2 år sedan
förälder
incheckning
a922fbef5a

+ 9 - 0
packages/semi-foundation/pagination/pagination.scss

@@ -105,6 +105,15 @@ $module: #{$prefix}-page;
                 background-color: transparent;
                 color: $color-pagination_item-text-disabled;
             }
+
+            &-active {
+                background-color: $color-pagination_item-bg-selected-disabled;
+                font-weight: $font-pagination_item_active-fontWeight;
+
+                &:hover {
+                    background-color: $color-pagination_item-bg-selected-disabled;
+                }
+            }
         }
     }
 

+ 1 - 0
packages/semi-foundation/pagination/variables.scss

@@ -10,6 +10,7 @@ $color-pagination_item-bg-active: var(--semi-color-fill-1); // 翻页器 页码
 $color-pagination_item-text-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态文字颜色
 $color-pagination_item-icon-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态图标颜色
 $color-pagination_item-bg-disabled: transparent; // 翻页器 页码 禁用态背景颜色
+$color-pagination_item-bg-selected-disabled: var(--semi-color-disabled-fill); // 翻页器 页码 选中禁用态背景颜色
 $color-pagination_item-text-selected: var(--semi-color-primary); // 翻页器 页码 选中态文字颜色
 $color-pagination_item-bg-selected: var(--semi-color-primary-light-default); // 翻页器 页码 选中态背景颜色
 $color-pagination_quickjump_text-disabled: var(--semi-color-disabled-text); // 翻页器 快速跳转禁用态文字颜色

+ 2 - 1
packages/semi-ui/pagination/index.tsx

@@ -337,8 +337,9 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
 
         return pageList.map((page, i) => {
             const pageListClassName = classNames(`${prefixCls}-item`, {
-                [`${prefixCls}-item-active`]: currentPage === page && !disabled,
+                [`${prefixCls}-item-active`]: currentPage === page,
                 [`${prefixCls}-item-all-disabled`]: disabled,
+                [`${prefixCls}-item-all-disabled-active`]: currentPage === page && disabled,
                 // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
             });
             const pageEl = (