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) + }} + /> +
+
+
+ + ) +}