mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 01:13:58 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

site: improve demo card style (#40028)

Browse Source 
* site: improve demo card style

* test: update snapshot

* test: update snapshot

* fix: demo card border

* docs: fix dark mode

* style: fix color
This commit is contained in:
afc163 2023-01-05 15:30:59 +08:00 committed by GitHub
parent 755682c317
commit 7d77f3173d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 263 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
.dumi/theme/builtins/Previewer/index.tsx
View File

@ -55,6 +55,8 @@ interface DemoState {
class Demo extends React.Component<DemoProps, DemoState> {
static contextType = SiteContext;
declare context: SiteContextProps;
liveDemo: any;
iframeRef = React.createRef<HTMLIFrameElement>();
@ -93,7 +95,7 @@ class Demo extends React.Component<DemoProps, DemoState> {
);
}
getSourceCode = (): [string, string] => {
getSourceCode = () => {
const { sourceCodes } = this.props;
return [sourceCodes.jsx, sourceCodes.tsx];
};
@ -130,7 +132,7 @@ class Demo extends React.Component<DemoProps, DemoState> {
render() {
const { state } = this;
const { props } = this;
const site: SiteContextProps = this.context;
const site = this.context;
const {
meta,
src,
@ -198,7 +200,7 @@ class Demo extends React.Component<DemoProps, DemoState> {
const suffix = codeType === 'tsx' ? 'tsx' : 'js';
const dependencies: Record<PropertyKey, string> = sourceCode.split('\n').reduce(
(acc, line) => {
(acc: Record<string, string>, line) => {
const matches = line.match(/import .+? from '(.+)';$/);
if (matches && matches[1] && !line.includes('antd')) {
const paths = matches[1].split('/');
@ -353,9 +355,16 @@ createRoot(document.getElementById('container')).render(<Demo />);
stackblitzPrefillConfig.files['tsconfig.json'] = tsconfig;
}
let codeBox = (
const backgroundGrey = site.theme.includes('dark') ? '#303030' : '#f0f2f5';
const codeBoxDemoStyle: React.CSSProperties = {
padding: meta.iframe || meta.compact ? 0 : undefined,
overflow: meta.iframe || meta.compact ? 'hidden' : undefined,
background: meta.background === 'grey' ? backgroundGrey : undefined,
};
const codeBox = (
<section className={codeBoxClass} id={meta.id}>
<section className="code-box-demo" data-compact={meta.compact}>
<section className="code-box-demo" style={codeBoxDemoStyle}>
<ErrorBoundary>
<React.StrictMode>{this.liveDemo}</React.StrictMode>
</ErrorBoundary>
@ -384,7 +393,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
ref={this.riddleIconRef}
onClick={() => {
this.track({ type: 'riddle', demo: meta.id });
this.riddleIconRef.current.submit();
this.riddleIconRef.current?.submit();
}}
>
<input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
@ -401,7 +410,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
ref={this.codeSandboxIconRef}
onClick={() => {
this.track({ type: 'codesandbox', demo: meta.id });
this.codeSandboxIconRef.current.submit();
this.codeSandboxIconRef.current?.submit();
}}
>
<input
@ -505,8 +514,8 @@ createRoot(document.getElementById('container')).render(<Demo />);
);
if (meta.version) {
codeBox = (
<Badge.Ribbon text={meta.version} color={meta.version.includes('<') ? 'red' : null}>
return (
<Badge.Ribbon text={meta.version} color={meta.version.includes('<') ? 'red' : undefined}>
{codeBox}
</Badge.Ribbon>
);

8
.dumi/theme/common/styles/Demo.tsx
View File

@ -26,6 +26,7 @@ export default () => {
margin: 0 0 16px;
border: 1px solid ${token.colorSplit};
border-radius: ${token.borderRadius}px;
background-color: ${token.colorBgContainer};
transition: all 0.2s;
.code-box-title {
@ -36,14 +37,9 @@ export default () => {
}
}
&,
.code-box-demo {
background-color: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px;
&[data-compact] {
padding: 0;
}
border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
}
.markdown {

13
components/card/demo/border-less.md
View File

@ -5,16 +5,3 @@
## en-US
A borderless card on a gray background.
```css
.site-card-border-less-wrapper {
padding: 30px;
background: #ececec;
}
```
<style>
[data-theme="dark"] .site-card-border-less-wrapper {
background: #303030;
}
</style>

11
components/card/demo/in-column.md
View File

@ -5,14 +5,3 @@
## en-US
Cards usually cooperate with grid column layout in overview page.
<style>
.site-card-wrapper {
padding: 30px;
background: #ececec;
}
[data-theme="dark"] .site-card-wrapper {
background: #303030;
}
</style>

4
components/card/index.en-US.md
View File

@ -15,10 +15,10 @@ A card can be used to display content related to a single subject. The content c
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Basic card</code>
<code src="./demo/border-less.tsx">No border</code>
<code src="./demo/border-less.tsx" background="grey">No border</code>
<code src="./demo/simple.tsx">Simple card</code>
<code src="./demo/flexible-content.tsx">Customized content</code>
<code src="./demo/in-column.tsx">Card in column</code>
<code src="./demo/in-column.tsx" background="grey">Card in column</code>
<code src="./demo/loading.tsx">Loading card</code>
<code src="./demo/grid-card.tsx">Grid card</code>
<code src="./demo/inner.tsx">Inner card</code>

4
components/card/index.zh-CN.md
View File

@ -16,10 +16,10 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAA
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">典型卡片</code>
<code src="./demo/border-less.tsx">无边框</code>
<code src="./demo/border-less.tsx" background="grey">无边框</code>
<code src="./demo/simple.tsx">简洁卡片</code>
<code src="./demo/flexible-content.tsx">更灵活的内容展示</code>
<code src="./demo/in-column.tsx">栅格卡片</code>
<code src="./demo/in-column.tsx" background="grey">栅格卡片</code>
<code src="./demo/loading.tsx">预加载的卡片</code>
<code src="./demo/grid-card.tsx">网格型内嵌卡片</code>
<code src="./demo/inner.tsx">内部卡片</code>

12
components/layout/index.en-US.md
View File

@ -59,15 +59,15 @@ Style of a navigation should conform to its level.
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Basic Structure</code>
<code src="./demo/top.tsx">Header-Content-Footer</code>
<code src="./demo/top-side-2.tsx">Header Sider 2</code>
<code src="./demo/top-side.tsx">Header-Sider</code>
<code src="./demo/top.tsx" compact background="grey">Header-Content-Footer</code>
<code src="./demo/top-side-2.tsx" compact background="grey">Header Sider 2</code>
<code src="./demo/top-side.tsx" compact background="grey">Header-Sider</code>
<code src="./demo/side.tsx" iframe="360">Sider</code>
<code src="./demo/custom-trigger.tsx">Custom trigger</code>
<code src="./demo/responsive.tsx">Responsive</code>
<code src="./demo/custom-trigger.tsx" compact background="grey">Custom trigger</code>
<code src="./demo/responsive.tsx" compact background="grey">Responsive</code>
<code src="./demo/fixed.tsx" iframe="360">Fixed Header</code>
<code src="./demo/fixed-sider.tsx" iframe="360">Fixed Sider</code>
<code src="./demo/custom-trigger-debug.tsx" debug>Custom trigger debug</code>
<code src="./demo/custom-trigger-debug.tsx" compact background="grey" debug>Custom trigger debug</code>
## API

12
components/layout/index.zh-CN.md
View File

@ -60,15 +60,15 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">基本结构</code>
<code src="./demo/top.tsx">上中下布局</code>
<code src="./demo/top-side-2.tsx">顶部-侧边布局-通栏</code>
<code src="./demo/top-side.tsx">顶部-侧边布局</code>
<code src="./demo/top.tsx" compact background="grey">上中下布局</code>
<code src="./demo/top-side-2.tsx" compact background="grey">顶部-侧边布局-通栏</code>
<code src="./demo/top-side.tsx" compact background="grey">顶部-侧边布局</code>
<code src="./demo/side.tsx" iframe="360">侧边布局</code>
<code src="./demo/custom-trigger.tsx">自定义触发器</code>
<code src="./demo/responsive.tsx">响应式布局</code>
<code src="./demo/custom-trigger.tsx" compact background="grey">自定义触发器</code>
<code src="./demo/responsive.tsx" compact background="grey">响应式布局</code>
<code src="./demo/fixed.tsx" iframe="360">固定头部</code>
<code src="./demo/fixed-sider.tsx" iframe="360">固定侧边栏</code>
<code src="./demo/custom-trigger-debug.tsx" debug>自定义触发器 Debug</code>
<code src="./demo/custom-trigger-debug.tsx" compact background="grey" debug>自定义触发器 Debug</code>
## API

198
components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -157,146 +157,142 @@ exports[`renders ./components/statistic/demo/basic.tsx extend context correctly
exports[`renders ./components/statistic/demo/card.tsx extend context correctly 1`] = `
<div
class="site-statistic-demo-card"
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
>
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
class="ant-col ant-col-12"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-col ant-col-12"
style="padding-left:8px;padding-right:8px"
class="ant-card"
>
<div
class="ant-card ant-card-bordered"
class="ant-card-body"
>
<div
class="ant-card-body"
class="ant-statistic"
>
<div
class="ant-statistic"
class="ant-statistic-title"
>
<div
class="ant-statistic-title"
>
Active
</div>
<div
class="ant-statistic-content"
style="color:#3f8600"
Active
</div>
<div
class="ant-statistic-content"
style="color:#3f8600"
>
<span
class="ant-statistic-content-prefix"
>
<span
class="ant-statistic-content-prefix"
aria-label="arrow-up"
class="anticon anticon-arrow-up"
role="img"
>
<span
aria-label="arrow-up"
class="anticon anticon-arrow-up"
role="img"
<svg
aria-hidden="true"
data-icon="arrow-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="arrow-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
/>
</svg>
</span>
<path
d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
/>
</svg>
</span>
</span>
<span
class="ant-statistic-content-value"
>
<span
class="ant-statistic-content-value-int"
>
11
</span>
<span
class="ant-statistic-content-value"
class="ant-statistic-content-value-decimal"
>
<span
class="ant-statistic-content-value-int"
>
11
</span>
<span
class="ant-statistic-content-value-decimal"
>
.28
</span>
.28
</span>
<span
class="ant-statistic-content-suffix"
>
%
</span>
</div>
</span>
<span
class="ant-statistic-content-suffix"
>
%
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-col ant-col-12"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-col ant-col-12"
style="padding-left:8px;padding-right:8px"
class="ant-card"
>
<div
class="ant-card ant-card-bordered"
class="ant-card-body"
>
<div
class="ant-card-body"
class="ant-statistic"
>
<div
class="ant-statistic"
class="ant-statistic-title"
>
<div
class="ant-statistic-title"
>
Idle
</div>
<div
class="ant-statistic-content"
style="color:#cf1322"
Idle
</div>
<div
class="ant-statistic-content"
style="color:#cf1322"
>
<span
class="ant-statistic-content-prefix"
>
<span
class="ant-statistic-content-prefix"
aria-label="arrow-down"
class="anticon anticon-arrow-down"
role="img"
>
<span
aria-label="arrow-down"
class="anticon anticon-arrow-down"
role="img"
<svg
aria-hidden="true"
data-icon="arrow-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="arrow-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z"
/>
</svg>
</span>
<path
d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z"
/>
</svg>
</span>
</span>
<span
class="ant-statistic-content-value"
>
<span
class="ant-statistic-content-value-int"
>
9
</span>
<span
class="ant-statistic-content-value"
class="ant-statistic-content-value-decimal"
>
<span
class="ant-statistic-content-value-int"
>
9
</span>
<span
class="ant-statistic-content-value-decimal"
>
.30
</span>
.30
</span>
<span
class="ant-statistic-content-suffix"
>
%
</span>
</div>
</span>
<span
class="ant-statistic-content-suffix"
>
%
</span>
</div>
</div>
</div>

198
components/statistic/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -157,146 +157,142 @@ exports[`renders ./components/statistic/demo/basic.tsx correctly 1`] = `
exports[`renders ./components/statistic/demo/card.tsx correctly 1`] = `
<div
class="site-statistic-demo-card"
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
>
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
class="ant-col ant-col-12"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-col ant-col-12"
style="padding-left:8px;padding-right:8px"
class="ant-card"
>
<div
class="ant-card ant-card-bordered"
class="ant-card-body"
>
<div
class="ant-card-body"
class="ant-statistic"
>
<div
class="ant-statistic"
class="ant-statistic-title"
>
<div
class="ant-statistic-title"
>
Active
</div>
<div
class="ant-statistic-content"
style="color:#3f8600"
Active
</div>
<div
class="ant-statistic-content"
style="color:#3f8600"
>
<span
class="ant-statistic-content-prefix"
>
<span
class="ant-statistic-content-prefix"
aria-label="arrow-up"
class="anticon anticon-arrow-up"
role="img"
>
<span
aria-label="arrow-up"
class="anticon anticon-arrow-up"
role="img"
<svg
aria-hidden="true"
data-icon="arrow-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="arrow-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
/>
</svg>
</span>
<path
d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
/>
</svg>
</span>
</span>
<span
class="ant-statistic-content-value"
>
<span
class="ant-statistic-content-value-int"
>
11
</span>
<span
class="ant-statistic-content-value"
class="ant-statistic-content-value-decimal"
>
<span
class="ant-statistic-content-value-int"
>
11
</span>
<span
class="ant-statistic-content-value-decimal"
>
.28
</span>
.28
</span>
<span
class="ant-statistic-content-suffix"
>
%
</span>
</div>
</span>
<span
class="ant-statistic-content-suffix"
>
%
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-col ant-col-12"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-col ant-col-12"
style="padding-left:8px;padding-right:8px"
class="ant-card"
>
<div
class="ant-card ant-card-bordered"
class="ant-card-body"
>
<div
class="ant-card-body"
class="ant-statistic"
>
<div
class="ant-statistic"
class="ant-statistic-title"
>
<div
class="ant-statistic-title"
>
Idle
</div>
<div
class="ant-statistic-content"
style="color:#cf1322"
Idle
</div>
<div
class="ant-statistic-content"
style="color:#cf1322"
>
<span
class="ant-statistic-content-prefix"
>
<span
class="ant-statistic-content-prefix"
aria-label="arrow-down"
class="anticon anticon-arrow-down"
role="img"
>
<span
aria-label="arrow-down"
class="anticon anticon-arrow-down"
role="img"
<svg
aria-hidden="true"
data-icon="arrow-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="arrow-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z"
/>
</svg>
</span>
<path
d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z"
/>
</svg>
</span>
</span>
<span
class="ant-statistic-content-value"
>
<span
class="ant-statistic-content-value-int"
>
9
</span>
<span
class="ant-statistic-content-value"
class="ant-statistic-content-value-decimal"
>
<span
class="ant-statistic-content-value-int"
>
9
</span>
<span
class="ant-statistic-content-value-decimal"
>
.30
</span>
.30
</span>
<span
class="ant-statistic-content-suffix"
>
%
</span>
</div>
</span>
<span
class="ant-statistic-content-suffix"
>
%
</span>
</div>
</div>
</div>

13
components/statistic/demo/card.md
View File

@ -5,16 +5,3 @@
## en-US
Display statistic data in Card.
```css
.site-statistic-demo-card {
padding: 24px;
background: #ececec;
}
```
<style>
[data-theme="dark"] .site-statistic-demo-card {
background: #303030;
}
</style>

54
components/statistic/demo/card.tsx
View File

@ -3,34 +3,32 @@ import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import { Card, Col, Row, Statistic } from 'antd';
const App: React.FC = () => (
<div className="site-statistic-demo-card">
<Row gutter={16}>
<Col span={12}>
<Card>
<Statistic
title="Active"
value={11.28}
precision={2}
valueStyle={{ color: '#3f8600' }}
prefix={<ArrowUpOutlined />}
suffix="%"
/>
</Card>
</Col>
<Col span={12}>
<Card>
<Statistic
title="Idle"
value={9.3}
precision={2}
valueStyle={{ color: '#cf1322' }}
prefix={<ArrowDownOutlined />}
suffix="%"
/>
</Card>
</Col>
</Row>
</div>
<Row gutter={16}>
<Col span={12}>
<Card bordered={false}>
<Statistic
title="Active"
value={11.28}
precision={2}
valueStyle={{ color: '#3f8600' }}
prefix={<ArrowUpOutlined />}
suffix="%"
/>
</Card>
</Col>
<Col span={12}>
<Card bordered={false}>
<Statistic
title="Idle"
value={9.3}
precision={2}
valueStyle={{ color: '#cf1322' }}
prefix={<ArrowDownOutlined />}
suffix="%"
/>
</Card>
</Col>
</Row>
);
export default App;

2
components/statistic/index.en-US.md
View File

@ -20,7 +20,7 @@ Display statistic number.
<code src="./demo/basic.tsx">Basic</code>
<code src="./demo/unit.tsx">Unit</code>
<code src="./demo/animated.tsx">Animated number</code>
<code src="./demo/card.tsx" compact>In Card</code>
<code src="./demo/card.tsx" background="grey">In Card</code>
<code src="./demo/countdown.tsx">Countdown</code>
## API

2
components/statistic/index.zh-CN.md
View File

@ -21,7 +21,7 @@ demo:
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/unit.tsx">单位</code>
<code src="./demo/animated.tsx">动画效果</code>
<code src="./demo/card.tsx" compact>在卡片中使用</code>
<code src="./demo/card.tsx" background="grey">在卡片中使用</code>
<code src="./demo/countdown.tsx">倒计时</code>
## API

2
components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -465,7 +465,7 @@ exports[`renders ./components/tabs/demo/card.tsx extend context correctly 1`] =
exports[`renders ./components/tabs/demo/card-top.tsx extend context correctly 1`] = `
<div
class="css-evmtdo"
class="css-1g7foe3"
>
<div
class="ant-tabs ant-tabs-top ant-tabs-card"

2
components/tabs/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -408,7 +408,7 @@ exports[`renders ./components/tabs/demo/card.tsx correctly 1`] = `
exports[`renders ./components/tabs/demo/card-top.tsx correctly 1`] = `
<div
class="css-evmtdo"
class="css-1g7foe3"
>
<div
class="ant-tabs ant-tabs-top ant-tabs-card"

3
components/tabs/demo/card-top.tsx
View File

@ -7,9 +7,6 @@ const useStyle = () => {
const antdTabsCls = '.ant-tabs';
return css`
background: ${token.colorBgLayout};
padding: ${token.paddingLG}px;
${antdTabsCls}${antdTabsCls}-card {
${antdTabsCls}-content {
padding: ${token.padding}px;

2
components/tabs/index.en-US.md
View File

@ -28,7 +28,7 @@ Ant Design has 3 types of Tabs for different situations.
<code src="./demo/position.tsx">Position</code>
<code src="./demo/card.tsx">Card type tab</code>
<code src="./demo/editable-card.tsx">Add & close tab</code>
<code src="./demo/card-top.tsx" compact debug>Container of card type Tab</code>
<code src="./demo/card-top.tsx" compact background="grey" debug>Container of card type Tab</code>
<code src="./demo/custom-add-trigger.tsx">Customized trigger of new tab</code>
<code src="./demo/custom-tab-bar.tsx">Customized bar of tab</code>
<code src="./demo/custom-tab-bar-node.tsx">Draggable Tabs</code>

2
components/tabs/index.zh-CN.md
View File

@ -31,7 +31,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
<code src="./demo/position.tsx">位置</code>
<code src="./demo/card.tsx">卡片式页签</code>
<code src="./demo/editable-card.tsx">新增和关闭页签</code>
<code src="./demo/card-top.tsx" compact debug>卡片式页签容器</code>
<code src="./demo/card-top.tsx" compact background="grey" debug>卡片式页签容器</code>
<code src="./demo/custom-add-trigger.tsx">自定义新增页签触发器</code>
<code src="./demo/custom-tab-bar.tsx">自定义页签头</code>
<code src="./demo/custom-tab-bar-node.tsx">可拖拽标签</code>

1
package.json
View File

@ -175,6 +175,7 @@
"@types/jest-image-snapshot": "^6.1.0",
"@types/jquery": "^3.5.14",
"@types/lodash": "^4.14.139",
"@types/lz-string": "^1.3.34",
"@types/prismjs": "^1.26.0",
"@types/puppeteer": "^7.0.4",
"@types/qs": "^6.9.7",