feat: pagination 增加 few模式。

src/packages/pagination/demo.taro.tsx

@@ -8,6 +8,7 @@ import Header from '@/sites/components/header'
 interface T {
   basic: string
   simple: string
+  few: string
   ellipse: string
   custom: string
   uncontrolled: string
@@ -18,20 +19,23 @@ const PaginationDemo = () => {
     'zh-CN': {
       basic: '基础用法',
       simple: '简单模式',
+      few: '少量模式',
       ellipse: '显示省略号',
       custom: '自定义按钮',
       uncontrolled: '非受控方式',
     },
     'zh-TW': {
       basic: '基礎用法',
       simple: '簡單模式',
+      few: '少量模式',
       ellipse: '顯示省略號',
       custom: '自定義按鈕',
       uncontrolled: '非受控方式',
     },
     'en-US': {
       basic: 'Basic usage',
       simple: 'Simple mode',
+      few: 'Few Mode',
       ellipse: 'Show ellipsis',
       custom: 'Custom button',
       uncontrolled: 'Uncontrolled mode',
@@ -87,6 +91,16 @@ const PaginationDemo = () => {
             onChange={pageChange2}
           />
         </Cell>
+        <h2>{translated.few}</h2>
+        <Cell>
+          <Pagination
+            value={currentPage2}
+            total={12}
+            pageSize={1}
+            mode="few"
+            onChange={pageChange2}
+          />
+        </Cell>
         <h2>{translated.ellipse}</h2>
         <Cell>
           <Pagination

src/packages/pagination/demo.tsx

@@ -7,6 +7,7 @@ import { useTranslate } from '../../sites/assets/locale'
 interface T {
   basic: string
   simple: string
+  few: string
   ellipse: string
   custom: string
   uncontrolled: string
@@ -17,20 +18,23 @@ const PaginationDemo = () => {
     'zh-CN': {
       basic: '基础用法',
       simple: '简单模式',
+      few: '少量模式',
       ellipse: '显示省略号',
       custom: '自定义按钮',
       uncontrolled: '非受控方式',
     },
     'zh-TW': {
       basic: '基礎用法',
       simple: '簡單模式',
+      few: '少量模式',
       ellipse: '顯示省略號',
       custom: '自定義按鈕',
       uncontrolled: '非受控方式',
     },
     'en-US': {
       basic: 'Basic usage',
       simple: 'Simple mode',
+      few: 'Few Mode',
       ellipse: 'Show ellipsis',
       custom: 'Custom button',
       uncontrolled: 'Uncontrolled mode',
@@ -84,6 +88,16 @@ const PaginationDemo = () => {
           onChange={pageChange2}
         />
       </Cell>
+      <h2>{translated.few}</h2>
+      <Cell>
+        <Pagination
+          value={currentPage2}
+          total={12}
+          pageSize={1}
+          mode="few"
+          onChange={pageChange2}
+        />
+      </Cell>
       <h2>{translated.ellipse}</h2>
       <Cell>
         <Pagination

src/packages/pagination/doc.en-US.md

@@ -198,8 +198,14 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-pagination-color | font color  |  `$color-primary` |
 | \--nutui-pagination-font-size | font size | `$font-size` |
 | \--nutui-pagination-item-border-color | border color  | `$color-border` |
+| \--nutui-pagination-active-background-color | background color of current page | `$color-primary` |
 | \--nutui-pagination-disable-color | disable color | `$color-text-disable` |
 | \--nutui-pagination-disable-background-color | disable background color | `$color-text-disable` |
 | \--nutui-pagination-item-border-width | border width | `1px` |
 | \--nutui-pagination-item-border-radius | border radius  | `2px` |
-| \--nutui-pagination-prev-next-padding | padding  | `0 11px` |
+| \--nutui-pagination-prev-next-padding | padding  | `0 11px` |
+| \--nutui-pagination-few-width | Few mode width | `40px` |
+| \--nutui-pagination-few-height | Few mode height | `20px` |
+| \--nutui-pagination-few-radius| Few mode radius | `12px` |
+| \--nutui-pagination-few-background-color | Few mode background color | `var(--nutui-black-7)` |
+| \--nutui-pagination-few-active-background-color | Few mode background color of current page | `var(--nutui-black-5)` |

src/packages/pagination/doc.md

@@ -198,8 +198,14 @@ export default App;
 | \--nutui-pagination-color | 页码字色 |  `$color-primary` |
 | \--nutui-pagination-font-size | 页码字号 | `$font-size` |
 | \--nutui-pagination-item-border-color | 边框颜色 | `$color-border` |
+| \--nutui-pagination-active-background-color | 当前页码的背景色 | `$color-primary` |
 | \--nutui-pagination-disable-color | 不可用色 | `$color-text-disable` |
 | \--nutui-pagination-disable-background-color | 不可用背景色 | `$color-text-disable` |
 | \--nutui-pagination-item-border-width | 边框宽度 | `1px` |
 | \--nutui-pagination-item-border-radius | 边框圆角 | `2px` |
-| \--nutui-pagination-prev-next-padding | padding 值 | `0 11px` |
+| \--nutui-pagination-prev-next-padding | padding 值 | `0 11px` |
+| \--nutui-pagination-few-width | Few模式下的宽度 | `40px` |
+| \--nutui-pagination-few-height | Few模式下的高度 | `20px` |
+| \--nutui-pagination-few-radius| Few模式下的圆角 | `12px` |
+| \--nutui-pagination-few-background-color | Few模式下的默认背景色 | `var(--nutui-black-7)` |
+| \--nutui-pagination-few-active-background-color | Few模式下的当前选中的背景色 | `var(--nutui-black-5)` |

src/packages/pagination/doc.taro.md

@@ -197,8 +197,14 @@ export default App;
 | \--nutui-pagination-color | 页码字色 |  `$color-primary` |
 | \--nutui-pagination-font-size | 页码字号 | `$font-size` |
 | \--nutui-pagination-item-border-color | 边框颜色 | `$color-border` |
+| \--nutui-pagination-active-background-color | 当前页码的背景色 | `$color-primary` |
 | \--nutui-pagination-disable-color | 不可用色 | `$color-text-disable` |
 | \--nutui-pagination-disable-background-color | 不可用背景色 | `$color-text-disable` |
 | \--nutui-pagination-item-border-width | 边框宽度 | `1px` |
 | \--nutui-pagination-item-border-radius | 边框圆角 | `2px` |
-| \--nutui-pagination-prev-next-padding | padding 值 | `0 11px` |
+| \--nutui-pagination-prev-next-padding | padding 值 | `0 11px` |
+| \--nutui-pagination-few-width | Few模式下的宽度 | `40px` |
+| \--nutui-pagination-few-height | Few模式下的高度 | `20px` |
+| \--nutui-pagination-few-radius| Few模式下的圆角 | `12px` |
+| \--nutui-pagination-few-background-color | Few模式下的默认背景色 | `var(--nutui-black-7)` |
+| \--nutui-pagination-few-active-background-color | Few模式下的当前选中的背景色 | `var(--nutui-black-5)` |

src/packages/pagination/doc.zh-TW.md

@@ -198,8 +198,14 @@ export default App;
 | \--nutui-pagination-color | 頁碼字色 |  `$color-primary` |
 | \--nutui-pagination-font-size | 頁碼字號 | `$font-size` |
 | \--nutui-pagination-item-border-color | 邊框顏色 | `$color-border` |
+| \--nutui-pagination-active-background-color | 當前頁碼的背景色 | `$color-primary` |
 | \--nutui-pagination-disable-color | 不可用色 | `$color-text-disable` |
 | \--nutui-pagination-disable-background-color | 不可用背景色 | `$color-text-disable` |
 | \--nutui-pagination-item-border-width | 邊框寬度 | `1px` |
 | \--nutui-pagination-item-border-radius | 邊框圓角 | `2px` |
-| \--nutui-pagination-prev-next-padding | padding 值 | `0 11px` |
+| \--nutui-pagination-prev-next-padding | padding 值 | `0 11px` |
+| \--nutui-pagination-few-width | Few模式下的寬度 | `40px` |
+| \--nutui-pagination-few-height | Few模式下的高度 | `20px` |
+| \--nutui-pagination-few-radius| Few模式下的圓角 | `12px` |
+| \--nutui-pagination-few-background-color | Few模式下的默認背景色 | `var(--nutui-black-7)` |
+| \--nutui-pagination-few-active-background-color | Few模式下的當前選中的背景色 | `var(--nutui-black-5)` |

src/packages/pagination/pagination.scss

@@ -56,4 +56,27 @@
     background-color: $pagination-disable-background-color;
     cursor: not-allowed;
   }
+
+  &-few {
+    width: $pagination-few-width;
+    height: $pagination-few-height;
+    display: flex;
+    font-size: $font-size-xs;
+    color: $color-primary-text;
+    background-color: $pagination-few-background-color;
+    border-radius: $pagination-few-radius;
+    &-active,
+    &-default {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $pagination-few-height;
+      height: $pagination-few-height;
+    }
+    &-active {
+      border-radius: $pagination-few-radius;
+      font-size: $font-size-small;
+      background-color: $pagination-few-active-background-color;
+    }
+  }
 }

src/packages/pagination/pagination.taro.tsx

@@ -7,7 +7,7 @@ import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 export interface PaginationProps extends BasicComponent {
   defaultValue: number
   value: number
-  mode: 'multi' | 'simple'
+  mode: 'multi' | 'simple' | 'few'
   prev: ReactNode
   next: ReactNode
   total: number
@@ -106,51 +106,64 @@ export const Pagination: FunctionComponent<
 
   return (
     <div className={classNames(classPrefix, className)} {...rest}>
-      <div
-        className={classNames(
-          `${classPrefix}__prev`,
-          mode === 'multi' ? '' : 'simple-border',
-          currentPage === 1 ? 'disabled' : ''
-        )}
-        onClick={(e) => handleSelectPage(currentPage - 1)}
-      >
-        {prev || locale.pagination.prev}
-      </div>
-      {mode === 'multi' && (
-        <div className={`${classPrefix}__contain`}>
-          {pages.map((item: any, index: number) => {
-            return (
-              <div
-                key={`${index}pagination`}
-                className={classNames(`${classPrefix}__item`, {
-                  active: item.number === currentPage,
-                })}
-                onClick={(e) => {
-                  item.number !== currentPage && handleSelectPage(item.number)
-                }}
-              >
-                {itemRender ? itemRender(item) : item.text}
+      {(mode === 'multi' || mode === 'simple') && (
+        <>
+          <div
+            className={classNames(
+              `${classPrefix}__prev`,
+              mode === 'multi' ? '' : 'simple-border',
+              currentPage === 1 ? 'disabled' : ''
+            )}
+            onClick={(e) => handleSelectPage(currentPage - 1)}
+          >
+            {prev || locale.pagination.prev}
+          </div>
+          {mode === 'multi' && (
+            <div className={`${classPrefix}__contain`}>
+              {pages.map((item: any, index: number) => {
+                return (
+                  <div
+                    key={`${index}pagination`}
+                    className={classNames(`${classPrefix}__item`, {
+                      active: item.number === currentPage,
+                    })}
+                    onClick={(e) => {
+                      item.number !== currentPage &&
+                        handleSelectPage(item.number)
+                    }}
+                  >
+                    {itemRender ? itemRender(item) : item.text}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+          {mode === 'simple' && (
+            <div className={`${classPrefix}__contain`}>
+              <div className={`${classPrefix}__simple`}>
+                {currentPage}/{pageCount}
               </div>
-            )
-          })}
-        </div>
+            </div>
+          )}
+          <div
+            className={classNames(
+              `${classPrefix}__next`,
+              currentPage >= pageCount ? 'disabled' : ''
+            )}
+            onClick={(e) => handleSelectPage(currentPage + 1)}
+          >
+            {next || locale.pagination.next}
+          </div>
+        </>
       )}
-      {mode === 'simple' && (
-        <div className={`${classPrefix}__contain`}>
-          <div className={`${classPrefix}__simple`}>
-            {currentPage}/{pageCount}
+      {mode === 'few' && (
+        <>
+          <div className={`${classPrefix}-few`}>
+            <div className={`${classPrefix}-few-active`}>{2}</div>
+            <div className={`${classPrefix}-few-default`}>{8}</div>
           </div>
-        </div>
+        </>
       )}
-      <div
-        className={classNames(
-          `${classPrefix}__next`,
-          currentPage >= pageCount ? 'disabled' : ''
-        )}
-        onClick={(e) => handleSelectPage(currentPage + 1)}
-      >
-        {next || locale.pagination.next}
-      </div>
     </div>
   )
 }