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

docs: update demo for badge

pull/4303/head
Benjy Cui 8 years ago
parent
ecd2e57ef2
commit
e6052d5832
8 changed files with 423 additions and 451 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. 795
      components/badge/__tests__/__snapshots__/demo.test.js.snap
  2. 27
      components/badge/demo/99plus.md
  3. 4
      components/badge/demo/basic.md
  4. 28
      components/badge/demo/change.md
  5. 2
      components/badge/demo/link.md
  6. 2
      components/badge/demo/no-wrapper.md
  7. 14
      components/badge/demo/overflow.md
  8. 2
      components/badge/demo/status.md

795
components/badge/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,281 +1,3 @@
exports[`test renders ./components/badge/demo/99plus.md correctly 1`] = `
<div>
<span
class="ant-badge"
title="99">
<a
class="head-example"
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="">
9
</p>
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="current">
9
</p>
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="">
9
</p>
</span>
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="">
9
</p>
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="current">
9
</p>
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="">
9
</p>
</span>
</sup>
</span>
<span
class="ant-badge"
title="200">
<a
class="head-example"
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
99+
</sup>
</span>
</div>
`;
exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `
<span
class="ant-badge"
@ -415,21 +137,361 @@ exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `
</span>
`;
exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
<div>
<div>
<span
class="ant-badge"
title="5">
<a
class="head-example"
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="">
9
</p>
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="current">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="">
9
</p>
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="">
9
</p>
</span>
</sup>
</span>
<div
class="ant-btn-group">
<button
class="ant-btn ant-btn-ghost"
type="button">
<i
class="anticon anticon-minus" />
</button>
<button
class="ant-btn ant-btn-ghost"
type="button">
<i
class="anticon anticon-plus" />
</button>
</div>
</div>
<div
style="margin-top:10px;">
<span
class="ant-badge">
<a
class="head-example"
href="#" />
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
</span>
<span
class="ant-switch"
tabindex="0">
<span
class="ant-switch-inner" />
</span>
</div>
</div>
`;
exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
<div>
<span
class="ant-badge">
<i
class="anticon anticon-notification" />
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
</span>
<span
class="ant-badge">
<a
href="#">
Link something
</a>
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
</span>
</div>
`;
exports[`test renders ./components/badge/demo/link.md correctly 1`] = `
<a
href="#">
<span
class="ant-badge"
title="5">
<span
class="head-example" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="">
9
</p>
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="current">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="">
9
</p>
<p
class="">
0
</p>
<p
class="">
1
</p>
<p
class="">
2
</p>
<p
class="">
3
</p>
<p
class="">
4
</p>
<p
class="">
5
</p>
<p
class="">
6
</p>
<p
class="">
7
</p>
<p
class="">
8
</p>
<p
class="">
9
</p>
</span>
</sup>
</span>
</a>
`;
exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
<div>
<span
class="ant-badge"
title="5">
<a
class="head-example"
href="#" />
class="ant-badge ant-badge-not-a-wrapper"
title="25">
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
style="transition:none;-webkit-transform:translateY(-216px);transform:translateY(-216px);height:18px;">
<p
class="">
0
@ -479,7 +541,7 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
1
</p>
<p
class="">
class="current">
2
</p>
<p
@ -491,7 +553,7 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
4
</p>
<p
class="current">
class="">
5
</p>
<p
@ -551,84 +613,6 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
9
</p>
</span>
</sup>
</span>
<span
class="ant-badge">
<a
class="head-example"
href="#" />
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
</span>
<div
style="margin-top:10px;">
<div
class="ant-btn-group">
<button
class="ant-btn ant-btn-ghost"
type="button">
<i
class="anticon anticon-minus" />
</button>
<button
class="ant-btn ant-btn-ghost"
type="button">
<i
class="anticon anticon-plus" />
</button>
</div>
<button
class="ant-btn ant-btn-ghost"
style="margin-left:8px;"
type="button">
<span>
Switch state
</span>
</button>
</div>
</div>
`;
exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
<div>
<span
class="ant-badge">
<i
class="anticon anticon-notification" />
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
</span>
<span
class="ant-badge">
<a
href="#">
Link something
</a>
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
</span>
</div>
`;
exports[`test renders ./components/badge/demo/link.md correctly 1`] = `
<a
href="#">
<span
class="ant-badge"
title="5">
<span
class="head-example" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
@ -755,21 +739,17 @@ exports[`test renders ./components/badge/demo/link.md correctly 1`] = `
</span>
</sup>
</span>
</a>
`;
exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
<div>
<span
class="ant-badge ant-badge-not-a-wrapper"
title="25">
title="4">
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
height="18"
style="background-color:#fff;color:#999;border-color:#d9d9d9;">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-216px);transform:translateY(-216px);height:18px;">
style="transition:none;-webkit-transform:translateY(-252px);transform:translateY(-252px);height:18px;">
<p
class="">
0
@ -819,7 +799,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
1
</p>
<p
class="current">
class="">
2
</p>
<p
@ -827,7 +807,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
3
</p>
<p
class="">
class="current">
4
</p>
<p
@ -891,9 +871,37 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
9
</p>
</span>
</sup>
</span>
<span
class="ant-badge ant-badge-not-a-wrapper"
title="109">
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18"
style="background-color:#87d068;">
99+
</sup>
</span>
</div>
`;
exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
<div>
<span
class="ant-badge"
title="99">
<a
class="head-example"
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
<p
class="">
0
@ -955,7 +963,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
4
</p>
<p
class="current">
class="">
5
</p>
<p
@ -971,7 +979,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
8
</p>
<p
class="">
class="current">
9
</p>
<p
@ -1015,19 +1023,9 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
9
</p>
</span>
</sup>
</span>
<span
class="ant-badge ant-badge-not-a-wrapper"
title="4">
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18"
style="background-color:#fff;color:#999;border-color:#d9d9d9;">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-252px);transform:translateY(-252px);height:18px;">
style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
<p
class="">
0
@ -1085,7 +1083,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
3
</p>
<p
class="current">
class="">
4
</p>
<p
@ -1105,7 +1103,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
8
</p>
<p
class="">
class="current">
9
</p>
<p
@ -1152,21 +1150,18 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
</sup>
</span>
<span
class="ant-badge ant-badge-not-a-wrapper"
title="109">
class="ant-badge"
title="100">
<a
class="head-example"
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18"
style="background-color:#87d068;">
height="18">
99+
</sup>
</span>
</div>
`;
exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
<div>
<span
class="ant-badge"
title="99">

