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

docs: improve component demo style (#38643)

Browse Source 
* chore: examine badge

* chore: examine button

* chore: examine alert

* test: update snapshot
This commit is contained in:
Wuxh 2022-11-17 23:19:28 +08:00 committed by GitHub
parent ced4f0246e
commit d225c56c31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 428 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/alert/demo/action.md
View File

@ -5,9 +5,3 @@
## en-US
Custom action.
<style>
.code-box-demo .ant-alert {
margin-bottom: 16px;
}
</style>

6
components/alert/demo/basic.md
View File

@ -5,9 +5,3 @@
## en-US
The simplest usage for short messages.
<style>
.code-box-demo .ant-alert {
margin-bottom: 16px;
}
</style>

6
components/alert/demo/style.md
View File

@ -5,9 +5,3 @@
## en-US
There are 4 types of Alert: `success`, `info`, `warning`, `error`.
<style>
[data-theme="compact"] .code-box-demo .ant-alert {
margin-bottom: 8px;
}
</style>

382
components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1728,312 +1728,354 @@ exports[`renders ./components/badge/demo/overflow.tsx extend context correctly 1
`;
exports[`renders ./components/badge/demo/ribbbon.tsx extend context correctly 1`] = `
Array [
<div
class="ant-space ant-space-vertical"
style="width:100%"
>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
]
</div>
</div>
`;
exports[`renders ./components/badge/demo/ribbon-debug.tsx extend context correctly 1`] = `

382
components/badge/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1728,312 +1728,354 @@ exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = `
`;
exports[`renders ./components/badge/demo/ribbbon.tsx correctly 1`] = `
Array [
<div
class="ant-space ant-space-vertical"
style="width:100%"
>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
]
</div>
</div>
`;
exports[`renders ./components/badge/demo/ribbon-debug.tsx correctly 1`] = `

10
components/badge/demo/basic.md
View File

@ -5,13 +5,3 @@
## en-US
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
<style>
.ant-badge:not(.ant-badge-not-a-wrapper) {
margin-right: 20px;
}
.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
margin-right: 0;
margin-left: 20px;
}
</style>

6
components/badge/demo/colorful-with-count-debug.md
View File

@ -5,9 +5,3 @@
## en-US
support `count` when use colorful badge
```css
.ant-tag {
margin-bottom: 8px;
}
```

6
components/badge/demo/ribbbon.md
View File

@ -5,9 +5,3 @@
## en-US
Use ribbon badge.
```css
#components-badge-demo-ribbbon .ant-card {
margin-bottom: 16px;
}
```

6
components/badge/demo/ribbbon.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { Badge, Card } from 'antd';
import { Badge, Card, Space } from 'antd';
const App: React.FC = () => (
<>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Badge.Ribbon text="Hippies">
<Card title="Pushes open the window" size="small">
and raises the spyglass.
@ -43,7 +43,7 @@ const App: React.FC = () => (
and raises the spyglass.
</Card>
</Badge.Ribbon>
</>
</Space>
);
export default App;

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

@ -83,7 +83,7 @@ group:
<style>
.site-button-ghost-wrapper {
padding: 8px;
padding: 16px;
background: rgb(190, 200, 200);
}