diff --git a/.changeset/brown-clouds-deny.md b/.changeset/brown-clouds-deny.md
new file mode 100644
index 000000000..a81a12805
--- /dev/null
+++ b/.changeset/brown-clouds-deny.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/pagination": minor
+"@hi-ui/hiui": minor
+---
+
+feat(pagination): add size api(#3047)
diff --git a/packages/ui/pagination/src/DefaultPagination.tsx b/packages/ui/pagination/src/DefaultPagination.tsx
index 6b1e18ffc..719f720a2 100644
--- a/packages/ui/pagination/src/DefaultPagination.tsx
+++ b/packages/ui/pagination/src/DefaultPagination.tsx
@@ -38,6 +38,7 @@ export const DefaultPagination = forwardRef
) : null}
{showJumper ? (
@@ -200,6 +202,7 @@ export const DefaultPagination = forwardRef
) : null}
@@ -271,6 +274,10 @@ export interface PaginationProps extends HiBaseHTMLProps<'div'> {
* 每页显示条数改变的回调函数
*/
onPageSizeChange?: (pageSize: number, current: number) => void
+ /**
+ * 设置尺寸
+ */
+ size?: 'sm' | 'md'
}
if (__DEV__) {
diff --git a/packages/ui/pagination/src/PageJumper.tsx b/packages/ui/pagination/src/PageJumper.tsx
index 2f3f5e4d6..fdd2d38cb 100644
--- a/packages/ui/pagination/src/PageJumper.tsx
+++ b/packages/ui/pagination/src/PageJumper.tsx
@@ -2,7 +2,13 @@ import React, { useCallback, useState } from 'react'
import { Input } from '@hi-ui/input'
import { __DEV__ } from '@hi-ui/env'
-export const PageJumper: React.FC = ({ pageText, prefixCls, onJump, maxJump }) => {
+export const PageJumper: React.FC = ({
+ pageText,
+ prefixCls,
+ onJump,
+ maxJump,
+ size = 'md',
+}) => {
const [jumpPage, setJumpPage] = useState('')
const onJumperChange = useCallback((e) => {
setJumpPage(e.target.value)
@@ -41,6 +47,7 @@ export const PageJumper: React.FC = ({ pageText, prefixCls, onJ
}
}}
onChange={onJumperChange}
+ size={size}
/>
{pageText[1]}
@@ -55,6 +62,10 @@ export interface PageJumperProps {
prefixCls?: string
onJump: (page: number) => void
maxJump: number
+ /**
+ * 设置尺寸
+ */
+ size?: 'sm' | 'md'
}
if (__DEV__) {
diff --git a/packages/ui/pagination/src/PageOption.tsx b/packages/ui/pagination/src/PageOption.tsx
index 7ccc230f0..cccb30476 100644
--- a/packages/ui/pagination/src/PageOption.tsx
+++ b/packages/ui/pagination/src/PageOption.tsx
@@ -13,6 +13,7 @@ export const PageOption: React.FC = ({
pageSizeOptionsOverlay,
onPageSizeChange,
pageSize,
+ size = 'md',
}) => {
const cls = cx(`${prefixCls}__option`)
@@ -24,6 +25,7 @@ export const PageOption: React.FC = ({
data={pageSizeOptions}
value={pageSize}
clearable={false}
+ size={size}
onChange={onPageSizeChange as (value: React.ReactText) => void}
overlay={pageSizeOptionsOverlay}
/>
@@ -55,6 +57,10 @@ export interface PageOptionProps {
* 每页条数
*/
pageSize: number
+ /**
+ * 设置尺寸
+ */
+ size?: 'sm' | 'md'
}
if (__DEV__) {
diff --git a/packages/ui/pagination/src/Pagination.tsx b/packages/ui/pagination/src/Pagination.tsx
index cd7f9ea43..9d62284e2 100644
--- a/packages/ui/pagination/src/Pagination.tsx
+++ b/packages/ui/pagination/src/Pagination.tsx
@@ -14,15 +14,16 @@ export const Pagination = forwardRef(
type = 'default',
className,
children,
+ size = 'md',
...rest
},
ref
) => {
- const cls = cx(prefixCls, className)
+ const cls = cx(prefixCls, className, `${prefixCls}--size-${size}`)
if (type === 'default') {
- return
+ return
}
- return
+ return
}
)
diff --git a/packages/ui/pagination/src/ShrinkPagination.tsx b/packages/ui/pagination/src/ShrinkPagination.tsx
index ba94337f3..d6c2dce12 100644
--- a/packages/ui/pagination/src/ShrinkPagination.tsx
+++ b/packages/ui/pagination/src/ShrinkPagination.tsx
@@ -68,6 +68,7 @@ export const ShrinkPagination = forwardRef
{/* @ts-ignore */}
-
+
{showTotal ? {`/ ${maxPage}`} : null}
>
) : null}
@@ -130,7 +131,7 @@ export interface ShrinkPaginationProps extends HiBaseHTMLProps<'div'> {
/**
* 设置尺寸
*/
- size?: 'sm' | 'md' | 'lg'
+ size?: 'sm' | 'md'
/**
* 只有一页时是否隐藏分页器
*/
diff --git a/packages/ui/pagination/src/styles/pagination.scss b/packages/ui/pagination/src/styles/pagination.scss
index 3765982fa..b7f23567e 100644
--- a/packages/ui/pagination/src/styles/pagination.scss
+++ b/packages/ui/pagination/src/styles/pagination.scss
@@ -5,7 +5,6 @@ $prefix: '#{$component-prefix}-pagination' !default;
.#{$prefix},
.#{$prefix}-mini {
display: flex;
- font-size: use-text-size('normal');
align-items: center;
color: use-color('gray', 600);
user-select: none;
@@ -121,6 +120,27 @@ $prefix: '#{$component-prefix}-pagination' !default;
}
}
}
+
+ &--size-sm {
+ font-size: use-text-size('sm');
+ line-height: use-text-lineheight('sm');
+
+ .#{$prefix}__btn {
+ min-width: use-height-size(6);
+ height: use-height-size(6);
+ }
+
+ .#{$prefix}__item {
+ min-width: use-height-size(6);
+ height: use-height-size(6);
+ line-height: use-height-size(6);
+ }
+ }
+
+ &--size-md {
+ font-size: use-text-size('normal');
+ line-height: use-text-lineheight('normal');
+ }
}
$input-pagination-prefix: '#{$component-prefix}-pagination-mini' !default;
@@ -132,7 +152,6 @@ $input-pagination-prefix: '#{$component-prefix}-pagination-mini' !default;
height: auto;
min-height: 24px;
box-sizing: border-box;
- font-size: use-text-size('normal');
outline: none;
$this: &;
diff --git a/packages/ui/pagination/stories/index.stories.tsx b/packages/ui/pagination/stories/index.stories.tsx
index a1d3f0f41..13e3ddcb4 100644
--- a/packages/ui/pagination/stories/index.stories.tsx
+++ b/packages/ui/pagination/stories/index.stories.tsx
@@ -6,6 +6,7 @@ export * from './page-size-options.stories'
export * from './simple.stories'
export * from './mini-input.stories'
export * from './custom.stories'
+export * from './size.stories'
export default {
title: 'Navigation/Pagination',
diff --git a/packages/ui/pagination/stories/size.stories.tsx b/packages/ui/pagination/stories/size.stories.tsx
new file mode 100644
index 000000000..fe4c7234c
--- /dev/null
+++ b/packages/ui/pagination/stories/size.stories.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import Pagination from '../src'
+
+/**
+ * @title 不同尺寸
+ */
+export const Size = () => {
+ return (
+ <>
+ 不同尺寸
+
+
+
{
+ console.log('onChange', cur, prev, pageSize)
+ }}
+ />
+
+
+
{
+ console.log('onChange', cur)
+ }}
+ />
+
+
+
{
+ console.log('onChange', cur, prev, pageSize)
+ }}
+ />
+
+
+
{
+ console.log('onChange', cur)
+ }}
+ />
+
+
+
+ >
+ )
+}