mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

fixed some list style bug (#7177)

Browse Source 
* fixed some list style bug

* add cursor:pointer to hover style

* fixed hover style
This commit is contained in:
niko 2017-08-15 17:25:14 +08:00 committed by GitHub
parent 314c095fbf
commit 600d589617
7 changed files with 180 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
components/card/__tests__/__snapshots__/demo.test.js.snap
View File

@ -5,40 +5,36 @@ exports[`renders ./components/card/demo/basic.md correctly 1`] = `
class="ant-card ant-card-bordered"
style="width:300px;"
>
<div>
<div
class="ant-card-head"
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-extra"
Card title
</h3>
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
<a
href="#"
>
More
</a>
</div>
<div
class="ant-card-body"
>
<div>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
More
</a>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
`;
@ -51,31 +47,27 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
class="ant-card"
style="width:300px;"
>
<div>
<div
class="ant-card-head"
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
</div>
@ -208,23 +200,19 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
<div
class="ant-card"
>
<div>
<div
class="ant-card-head"
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div>
Card content
</div>
</div>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
Card content
</div>
</div>
</div>
@ -235,23 +223,19 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
<div
class="ant-card"
>
<div>
<div
class="ant-card-head"
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div>
Card content
</div>
</div>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
Card content
</div>
</div>
</div>
@ -262,23 +246,19 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
<div
class="ant-card"
>
<div>
<div
class="ant-card-head"
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div>
Card content
</div>
</div>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
Card content
</div>
</div>
</div>
@ -383,71 +363,69 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
class="ant-card ant-card-loading ant-card-bordered"
style="width:34%;"
>
<div>
<div
class="ant-card-head"
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div
class="ant-card-body"
class="ant-card-loading-content"
>
<div
class="ant-card-loading-content"
>
<p
<p
class="ant-card-loading-block"
style="width:94%;"
/>
<p>
<span
class="ant-card-loading-block"
style="width:94%;"
style="width:28%;"
/>
<p>
<span
class="ant-card-loading-block"
style="width:28%;"
/>
<span
class="ant-card-loading-block"
style="width:62%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:22%;"
/>
<span
class="ant-card-loading-block"
style="width:66%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:56%;"
/>
<span
class="ant-card-loading-block"
style="width:39%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:21%;"
/>
<span
class="ant-card-loading-block"
style="width:15%;"
/>
<span
class="ant-card-loading-block"
style="width:40%;"
/>
</p>
</div>
<span
class="ant-card-loading-block"
style="width:62%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:22%;"
/>
<span
class="ant-card-loading-block"
style="width:66%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:56%;"
/>
<span
class="ant-card-loading-block"
style="width:39%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:21%;"
/>
<span
class="ant-card-loading-block"
style="width:15%;"
/>
<span
class="ant-card-loading-block"
style="width:40%;"
/>
</p>
</div>
</div>
</div>
@ -546,22 +524,18 @@ exports[`renders ./components/card/demo/simple.md correctly 1`] = `
class="ant-card ant-card-bordered"
style="width:300px;"
>
<div>
<div
class="ant-card-body"
>
<div>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
`;

4
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,7 +2,7 @@
exports[`renders ./components/list/demo/basic.md correctly 1`] = `
<div
class="ant-list ant-list-bordered"
class="ant-list ant-list-bordered ant-list-hovering"
>
<div
class="ant-list-item"
@ -257,7 +257,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
exports[`renders ./components/list/demo/grid.md correctly 1`] = `
<div
class="ant-list ant-list-bordered ant-list-grid"
class="ant-list ant-list-bordered ant-list-grid ant-list-hovering"
>
<div
class="ant-row"

2
components/list/demo/vertical.md
View File

@ -42,7 +42,7 @@ const IconText = ({ type, text }) => (
);
ReactDOM.render(
<List itemLayout="vertical" pagination={pagination}>
<List noHovering itemLayout="vertical" pagination={pagination}>
{
listData.map(item => (
<List.Item

1
components/list/index.en-US.md
View File

@ -24,6 +24,7 @@ A list can be used to display content related to a single subject. The content c
| loadingMore | - | boolean | false |
| onMoreClick | -| function | - |
| pagination | - | boolean \| object | false |
| noHovering | - | boolean | true |
### List.Item

5
components/list/index.tsx
View File

@ -28,6 +28,7 @@ export interface ListProps {
pagination?: any;
prefixCls?: string;
grid?: ListGridType;
noHovering: boolean;
style?: React.CSSProperties;
}
@ -43,6 +44,7 @@ export default class List extends Component<ListProps> {
itemLayout,
showLoadMore = false,
loadingMore = false,
noHovering = false,
onLoadMore = (() => {
}),
pagination = false,
@ -55,6 +57,7 @@ export default class List extends Component<ListProps> {
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-grid`]: grid,
[`${prefixCls}-hovering`]: !noHovering,
});
const moreButton = (
@ -92,7 +95,7 @@ export default class List extends Component<ListProps> {
<div className={classString}>
{loading && loadingContent}
{!loading && childrenContent}
{showLoadMore && moreContent}
{!loading && showLoadMore && moreContent}
{(!showLoadMore && pagination) && paginationContent}
</div>
);

1
components/list/index.zh-CN.md
View File

@ -25,6 +25,7 @@ cols: 1
| loadingMore | 是否显示加载更多按钮的 loading 状态 | boolean | false |
| onMoreClick | 点击 more 按钮的回调 | function | - |
| pagination | 对应的 pagination 配置, 设置 false 不显示 | boolean \| object | false |
| noHovering | 取消鼠标移过高亮标题 | boolean | true |
### List.Item

26
components/list/style/index.less
View File

@ -23,15 +23,6 @@
display: flex;
padding-top: 24px;
padding-bottom: 24px;
&:hover {
cursor: pointer;
.@{list-prefix-cls}-item-meta-title {
color: @primary-color;
a {
color: @primary-color;
}
}
}
&-meta {
align-items: center;
display: flex;
@ -50,6 +41,9 @@
line-height: 22px;
a {
color: @text-color;
&:hover {
color: @primary-color;
}
}
}
&-description {
@ -163,3 +157,17 @@
}
}
}
.@{list-prefix-cls}-hovering {
.@{list-prefix-cls}-item {
cursor: pointer;
&:hover {
.@{list-prefix-cls}-item-meta-title {
color: @primary-color;
a {
color: @primary-color;
}
}
}
}
}