GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix card tabs wrap bug

pull/7660/merge
afc163 7 years ago
parent
2f7b75562c
commit
00973fdb72
3 changed files with 109 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 155
      components/card/__tests__/__snapshots__/demo.test.js.snap
  2. 6
      components/card/index.tsx
  3. 5
      components/card/style/index.less

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

@ -10,18 +10,22 @@ exports[`renders ./components/card/demo/basic.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Card title
</div>
<div
class="ant-card-extra"
>
<a
href="#"
<div
class="ant-card-head-title"
>
More
</a>
Card title
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
</div>
</div>
<div
@ -56,9 +60,13 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Card title
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
@ -136,9 +144,13 @@ exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Card Title
<div
class="ant-card-head-title"
>
Card Title
</div>
</div>
</div>
<div
@ -213,9 +225,13 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Card title
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
@ -240,9 +256,13 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Card title
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
@ -267,9 +287,13 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Card title
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
@ -295,9 +319,13 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Card title
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
@ -317,18 +345,22 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
>
Inner Card title
</div>
<div
class="ant-card-extra"
class="ant-card-head-wrapper"
>
<a
href="#"
<div
class="ant-card-head-title"
>
More
</a>
Inner Card title
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
</div>
</div>
<div
@ -349,18 +381,22 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
>
Inner Card title
</div>
<div
class="ant-card-extra"
class="ant-card-head-wrapper"
>
<a
href="#"
<div
class="ant-card-head-title"
>
More
</a>
Inner Card title
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
</div>
</div>
<div
@ -388,9 +424,13 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Card title
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
@ -577,18 +617,22 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Card title
</div>
<div
class="ant-card-extra"
>
<a
href="#"
<div
class="ant-card-head-title"
>
More
</a>
Card title
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
</div>
<div
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-line"
@ -688,6 +732,9 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
<div
class="ant-card-head"
>
<div
class="ant-card-head-wrapper"
/>
<div
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-line"
>

6
components/card/index.tsx
View File

@ -148,8 +148,10 @@ export default class Card extends Component<CardProps, {}> {
if (title || extra || tabs) {
head = (
<div className={`${prefixCls}-head`}>
{title && <div className={`${prefixCls}-head-title`}>{title}</div>}
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
<div className={`${prefixCls}-head-wrapper`}>
{title && <div className={`${prefixCls}-head-title`}>{title}</div>}
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
</div>
{tabs}
</div>
);

5
components/card/style/index.less
View File

@ -31,7 +31,10 @@
border-radius: @border-radius-sm @border-radius-sm 0 0;
.clearfix;
margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
display: flex;
&-wrapper {
display: flex;
}
&-title {
font-size: @font-size-lg;

Write Preview
Loading…
Cancel
Save