refactor:pagination (#6251)
* refactor:pagination * docs:update & refactor: pagination typepull/6266/head^2
果冻橙
GitHub
parent
7de1be6a9a
commit
f6afd7fffc
|
|
@ -1,4 +1,4 @@
|
|||
import type { ExtractPropTypes, PropType } from 'vue';
|
||||
import type { ExtractPropTypes } from 'vue';
|
||||
import { computed, toRef, defineComponent } from 'vue';
|
||||
import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
|
||||
import RightOutlined from '@ant-design/icons-vue/RightOutlined';
|
||||
|
|
@ -11,50 +11,55 @@ import enUS from '../vc-pagination/locale/en_US';
|
|||
import classNames from '../_util/classNames';
|
||||
import useConfigInject from '../config-provider/hooks/useConfigInject';
|
||||
import useBreakpoint from '../_util/hooks/useBreakpoint';
|
||||
import { booleanType, arrayType, stringType, functionType, someType } from '../_util/type';
|
||||
|
||||
// CSSINJS
|
||||
import useStyle from './style';
|
||||
|
||||
export const paginationProps = () => ({
|
||||
total: Number,
|
||||
defaultCurrent: Number,
|
||||
disabled: { type: Boolean, default: undefined },
|
||||
disabled: booleanType(),
|
||||
current: Number,
|
||||
defaultPageSize: Number,
|
||||
pageSize: Number,
|
||||
hideOnSinglePage: { type: Boolean, default: undefined },
|
||||
showSizeChanger: { type: Boolean, default: undefined },
|
||||
pageSizeOptions: Array as PropType<(string | number)[]>,
|
||||
buildOptionText: Function as PropType<(opt: { value: any }) => any>,
|
||||
showQuickJumper: {
|
||||
type: [Boolean, Object] as PropType<boolean | { goButton?: any }>,
|
||||
default: undefined as boolean | { goButton?: any },
|
||||
},
|
||||
showTotal: Function as PropType<(total: number, range: [number, number]) => any>,
|
||||
size: String as PropType<'default' | 'small'>,
|
||||
simple: { type: Boolean, default: undefined },
|
||||
hideOnSinglePage: booleanType(),
|
||||
showSizeChanger: booleanType(),
|
||||
pageSizeOptions: arrayType<(string | number)[]>(),
|
||||
buildOptionText: functionType<(opt: { value: any }) => any>(),
|
||||
showQuickJumper: someType<boolean | { goButton?: any }>(
|
||||
[Boolean, Object],
|
||||
undefined as boolean | { goButton?: any },
|
||||
),
|
||||
showTotal: functionType<(total: number, range: [number, number]) => any>(),
|
||||
size: stringType<'default' | 'small'>(),
|
||||
simple: booleanType(),
|
||||
locale: Object,
|
||||
prefixCls: String,
|
||||
selectPrefixCls: String,
|
||||
totalBoundaryShowSizeChanger: Number,
|
||||
selectComponentClass: String,
|
||||
itemRender: Function as PropType<
|
||||
itemRender:
|
||||
functionType<
|
||||
(opt: {
|
||||
page: number;
|
||||
type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next';
|
||||
originalElement: any;
|
||||
}) => any
|
||||
>,
|
||||
>(),
|
||||
role: String,
|
||||
responsive: Boolean,
|
||||
showLessItems: { type: Boolean, default: undefined },
|
||||
onChange: Function as PropType<(page: number, pageSize: number) => void>,
|
||||
onShowSizeChange: Function as PropType<(current: number, size: number) => void>,
|
||||
'onUpdate:current': Function as PropType<(current: number) => void>,
|
||||
'onUpdate:pageSize': Function as PropType<(size: number) => void>,
|
||||
showLessItems: booleanType(),
|
||||
onChange: functionType<(page: number, pageSize: number) => void>(),
|
||||
onShowSizeChange: functionType<(current: number, size: number) => void>(),
|
||||
'onUpdate:current': functionType<(current: number) => void>(),
|
||||
'onUpdate:pageSize': functionType<(size: number) => void>(),
|
||||
});
|
||||
|
||||
export type PaginationPosition = 'top' | 'bottom' | 'both';
|
||||
export const paginationConfig = () => ({
|
||||
...paginationProps(),
|
||||
position: String as PropType<PaginationPosition>,
|
||||
position: stringType<PaginationPosition>(),
|
||||
});
|
||||
|
||||
export type PaginationProps = Partial<ExtractPropTypes<ReturnType<typeof paginationProps>>>;
|
||||
|
|
@ -81,6 +86,10 @@ export default defineComponent({
|
|||
// emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
|
||||
setup(props, { slots, attrs }) {
|
||||
const { prefixCls, configProvider, direction } = useConfigInject('pagination', props);
|
||||
|
||||
// style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const selectPrefixCls = computed(() =>
|
||||
configProvider.getPrefixCls('select', props.selectPrefixCls),
|
||||
);
|
||||
|
|
@ -152,11 +161,12 @@ export default defineComponent({
|
|||
class: classNames(
|
||||
{ mini: isSmall, [`${prefixCls.value}-rtl`]: direction.value === 'rtl' },
|
||||
attrs.class,
|
||||
hashId.value,
|
||||
),
|
||||
itemRender,
|
||||
};
|
||||
|
||||
return <VcPagination {...paginationProps} />;
|
||||
return wrapSSR(<VcPagination {...paginationProps} />);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ category: Components
|
|||
type: Navigation
|
||||
title: Pagination
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
A long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ subtitle: 分页
|
|||
type: 导航
|
||||
title: Pagination
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
采用分页的形式分隔长列表，每次只加载一个页面。
|
||||
|
|
|
|||
|
|
@ -1,472 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../input/style/mixin';
|
||||
|
||||
@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
|
||||
|
||||
.@{pagination-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&-total-text {
|
||||
display: inline-block;
|
||||
height: @pagination-item-size;
|
||||
margin-right: 8px;
|
||||
line-height: @pagination-item-size - 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: inline-block;
|
||||
min-width: @pagination-item-size;
|
||||
height: @pagination-item-size;
|
||||
margin-right: 8px;
|
||||
font-family: @pagination-font-family;
|
||||
line-height: @pagination-item-size - 2px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
list-style: none;
|
||||
background-color: @pagination-item-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 6px;
|
||||
color: @text-color;
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
transition: all 0.3s;
|
||||
|
||||
a {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// cannot merge with `&:hover`
|
||||
// see https://github.com/ant-design/ant-design/pull/34002
|
||||
&:focus-visible {
|
||||
border-color: @primary-color;
|
||||
transition: all 0.3s;
|
||||
|
||||
a {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-active {
|
||||
font-weight: @pagination-font-weight-active;
|
||||
background: @pagination-item-bg-active;
|
||||
border-color: @primary-color;
|
||||
|
||||
a {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-5;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
border-color: @primary-5;
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
color: @primary-5;
|
||||
}
|
||||
|
||||
&:focus-visible a {
|
||||
color: @primary-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-jump-prev,
|
||||
&-jump-next {
|
||||
outline: 0;
|
||||
.@{pagination-prefix-cls}-item-container {
|
||||
position: relative;
|
||||
|
||||
.@{pagination-prefix-cls}-item-link-icon {
|
||||
color: @primary-color;
|
||||
font-size: @font-size-sm;
|
||||
letter-spacing: -1px;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
|
||||
&-svg {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-item-ellipsis {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
margin: auto;
|
||||
color: @disabled-color;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
text-indent: 0.13em;
|
||||
opacity: 1;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.@{pagination-prefix-cls}-item-link-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.@{pagination-prefix-cls}-item-ellipsis {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
.@{pagination-prefix-cls}-item-link-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.@{pagination-prefix-cls}-item-ellipsis {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-prev,
|
||||
&-jump-prev,
|
||||
&-jump-next {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-prev,
|
||||
&-next,
|
||||
&-jump-prev,
|
||||
&-jump-next {
|
||||
display: inline-block;
|
||||
min-width: @pagination-item-size;
|
||||
height: @pagination-item-size;
|
||||
color: @text-color;
|
||||
font-family: @pagination-font-family;
|
||||
line-height: @pagination-item-size;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
list-style: none;
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&-prev,
|
||||
&-next {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
outline: 0;
|
||||
|
||||
button {
|
||||
color: @text-color;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover button {
|
||||
border-color: @primary-5;
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-item-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: @pagination-item-link-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:focus-visible .@{pagination-prefix-cls}-item-link {
|
||||
color: @primary-color;
|
||||
border-color: @primary-color;
|
||||
}
|
||||
|
||||
&:hover .@{pagination-prefix-cls}-item-link {
|
||||
color: @primary-color;
|
||||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
&,
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
.@{pagination-prefix-cls}-item-link {
|
||||
color: @disabled-color;
|
||||
border-color: @border-color-base;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
cursor: not-allowed;
|
||||
.@{pagination-prefix-cls}-item-link {
|
||||
color: @disabled-color;
|
||||
border-color: @border-color-base;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-slash {
|
||||
margin: 0 10px 0 5px;
|
||||
}
|
||||
|
||||
&-options {
|
||||
display: inline-block;
|
||||
margin-left: 16px;
|
||||
vertical-align: middle;
|
||||
|
||||
// IE11 css hack. `*::-ms-backdrop,` is a must have
|
||||
@media all and (-ms-high-contrast: none) {
|
||||
*::-ms-backdrop,
|
||||
& {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&-size-changer.@{ant-prefix}-select {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&-quick-jumper {
|
||||
display: inline-block;
|
||||
height: @input-height-base;
|
||||
margin-left: @margin-xs;
|
||||
line-height: @input-height-base;
|
||||
vertical-align: top;
|
||||
|
||||
input {
|
||||
.input();
|
||||
|
||||
width: 50px;
|
||||
height: @input-height-base;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-simple &-prev,
|
||||
&-simple &-next {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
vertical-align: top;
|
||||
.@{pagination-prefix-cls}-item-link {
|
||||
height: @pagination-item-size-sm;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
&::after {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-simple &-simple-pager {
|
||||
display: inline-block;
|
||||
height: @pagination-item-size-sm;
|
||||
margin-right: 8px;
|
||||
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
margin-right: 8px;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
background-color: @pagination-item-input-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: @primary-color-hover;
|
||||
box-shadow: @input-outline-offset @outline-blur-size @outline-width @primary-color-outline;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: @disabled-color;
|
||||
background: @disabled-bg;
|
||||
border-color: @border-color-base;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mini &-total-text,
|
||||
&.mini &-simple-pager {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
}
|
||||
|
||||
&.mini &-item {
|
||||
min-width: @pagination-item-size-sm;
|
||||
height: @pagination-item-size-sm;
|
||||
margin: 0;
|
||||
line-height: @pagination-item-size-sm - 2px;
|
||||
}
|
||||
|
||||
&.mini &-item:not(&-item-active) {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.mini &-prev,
|
||||
&.mini &-next {
|
||||
min-width: @pagination-item-size-sm;
|
||||
height: @pagination-item-size-sm;
|
||||
margin: 0;
|
||||
line-height: @pagination-item-size-sm;
|
||||
}
|
||||
|
||||
&.mini &-prev &-item-link,
|
||||
&.mini &-next &-item-link {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
&::after {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&.mini &-jump-prev,
|
||||
&.mini &-jump-next {
|
||||
height: @pagination-item-size-sm;
|
||||
margin-right: 0;
|
||||
line-height: @pagination-item-size-sm;
|
||||
}
|
||||
|
||||
&.mini &-options {
|
||||
margin-left: 2px;
|
||||
|
||||
&-size-changer {
|
||||
top: @pagination-mini-options-size-changer-top;
|
||||
}
|
||||
|
||||
&-quick-jumper {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
|
||||
input {
|
||||
.input-sm();
|
||||
|
||||
width: 44px;
|
||||
height: @input-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================ Disabled ============================
|
||||
&&-disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
.@{pagination-prefix-cls}-item {
|
||||
background: @disabled-bg;
|
||||
border-color: @border-color-base;
|
||||
cursor: not-allowed;
|
||||
|
||||
a {
|
||||
color: @disabled-color;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-active {
|
||||
background: @pagination-item-disabled-bg-active;
|
||||
|
||||
a {
|
||||
color: @pagination-item-disabled-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-item-link {
|
||||
color: @disabled-color;
|
||||
background: @disabled-bg;
|
||||
border-color: @border-color-base;
|
||||
cursor: not-allowed;
|
||||
.@{pagination-prefix-cls}-simple& {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-item-link-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-item-ellipsis {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-simple-pager {
|
||||
color: @disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen-lg) {
|
||||
.@{pagination-prefix-cls}-item {
|
||||
&-after-jump-prev,
|
||||
&-before-jump-next {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen-sm) {
|
||||
.@{pagination-prefix-cls}-options {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
|
@ -1,6 +1,683 @@
|
|||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
import {
|
||||
genBasicInputStyle,
|
||||
genInputSmallStyle,
|
||||
initInputToken,
|
||||
type InputToken,
|
||||
} from '../../input/style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import { genFocusOutline, genFocusStyle, resetComponent } from '../../_style';
|
||||
|
||||
// style dependencies
|
||||
// deps-lint-skip: grid
|
||||
import '../../select/style';
|
||||
interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
|
||||
paginationItemSize: number;
|
||||
paginationFontFamily: string;
|
||||
paginationItemBg: string;
|
||||
paginationItemBgActive: string;
|
||||
paginationFontWeightActive: number;
|
||||
paginationItemSizeSM: number;
|
||||
paginationItemInputBg: string;
|
||||
paginationMiniOptionsSizeChangerTop: number;
|
||||
paginationItemDisabledBgActive: string;
|
||||
paginationItemDisabledColorActive: string;
|
||||
paginationItemLinkBg: string;
|
||||
inputOutlineOffset: string;
|
||||
paginationMiniOptionsMarginInlineStart: number;
|
||||
paginationMiniQuickJumperInputWidth: number;
|
||||
paginationItemPaddingInline: number;
|
||||
paginationEllipsisLetterSpacing: number;
|
||||
paginationEllipsisTextIndent: string;
|
||||
paginationSlashMarginInlineStart: number;
|
||||
paginationSlashMarginInlineEnd: number;
|
||||
}
|
||||
|
||||
const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-disabled`]: {
|
||||
'&, &:hover': {
|
||||
cursor: 'not-allowed',
|
||||
|
||||
[`${componentCls}-item-link`]: {
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
|
||||
'&:focus-visible': {
|
||||
cursor: 'not-allowed',
|
||||
|
||||
[`${componentCls}-item-link`]: {
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-disabled`]: {
|
||||
cursor: 'not-allowed',
|
||||
|
||||
[`${componentCls}-item`]: {
|
||||
cursor: 'not-allowed',
|
||||
|
||||
'&:hover, &:active': {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
|
||||
a: {
|
||||
color: token.colorTextDisabled,
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
'&-active': {
|
||||
borderColor: token.colorBorder,
|
||||
backgroundColor: token.paginationItemDisabledBgActive,
|
||||
|
||||
'&:hover, &:active': {
|
||||
backgroundColor: token.paginationItemDisabledBgActive,
|
||||
},
|
||||
|
||||
a: {
|
||||
color: token.paginationItemDisabledColorActive,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item-link`]: {
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
|
||||
'&:hover, &:active': {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
|
||||
[`${componentCls}-simple&`]: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item-link-icon`]: {
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
[`${componentCls}-item-ellipsis`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
[`${componentCls}-simple-pager`]: {
|
||||
color: token.colorTextDisabled,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]:
|
||||
{
|
||||
height: token.paginationItemSizeSM,
|
||||
lineHeight: `${token.paginationItemSizeSM}px`,
|
||||
},
|
||||
|
||||
[`&${componentCls}-mini ${componentCls}-item`]: {
|
||||
minWidth: token.paginationItemSizeSM,
|
||||
height: token.paginationItemSizeSM,
|
||||
margin: 0,
|
||||
lineHeight: `${token.paginationItemSizeSM - 2}px`,
|
||||
},
|
||||
|
||||
[`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
|
||||
[`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
|
||||
minWidth: token.paginationItemSizeSM,
|
||||
height: token.paginationItemSizeSM,
|
||||
margin: 0,
|
||||
lineHeight: `${token.paginationItemSizeSM}px`,
|
||||
},
|
||||
|
||||
[`
|
||||
&${componentCls}-mini ${componentCls}-prev ${componentCls}-item-link,
|
||||
&${componentCls}-mini ${componentCls}-next ${componentCls}-item-link
|
||||
`]: {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
|
||||
'&::after': {
|
||||
height: token.paginationItemSizeSM,
|
||||
lineHeight: `${token.paginationItemSizeSM}px`,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-mini ${componentCls}-jump-prev, &${componentCls}-mini ${componentCls}-jump-next`]:
|
||||
{
|
||||
height: token.paginationItemSizeSM,
|
||||
marginInlineEnd: 0,
|
||||
lineHeight: `${token.paginationItemSizeSM}px`,
|
||||
},
|
||||
|
||||
[`&${componentCls}-mini ${componentCls}-options`]: {
|
||||
marginInlineStart: token.paginationMiniOptionsMarginInlineStart,
|
||||
|
||||
[`&-size-changer`]: {
|
||||
top: token.paginationMiniOptionsSizeChangerTop,
|
||||
},
|
||||
|
||||
[`&-quick-jumper`]: {
|
||||
height: token.paginationItemSizeSM,
|
||||
lineHeight: `${token.paginationItemSizeSM}px`,
|
||||
|
||||
input: {
|
||||
...genInputSmallStyle(token),
|
||||
|
||||
width: token.paginationMiniQuickJumperInputWidth,
|
||||
height: token.controlHeightSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`
|
||||
&${componentCls}-simple ${componentCls}-prev,
|
||||
&${componentCls}-simple ${componentCls}-next
|
||||
`]: {
|
||||
height: token.paginationItemSizeSM,
|
||||
lineHeight: `${token.paginationItemSizeSM}px`,
|
||||
verticalAlign: 'top',
|
||||
[`${componentCls}-item-link`]: {
|
||||
height: token.paginationItemSizeSM,
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
|
||||
'&::after': {
|
||||
height: token.paginationItemSizeSM,
|
||||
lineHeight: `${token.paginationItemSizeSM}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-simple ${componentCls}-simple-pager`]: {
|
||||
display: 'inline-block',
|
||||
height: token.paginationItemSizeSM,
|
||||
marginInlineEnd: token.marginXS,
|
||||
|
||||
input: {
|
||||
boxSizing: 'border-box',
|
||||
height: '100%',
|
||||
marginInlineEnd: token.marginXS,
|
||||
padding: `0 ${token.paginationItemPaddingInline}px`,
|
||||
textAlign: 'center',
|
||||
backgroundColor: token.paginationItemInputBg,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadius,
|
||||
outline: 'none',
|
||||
transition: `border-color ${token.motionDurationMid}`,
|
||||
color: 'inherit',
|
||||
|
||||
'&:hover': {
|
||||
borderColor: token.colorPrimary,
|
||||
},
|
||||
|
||||
'&:focus': {
|
||||
borderColor: token.colorPrimaryHover,
|
||||
boxShadow: `${token.inputOutlineOffset}px 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
|
||||
},
|
||||
|
||||
'&[disabled]': {
|
||||
color: token.colorTextDisabled,
|
||||
backgroundColor: token.colorBgContainerDisabled,
|
||||
borderColor: token.colorBorder,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
|
||||
outline: 0,
|
||||
|
||||
[`${componentCls}-item-container`]: {
|
||||
position: 'relative',
|
||||
|
||||
[`${componentCls}-item-link-icon`]: {
|
||||
color: token.colorPrimary,
|
||||
fontSize: token.fontSizeSM,
|
||||
opacity: 0,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
|
||||
'&-svg': {
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
margin: 'auto',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item-ellipsis`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
display: 'block',
|
||||
margin: 'auto',
|
||||
color: token.colorTextDisabled,
|
||||
fontFamily: 'Arial, Helvetica, sans-serif',
|
||||
letterSpacing: token.paginationEllipsisLetterSpacing,
|
||||
textAlign: 'center',
|
||||
textIndent: token.paginationEllipsisTextIndent,
|
||||
opacity: 1,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
},
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
[`${componentCls}-item-link-icon`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
[`${componentCls}-item-ellipsis`]: {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
|
||||
'&:focus-visible': {
|
||||
[`${componentCls}-item-link-icon`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
[`${componentCls}-item-ellipsis`]: {
|
||||
opacity: 0,
|
||||
},
|
||||
...genFocusOutline(token),
|
||||
},
|
||||
},
|
||||
|
||||
[`
|
||||
${componentCls}-prev,
|
||||
${componentCls}-jump-prev,
|
||||
${componentCls}-jump-next
|
||||
`]: {
|
||||
marginInlineEnd: token.marginXS,
|
||||
},
|
||||
|
||||
[`
|
||||
${componentCls}-prev,
|
||||
${componentCls}-next,
|
||||
${componentCls}-jump-prev,
|
||||
${componentCls}-jump-next
|
||||
`]: {
|
||||
display: 'inline-block',
|
||||
minWidth: token.paginationItemSize,
|
||||
height: token.paginationItemSize,
|
||||
color: token.colorText,
|
||||
fontFamily: token.paginationFontFamily,
|
||||
lineHeight: `${token.paginationItemSize}px`,
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
listStyle: 'none',
|
||||
borderRadius: token.borderRadius,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-prev, ${componentCls}-next`]: {
|
||||
fontFamily: 'Arial, Helvetica, sans-serif',
|
||||
outline: 0,
|
||||
|
||||
button: {
|
||||
color: token.colorText,
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
},
|
||||
|
||||
[`${componentCls}-item-link`]: {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
padding: 0,
|
||||
fontSize: token.fontSizeSM,
|
||||
textAlign: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
||||
borderRadius: token.borderRadius,
|
||||
outline: 'none',
|
||||
transition: `border ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
[`&:focus-visible ${componentCls}-item-link`]: {
|
||||
...genFocusOutline(token),
|
||||
},
|
||||
|
||||
[`&:hover ${componentCls}-item-link`]: {
|
||||
backgroundColor: token.colorBgTextHover,
|
||||
},
|
||||
|
||||
[`&:active ${componentCls}-item-link`]: {
|
||||
backgroundColor: token.colorBgTextActive,
|
||||
},
|
||||
|
||||
[`&${componentCls}-disabled:hover`]: {
|
||||
[`${componentCls}-item-link`]: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-slash`]: {
|
||||
marginInlineEnd: token.paginationSlashMarginInlineEnd,
|
||||
marginInlineStart: token.paginationSlashMarginInlineStart,
|
||||
},
|
||||
|
||||
[`${componentCls}-options`]: {
|
||||
display: 'inline-block',
|
||||
marginInlineStart: token.margin,
|
||||
verticalAlign: 'middle',
|
||||
|
||||
'&-size-changer.-select': {
|
||||
display: 'inline-block',
|
||||
width: 'auto',
|
||||
},
|
||||
|
||||
'&-quick-jumper': {
|
||||
display: 'inline-block',
|
||||
height: token.controlHeight,
|
||||
marginInlineStart: token.marginXS,
|
||||
lineHeight: `${token.controlHeight}px`,
|
||||
verticalAlign: 'top',
|
||||
|
||||
input: {
|
||||
...genBasicInputStyle(token),
|
||||
|
||||
width: token.controlHeightLG * 1.25,
|
||||
height: token.controlHeight,
|
||||
boxSizing: 'border-box',
|
||||
margin: 0,
|
||||
marginInlineStart: token.marginXS,
|
||||
marginInlineEnd: token.marginXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-item`]: {
|
||||
display: 'inline-block',
|
||||
minWidth: token.paginationItemSize,
|
||||
height: token.paginationItemSize,
|
||||
marginInlineEnd: token.marginXS,
|
||||
fontFamily: token.paginationFontFamily,
|
||||
lineHeight: `${token.paginationItemSize - 2}px`,
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
listStyle: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
||||
borderRadius: token.borderRadius,
|
||||
outline: 0,
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
|
||||
a: {
|
||||
display: 'block',
|
||||
padding: `0 ${token.paginationItemPaddingInline}px`,
|
||||
color: token.colorText,
|
||||
transition: 'none',
|
||||
|
||||
'&:hover': {
|
||||
textDecoration: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
[`&:not(${componentCls}-item-active)`]: {
|
||||
'&:hover': {
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
backgroundColor: token.colorBgTextHover,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
backgroundColor: token.colorBgTextActive,
|
||||
},
|
||||
},
|
||||
|
||||
// cannot merge with `&:hover`
|
||||
// see https://github.com/ant-design/ant-design/pull/34002
|
||||
...genFocusStyle(token),
|
||||
|
||||
'&-active': {
|
||||
fontWeight: token.paginationFontWeightActive,
|
||||
backgroundColor: token.paginationItemBgActive,
|
||||
borderColor: token.colorPrimary,
|
||||
|
||||
a: {
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
borderColor: token.colorPrimaryHover,
|
||||
},
|
||||
|
||||
'&:hover a': {
|
||||
color: token.colorPrimaryHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
|
||||
'ul, ol': {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
listStyle: 'none',
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
display: 'block',
|
||||
clear: 'both',
|
||||
height: 0,
|
||||
overflow: 'hidden',
|
||||
visibility: 'hidden',
|
||||
content: '""',
|
||||
},
|
||||
|
||||
[`${componentCls}-total-text`]: {
|
||||
display: 'inline-block',
|
||||
height: token.paginationItemSize,
|
||||
marginInlineEnd: token.marginXS,
|
||||
lineHeight: `${token.paginationItemSize - 2}px`,
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
|
||||
// item style
|
||||
...genPaginationItemStyle(token),
|
||||
|
||||
// jump btn style
|
||||
...genPaginationJumpStyle(token),
|
||||
|
||||
// simple style
|
||||
...genPaginationSimpleStyle(token),
|
||||
|
||||
// mini style
|
||||
...genPaginationMiniStyle(token),
|
||||
|
||||
// disabled style
|
||||
...genPaginationDisabledStyle(token),
|
||||
|
||||
// media query style
|
||||
[`@media only screen and (max-width: ${token.screenLG}px)`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
'&-after-jump-prev, &-before-jump-next': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`@media only screen and (max-width: ${token.screenSM}px)`]: {
|
||||
[`${componentCls}-options`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// rtl style
|
||||
[`&${token.componentCls}-rtl`]: {
|
||||
direction: 'rtl',
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}${componentCls}-disabled`]: {
|
||||
'&, &:hover': {
|
||||
[`${componentCls}-item-link`]: {
|
||||
borderColor: token.colorBorder,
|
||||
},
|
||||
},
|
||||
|
||||
'&:focus-visible': {
|
||||
[`${componentCls}-item-link`]: {
|
||||
borderColor: token.colorBorder,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item, ${componentCls}-item-link`]: {
|
||||
backgroundColor: token.colorBgContainerDisabled,
|
||||
borderColor: token.colorBorder,
|
||||
|
||||
[`&:hover:not(${componentCls}-item-active)`]: {
|
||||
backgroundColor: token.colorBgContainerDisabled,
|
||||
borderColor: token.colorBorder,
|
||||
|
||||
a: {
|
||||
color: token.colorTextDisabled,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-item-active`]: {
|
||||
backgroundColor: token.paginationItemDisabledBgActive,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-prev, ${componentCls}-next`]: {
|
||||
'&:hover button': {
|
||||
backgroundColor: token.colorBgContainerDisabled,
|
||||
borderColor: token.colorBorder,
|
||||
color: token.colorTextDisabled,
|
||||
},
|
||||
|
||||
[`${componentCls}-item-link`]: {
|
||||
backgroundColor: token.colorBgContainerDisabled,
|
||||
borderColor: token.colorBorder,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[componentCls]: {
|
||||
[`${componentCls}-prev, ${componentCls}-next`]: {
|
||||
'&:hover button': {
|
||||
borderColor: token.colorPrimaryHover,
|
||||
backgroundColor: token.paginationItemBg,
|
||||
},
|
||||
|
||||
[`${componentCls}-item-link`]: {
|
||||
backgroundColor: token.paginationItemLinkBg,
|
||||
borderColor: token.colorBorder,
|
||||
},
|
||||
|
||||
[`&:hover ${componentCls}-item-link`]: {
|
||||
borderColor: token.colorPrimary,
|
||||
backgroundColor: token.paginationItemBg,
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
|
||||
[`&${componentCls}-disabled`]: {
|
||||
[`${componentCls}-item-link`]: {
|
||||
borderColor: token.colorBorder,
|
||||
color: token.colorTextDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item`]: {
|
||||
backgroundColor: token.paginationItemBg,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
|
||||
[`&:hover:not(${componentCls}-item-active)`]: {
|
||||
borderColor: token.colorPrimary,
|
||||
backgroundColor: token.paginationItemBg,
|
||||
|
||||
a: {
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
|
||||
'&-active': {
|
||||
borderColor: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Pagination', token => {
|
||||
const paginationToken = mergeToken<PaginationToken>(
|
||||
token,
|
||||
{
|
||||
paginationItemSize: token.controlHeight,
|
||||
paginationFontFamily: token.fontFamily,
|
||||
paginationItemBg: token.colorBgContainer,
|
||||
paginationItemBgActive: token.colorBgContainer,
|
||||
paginationFontWeightActive: token.fontWeightStrong,
|
||||
paginationItemSizeSM: token.controlHeightSM,
|
||||
paginationItemInputBg: token.colorBgContainer,
|
||||
paginationMiniOptionsSizeChangerTop: 0,
|
||||
paginationItemDisabledBgActive: token.controlItemBgActiveDisabled,
|
||||
paginationItemDisabledColorActive: token.colorTextDisabled,
|
||||
paginationItemLinkBg: token.colorBgContainer,
|
||||
inputOutlineOffset: '0 0',
|
||||
paginationMiniOptionsMarginInlineStart: token.marginXXS / 2,
|
||||
paginationMiniQuickJumperInputWidth: token.controlHeightLG * 1.1,
|
||||
paginationItemPaddingInline: token.marginXXS * 1.5,
|
||||
paginationEllipsisLetterSpacing: token.marginXXS / 2,
|
||||
paginationSlashMarginInlineStart: token.marginXXS,
|
||||
paginationSlashMarginInlineEnd: token.marginSM,
|
||||
paginationEllipsisTextIndent: '0.13em', // magic for ui experience
|
||||
},
|
||||
initInputToken(token),
|
||||
);
|
||||
return [
|
||||
genPaginationStyle(paginationToken),
|
||||
token.wireframe && genBorderedStyle(paginationToken),
|
||||
];
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../input/style/mixin';
|
||||
|
||||
@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
|
||||
|
||||
.@{pagination-prefix-cls}-rtl {
|
||||
.@{pagination-prefix-cls}-total-text {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-item,
|
||||
.@{pagination-prefix-cls}-prev,
|
||||
.@{pagination-prefix-cls}-jump-prev,
|
||||
.@{pagination-prefix-cls}-jump-next {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-slash {
|
||||
margin: 0 5px 0 10px;
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-options {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
|
||||
.@{pagination-prefix-cls}-options-size-changer.@{ant-prefix}-select {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls}-options-quick-jumper {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{pagination-prefix-cls}-simple {
|
||||
.@{pagination-prefix-cls}-simple-pager {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
|
||||
input {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{pagination-prefix-cls}.mini .@{pagination-prefix-cls}-options {
|
||||
margin-right: 2px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import './radio/style';
|
|||
// import './checkbox/style';
|
||||
// import './grid/style';
|
||||
// import './tag/style';
|
||||
// import './rate/style';
|
||||
import './rate/style';
|
||||
import './pagination/style';
|
||||
// import './avatar/style';
|
||||
// import './badge/style';
|
||||
|
|
|
|||
Loading…
Reference in New Issue