27
components/badge/demo/99plus.md
View File

@ -1,27 +0,0 @@
---
order: 1
title:
zh-CN: 大数字
en-US: Overflowed count
---
## zh-CN
超过 99 的会显示为 `99+`。
## en-US
`99+` is displayed when count is larger than `99`.
````jsx
import { Badge } from 'antd';
ReactDOM.render(<div>
<Badge count={99}>
<a href="#" className="head-example" />
</Badge>
<Badge count={200}>
<a href="#" className="head-example" />
</Badge>
</div>, mountNode);
````

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

@ -23,7 +23,7 @@ ReactDOM.render(
, mountNode);
````
````css
<style>
.ant-badge:not(.ant-badge-status) {
margin-right: 16px;
}
@ -34,4 +34,4 @@ ReactDOM.render(
background: #eee;
display: inline-block;
}
````
</style>

28
components/badge/demo/change.md
View File

@ -14,7 +14,7 @@ title:
The count will be animated as it changes.
````jsx
import { Badge, Button, Icon } from 'antd';
import { Badge, Button, Icon, Switch } from 'antd';
const ButtonGroup = Button.Group;
const Test = React.createClass({
@ -35,21 +35,16 @@ const Test = React.createClass({
}
this.setState({ count });
},
onClick() {
this.setState({
show: !this.state.show,
});
onChange(show) {
this.setState({ show });
},
render() {
return (
<div>
<Badge count={this.state.count}>
<a href="#" className="head-example" />
</Badge>
<Badge dot={this.state.show}>
<a href="#" className="head-example" />
</Badge>
<div style={{ marginTop: 10 }}>
<div>
<Badge count={this.state.count}>
<a href="#" className="head-example" />
</Badge>
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
@ -58,9 +53,12 @@ const Test = React.createClass({
<Icon type="plus" />
</Button>
</ButtonGroup>
<Button type="ghost" onClick={this.onClick} style={{ marginLeft: 8 }}>
Switch state
</Button>
</div>
<div style={{ marginTop: 10 }}>
<Badge dot={this.state.show}>
<a href="#" className="head-example" />
</Badge>
<Switch onChange={this.onChange} />
</div>
</div>
);

2
components/badge/demo/link.md
View File

@ -1,5 +1,5 @@
---
order: 2
order: 3
title:
zh-CN: 可点击
en-US: Clickable

2
components/badge/demo/no-wrapper.md
View File

@ -1,5 +1,5 @@
---
order: 0
order: 1
title:
zh-CN: 独立使用
en-US: Standalone

14
components/badge/demo/overflow.md
View File

@ -1,22 +1,28 @@
---
order: 6
order: 2
title:
zh-CN: 封顶数字
en-US: Customized overflow count
en-US: Overflow Count
---
## zh-CN
超过 `overflowCount` 的会显示为 `${overflowCount}+`。
超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。
## en-US
`${overflowCount}+` is displayed when count is larger than `overflowCount`.
`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
````jsx
import { Badge } from 'antd';
ReactDOM.render(<div>
<Badge count={99}>
<a href="#" className="head-example" />
</Badge>
<Badge count={100}>
<a href="#" className="head-example" />
</Badge>
<Badge count={99} overflowCount={10}>
<a href="#" className="head-example" />
</Badge>

2
components/badge/demo/status.md
View File

@ -1,5 +1,5 @@
---
order: 7
order: 6
title:
zh-CN: 状态点
en-US: Status

Write Preview
Loading…
Cancel
Save