feat: pagination 增加 few模式。 (#1446)

jdf2e · Sep 15, 2023 · 5f175b2 · 5f175b2
1 parent 0fb5628
commit 5f175b2
Show file tree

Hide file tree

Showing 11 changed files with 349 additions and 93 deletions.
diff --git a/src/packages/pagination/demo.taro.tsx b/src/packages/pagination/demo.taro.tsx
@@ -8,6 +8,7 @@ import Header from '@/sites/components/header'
 interface T {
   basic: string
   simple: string
+  lite: string
   ellipse: string
   custom: string
   uncontrolled: string
@@ -18,20 +19,23 @@ const PaginationDemo = () => {
     'zh-CN': {
       basic: '基础用法',
       simple: '简单模式',
+      lite: '极简模式',
       ellipse: '显示省略号',
       custom: '自定义按钮',
       uncontrolled: '非受控方式',
     },
     'zh-TW': {
       basic: '基礎用法',
       simple: '簡單模式',
+      lite: '极简模式',
       ellipse: '顯示省略號',
       custom: '自定義按鈕',
       uncontrolled: '非受控方式',
     },
     'en-US': {
       basic: 'Basic usage',
       simple: 'Simple mode',
+      lite: 'lite Mode',
       ellipse: 'Show ellipsis',
       custom: 'Custom button',
       uncontrolled: 'Uncontrolled mode',
@@ -87,6 +91,16 @@ const PaginationDemo = () => {
             onChange={pageChange2}
           />
         </Cell>
+        <h2>{translated.lite}</h2>
+        <Cell>
+          <Pagination
+            value={currentPage2}
+            total={12}
+            pageSize={1}
+            mode="lite"
+            onChange={pageChange2}
+          />
+        </Cell>
         <h2>{translated.ellipse}</h2>
         <Cell>
           <Pagination

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

diff --git a/src/packages/pagination/doc.en-US.md b/src/packages/pagination/doc.en-US.md
@@ -73,6 +73,39 @@ export default App;
 
 :::
 
+
+### Lite Mode
+
+Pagination can be switched to lite mode with lite mode attribute, and you can use when it's swiper and so on.
+
+:::demo
+
+```tsx
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react';
+
+const App = () => {
+  const [currentPage2, setCurrentPage2] = useState(1)
+  const pageChange2 = (v: number) => {
+    const c = v
+    setCurrentPage2(c)
+  }
+  return (
+    <Pagination
+      value={currentPage2}
+      total={12}
+      pageSize={1}
+      mode="lite" 
+      onChange={pageChange2} 
+    />
+  )
+}
+export default App;
+```
+
+:::
+
+
 ### Show ellipses
 
 The ellipses button will display after with force-ellipses attribute, click it can jump quickly 
@@ -198,8 +231,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-lite-width | lite mode width | `40px` |
+| \--nutui-pagination-lite-height | lite mode height | `20px` |
+| \--nutui-pagination-lite-radius| lite mode radius | `12px` |
+| \--nutui-pagination-lite-background-color | lite mode background color | `var(--nutui-black-7)` |
+| \--nutui-pagination-lite-active-background-color | lite mode background color of current page | `var(--nutui-black-5)` |
diff --git a/src/packages/pagination/doc.md b/src/packages/pagination/doc.md
@@ -74,6 +74,38 @@ export default App;
 
 :::
 
+### 极简模式
+
+将 mode 设置为 "lite" 来切换到极简模式，可用于主图切换。
+
+
+:::demo
+
+```tsx
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react';
+
+const App = () => {
+  const [currentPage2, setCurrentPage2] = useState(1)
+  const pageChange2 = (v: number) => {
+    const c = v
+    setCurrentPage2(c)
+  }
+  return (
+    <Pagination
+      value={currentPage2}
+      total={12}
+      pageSize={1}
+      mode="lite" 
+      onChange={pageChange2} 
+    />
+  )
+}
+export default App;
+```
+
+:::
+
 ### 显示省略号
 
 设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。 
@@ -198,8 +230,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-lite-width | lite模式下的宽度 | `40px` |
+| \--nutui-pagination-lite-height | lite模式下的高度 | `20px` |
+| \--nutui-pagination-lite-radius| lite模式下的圆角 | `12px` |
+| \--nutui-pagination-lite-background-color | lite模式下的默认背景色 | `var(--nutui-black-7)` |
+| \--nutui-pagination-lite-active-background-color | lite模式下的当前选中的背景色 | `var(--nutui-black-5)` |
diff --git a/src/packages/pagination/doc.taro.md b/src/packages/pagination/doc.taro.md
@@ -73,6 +73,40 @@ export default App;
 
 :::
 
+
+### 极简模式
+
+将 mode 设置为 "lite" 来切换到极简模式，可用于主图切换。
+
+
+:::demo
+
+```tsx
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react-taro';
+
+const App = () => {
+  const [currentPage2, setCurrentPage2] = useState(1)
+  const pageChange2 = (v: number) => {
+    const c = v
+    setCurrentPage2(c)
+  }
+  return (
+    <Pagination
+      value={currentPage2}
+      total={12}
+      pageSize={1}
+      mode="lite" 
+      onChange={pageChange2} 
+    />
+  )
+}
+export default App;
+```
+
+:::
+
+
 ### 显示省略号
 
 设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。 
@@ -197,8 +231,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-lite-width | lite模式下的宽度 | `40px` |
+| \--nutui-pagination-lite-height | lite模式下的高度 | `20px` |
+| \--nutui-pagination-lite-radius| lite模式下的圆角 | `12px` |
+| \--nutui-pagination-lite-background-color | lite模式下的默认背景色 | `var(--nutui-black-7)` |
+| \--nutui-pagination-lite-active-background-color | lite模式下的当前选中的背景色 | `var(--nutui-black-5)` |
diff --git a/src/packages/pagination/doc.zh-TW.md b/src/packages/pagination/doc.zh-TW.md
@@ -74,6 +74,40 @@ export default App;
 
 :::
 
+
+### 極簡模式
+
+將 mode 設置為 "lite" 來切換到極簡模式，可用於主圖切換。
+
+
+:::demo
+
+```tsx
+import React, { useState } from 'react'
+import { Pagination } from '@nutui/nutui-react';
+
+const App = () => {
+  const [currentPage2, setCurrentPage2] = useState(1)
+  const pageChange2 = (v: number) => {
+    const c = v
+    setCurrentPage2(c)
+  }
+  return (
+    <Pagination
+      value={currentPage2}
+      total={12}
+      pageSize={1}
+      mode="lite" 
+      onChange={pageChange2} 
+    />
+  )
+}
+export default App;
+```
+
+:::
+
+
 ### 顯示省略號
 
 設置 force-ellipses 後會展示省略號按鈕，點擊後可以快速跳轉。 
@@ -198,8 +232,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-lite-width | lite模式下的寬度 | `40px` |
+| \--nutui-pagination-lite-height | lite模式下的高度 | `20px` |
+| \--nutui-pagination-lite-radius| lite模式下的圓角 | `12px` |
+| \--nutui-pagination-lite-background-color | lite模式下的默認背景色 | `var(--nutui-black-7)` |
+| \--nutui-pagination-lite-active-background-color | lite模式下的當前選中的背景色 | `var(--nutui-black-5)` |
diff --git a/src/packages/pagination/pagination.scss b/src/packages/pagination/pagination.scss
@@ -56,4 +56,27 @@
     background-color: $pagination-disable-background-color;
     cursor: not-allowed;
   }
+
+  &-lite {
+    width: $pagination-lite-width;
+    height: $pagination-lite-height;
+    display: flex;
+    font-size: $font-size-xs;
+    color: $color-primary-text;
+    background-color: $pagination-lite-background-color;
+    border-radius: $pagination-lite-radius;
+    &-active,
+    &-default {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $pagination-lite-height;
+      height: $pagination-lite-height;
+    }
+    &-active {
+      border-radius: $pagination-lite-radius;
+      font-size: $font-size-small;
+      background-color: $pagination-lite-active-background-color;
+    }
+  }
 }