mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

remove pseudo-class in pagination

Browse Source
This commit is contained in:
HeskeyBaozi 2018-08-22 20:01:00 +08:00
parent 71be9c4a09
commit 0c751ca3b5
4 changed files with 267 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/pagination/Pagination.tsx
View File

@ -47,22 +47,38 @@ export default class Pagination extends React.Component<PaginationProps, {}> {
const { prefixCls } = this.props;
const prevIcon = (
<a className={`${prefixCls}-item-link`}>
<Icon type="left"/>
<Icon type="left" />
</a>
);
const nextIcon = (
<a className={`${prefixCls}-item-link`}>
<Icon type="right"/>
<Icon type="right" />
</a>
);
const jumpPrevIcon = (
<a className={`${prefixCls}-item-link`}>
<Icon className={`${prefixCls}-item-link-icon`} type="left"/>
{/* You can use transition effects in the container :) */}
<div className={`${prefixCls}-item-container`}>
<Icon
className={`${prefixCls}-item-link-icon`}
svgClassName={`${prefixCls}-item-link-icon-svg`}
type="left"
/>
<span className={`${prefixCls}-item-ellipsis`}>•••</span>
</div>
</a>
);
const jumpNextIcon = (
<a className={`${prefixCls}-item-link`}>
<Icon className={`${prefixCls}-item-link-icon`} type="double-right"/>
{/* You can use transition effects in the container :) */}
<div className={`${prefixCls}-item-container`}>
<Icon
className={`${prefixCls}-item-link-icon`}
svgClassName={`${prefixCls}-item-link-icon-svg`}
type="double-right"
/>
<span className={`${prefixCls}-item-ellipsis`}>•••</span>
</div>
</a>
);
return {

219
components/pagination/__tests__/__snapshots__/demo.test.js.snap
View File

@ -194,26 +194,35 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
<a
class="ant-pagination-item-link"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
<div
class="ant-pagination-item-container"
>
<svg
aria-hidden="true"
class=""
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<svg
aria-hidden="true"
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -484,26 +493,35 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
<a
class="ant-pagination-item-link"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
<div
class="ant-pagination-item-container"
>
<svg
aria-hidden="true"
class=""
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<svg
aria-hidden="true"
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -614,26 +632,35 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
<a
class="ant-pagination-item-link"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
<div
class="ant-pagination-item-container"
>
<svg
aria-hidden="true"
class=""
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<svg
aria-hidden="true"
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -1125,23 +1152,32 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
<a
class="ant-pagination-item-link"
>
<i
class="anticon anticon-left ant-pagination-item-link-icon"
<div
class="ant-pagination-item-container"
>
<svg
aria-hidden="true"
class=""
data-icon="left"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
class="anticon anticon-left ant-pagination-item-link-icon"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</i>
<svg
aria-hidden="true"
class="ant-pagination-item-link-icon-svg"
data-icon="left"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -1197,26 +1233,35 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
<a
class="ant-pagination-item-link"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
<div
class="ant-pagination-item-container"
>
<svg
aria-hidden="true"
class=""
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<svg
aria-hidden="true"
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li

66
components/pagination/style/index.less
View File

@ -87,46 +87,48 @@
&-jump-prev,
&-jump-next {
outline: 0;
position: relative;
.@{pagination-prefix-cls}-item-container {
position: relative;
&:after {
content: "•••";
position: absolute;
display: block;
letter-spacing: 2px;
color: @disabled-color;
text-align: center;
opacity: 1;
transition: all .2s;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.@{pagination-prefix-cls}-item-link-icon {
.iconfont-size-under-12px(12px);
color: @primary-color;
letter-spacing: -1px;
opacity: 0;
transition: all .2s;
&-svg {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
.@{pagination-prefix-cls}-item-link {
.iconfont-size-under-12px(12px);
position: absolute;
color: @primary-color;
letter-spacing: -1px;
opacity: 0;
transition: all .2s;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
.@{pagination-prefix-cls}-item-ellipsis {
position: absolute;
display: block;
letter-spacing: 2px;
color: @disabled-color;
text-align: center;
opacity: 1;
transition: all .2s;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
&:focus,
&:hover {
&:after {
opacity: 0;
}
.@{pagination-prefix-cls}-item-link {
.@{pagination-prefix-cls}-item-link-icon {
opacity: 1;
}
.@{pagination-prefix-cls}-item-ellipsis {
opacity: 0;
}
}
}

135
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3751,26 +3751,35 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<a
class="ant-pagination-item-link"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
<div
class="ant-pagination-item-container"
>
<svg
aria-hidden="true"
class=""
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<svg
aria-hidden="true"
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -6244,26 +6253,35 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
<a
class="ant-pagination-item-link"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
<div
class="ant-pagination-item-container"
>
<svg
aria-hidden="true"
class=""
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<svg
aria-hidden="true"
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -8861,26 +8879,35 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
<a
class="ant-pagination-item-link"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
<div
class="ant-pagination-item-container"
>
<svg
aria-hidden="true"
class=""
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<svg
aria-hidden="true"
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
<path
d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li