diff --git a/components/pagination/pagination.tsx b/components/pagination/pagination.tsx index 3fae3c92..a90204ab 100644 --- a/components/pagination/pagination.tsx +++ b/components/pagination/pagination.tsx @@ -52,6 +52,7 @@ const Pagination: React.FC = (props) => { prefixCls: pkgPrefixCls, compDefaultProps: userDefaultProps, locale, + direction, } = React.useContext(ConfigContext) const paginationLangMsg = locale.getCompLangMsg({ componentName: 'Pagination' }) // 属性需要合并一遍用户定义的默认属性 @@ -80,7 +81,7 @@ const Pagination: React.FC = (props) => { devWarning(PageTypes.indexOf(pageType) === -1, 'Pagination', `cannot found pageType '${pageType}'`) // className前缀 const prefixCls = getPrefixCls!(pkgPrefixCls, 'pagination', customPrefixcls) - + const rtlCls = direction === 'rtl' ? `${prefixCls}-rtl` : null // 每页显示的记录条数 const [size, setSize] = React.useState(pageSize || defaultPageSize) React.useEffect(() => { @@ -112,13 +113,13 @@ const Pagination: React.FC = (props) => { // icons const innerIcon: IIcons = Object.assign( { - first: , - last: , - prev: , - next: , + first: , + last: , + prev: , + next: , down: , - jumpPrev: , - jumpNext: , + jumpPrev: , + jumpNext: , }, icons || {}, ) @@ -233,7 +234,7 @@ const Pagination: React.FC = (props) => { const Total = showTotal && {mapTotalText[showTotal]} const normalPagination = ( -
+
{Total} {showJumper && ( @@ -281,7 +282,7 @@ const Pagination: React.FC = (props) => { selectedKey={size} menu={sizeOptions} trigger="click" - placement="bottomRight" + placement={direction === 'rtl' ? 'bottomRight' : 'bottomLeft'} disabled={disabled} prefix={`${prefixCls}-dropdown`} popperStyle={{ minWidth: 64 }} @@ -305,7 +306,7 @@ const Pagination: React.FC = (props) => { ) const simplePagination = ( -
+
{Total}
  • @@ -345,7 +346,7 @@ const Pagination: React.FC = (props) => { if (pageType === 'less') { lessPagination = ( -
    +
    {Total}
    • @@ -388,7 +389,7 @@ const Pagination: React.FC = (props) => { } const nicetyPagination = ( -
      +
      {Total}
      • @@ -450,6 +451,7 @@ const Pagination: React.FC = (props) => { popperStyle={{ minWidth: 64 }} onItemClick={handleChangeSize} getPopupContainer={(triggerNode) => triggerNode?.parentElement as HTMLElement} + placement={direction === 'rtl' ? 'bottomRight' : 'bottomLeft'} {...dropdownProps} onVisibleChange={dropdownVisibleChange} > diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index 228db1fe..7ba0e59d 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -617,3 +617,102 @@ } } } + +.@{pagination-prefix-cls}-rtl { + direction: rtl; + .@{pagination-prefix-cls}-total { + margin-left: 12px; + margin-right: 0; + } + .@{pagination-prefix-cls}-current { + margin-right: 0; + margin-left: 12px; + } + .@{pagination-action-prefix-cls} { + .@{pagination-action-prefix-cls}-item { + &.bordered { + margin-left: calc(2 * @pagination-button-spacing); + margin-right: 0; + &:last-child { + margin-left: 0; + } + } + } + } + .@{pagination-selector-prefix-cls} { + margin-right: 20px; + margin-left: 0; + .@{pagination-selector-prefix-cls}-size { + i { + margin-left: 0; + margin-right: 4px; + } + } + } + &.simple { + .@{pagination-prefix-cls}-action { + &-item { + .@{pagination-prefix-cls}-current { + margin-right: 0; + margin-left: 2px; + } + .@{pagination-prefix-cls}-total { + margin-left: 0; + margin-right: 2px; + } + } + } + } + &.less { + .@{pagination-pages-prefix-cls} { + &-item { + margin-left: @pagination-button-spacing; + margin-right: 0; + &:last-child { + margin-left: 0; + } + } + } + } + &.nicety { + .@{pagination-pages-prefix-cls} { + &-item { + margin-left: @pagination-button-spacing; + margin-right: 0; + &:last-child { + margin-left: 0; + } + } + } + .@{pagination-jumper-prefix-cls} { + margin-right: @pagination-button-spacing; + margin-left: 0; + .@{pagination-jumper-prefix-cls}-button { + margin-right: @pagination-button-spacing; + margin-left: 0; + } + } + .@{pagination-options-prefix-cls} { + margin-right: 22px; + margin-left: 0; + .@{pagination-options-prefix-cls}-size { + margin-right: 0; + margin-left: 8px; + padding: 0 4px 0 24px; + i { + left: 5px; + right: auto; + } + } + .@{kd-prefix}-dropdown { + &-menu { + &-item { + & > span { + text-align: right; + } + } + } + } + } + } +}