mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: migrate demo structure to dumi way
This commit is contained in:
PeachScript
parent
2d4624bb9b
commit
939d4e57c7
@ -83,6 +83,12 @@ module.exports = {
|
||||
'react/no-unstable-nested-components': 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/demo/*.tsx'],
|
||||
rules: {
|
||||
'import/no-extraneous-dependencies': 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
'react/jsx-one-expression-per-line': 0,
|
||||
|
||||
@ -10,6 +10,12 @@
|
||||
"options": {
|
||||
"parser": "json"
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": "components/*/index.*.md",
|
||||
"options": {
|
||||
"proseWrap": "preserve"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
@ -12,31 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
The simplest usage.
|
||||
|
||||
```tsx
|
||||
import { Affix, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [top, setTop] = useState(10);
|
||||
const [bottom, setBottom] = useState(10);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Affix offsetTop={top}>
|
||||
<Button type="primary" onClick={() => setTop(top + 10)}>
|
||||
Affix top
|
||||
</Button>
|
||||
</Affix>
|
||||
<br />
|
||||
<Affix offsetBottom={bottom}>
|
||||
<Button type="primary" onClick={() => setBottom(bottom + 10)}>
|
||||
Affix bottom
|
||||
</Button>
|
||||
</Affix>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
25
components/affix/demo/basic.tsx
Normal file
25
components/affix/demo/basic.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Affix, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [top, setTop] = useState(10);
|
||||
const [bottom, setBottom] = useState(10);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Affix offsetTop={top}>
|
||||
<Button type="primary" onClick={() => setTop(top + 10)}>
|
||||
Affix top
|
||||
</Button>
|
||||
</Affix>
|
||||
<br />
|
||||
<Affix offsetBottom={bottom}>
|
||||
<Button type="primary" onClick={() => setBottom(bottom + 10)}>
|
||||
Affix bottom
|
||||
</Button>
|
||||
</Affix>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,11 +1,3 @@
|
||||
---
|
||||
order: 99
|
||||
title:
|
||||
zh-CN: 调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678
|
||||
en-US: debug
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
DEBUG
|
||||
@ -13,28 +5,3 @@ DEBUG
|
||||
## en-US
|
||||
|
||||
DEBUG
|
||||
|
||||
```tsx
|
||||
import { Affix, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [top, setTop] = useState(10);
|
||||
|
||||
return (
|
||||
<div style={{ height: 10000 }}>
|
||||
<div>Top</div>
|
||||
<Affix offsetTop={top}>
|
||||
<div style={{ background: 'red' }}>
|
||||
<Button type="primary" onClick={() => setTop(top + 10)}>
|
||||
Affix top
|
||||
</Button>
|
||||
</div>
|
||||
</Affix>
|
||||
<div>Bottom</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
23
components/affix/demo/debug.tsx
Normal file
23
components/affix/demo/debug.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* debug: true */import { Affix, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [top, setTop] = useState(10);
|
||||
|
||||
return (
|
||||
<div style={{ height: 10000 }}>
|
||||
<div>Top</div>
|
||||
<Affix offsetTop={top}>
|
||||
<div style={{ background: 'red' }}>
|
||||
<Button type="primary" onClick={() => setTop(top + 10)}>
|
||||
Affix top
|
||||
</Button>
|
||||
</div>
|
||||
</Affix>
|
||||
<div>Bottom</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 固定状态改变的回调
|
||||
en-US: Callback
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以获得是否固定的状态。
|
||||
@ -12,16 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Callback with affixed state.
|
||||
|
||||
```tsx
|
||||
import { Affix, Button } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
|
||||
<Button>120px to affix top</Button>
|
||||
</Affix>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
10
components/affix/demo/on-change.tsx
Normal file
10
components/affix/demo/on-change.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { Affix, Button } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
|
||||
<Button>120px to affix top</Button>
|
||||
</Affix>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 滚动容器
|
||||
en-US: Container to scroll.
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
|
||||
@ -13,27 +6,6 @@ title:
|
||||
|
||||
Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
|
||||
|
||||
```tsx
|
||||
import { Affix, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [container, setContainer] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
return (
|
||||
<div className="scrollable-container" ref={setContainer}>
|
||||
<div className="background">
|
||||
<Affix target={() => container}>
|
||||
<Button type="primary">Fixed at the top of container</Button>
|
||||
</Affix>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
<style>
|
||||
#components-affix-demo-target .scrollable-container {
|
||||
height: 100px;
|
||||
|
||||
18
components/affix/demo/target.tsx
Normal file
18
components/affix/demo/target.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { Affix, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [container, setContainer] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
return (
|
||||
<div className="scrollable-container" ref={setContainer}>
|
||||
<div className="background">
|
||||
<Affix target={() => container}>
|
||||
<Button type="primary">Fixed at the top of container</Button>
|
||||
</Affix>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -3,6 +3,8 @@ category: Components
|
||||
type: Navigation
|
||||
title: Affix
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
Wrap Affix around another component to make it stick the viewport.
|
||||
@ -13,6 +15,13 @@ On longer web pages, it's helpful to stick component into the viewport. This is
|
||||
|
||||
Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
|
||||
|
||||
## Examples
|
||||
|
||||
<code src="./demo/basic.tsx">Basic</code>
|
||||
<code src="./demo/on-change.tsx">Callback</code>
|
||||
<code src="./demo/target.tsx">Container to scroll.</code>
|
||||
<code src="./demo/debug.tsx">debug</code>
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|
||||
@ -4,6 +4,8 @@ subtitle: 固钉
|
||||
type: 导航
|
||||
title: Affix
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
将页面元素钉在可视范围。
|
||||
@ -14,6 +16,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
|
||||
|
||||
页面可视范围过小时，慎用此功能以免遮挡页面内容。
|
||||
|
||||
## 代码演示
|
||||
|
||||
<code src="./demo/basic.tsx">基本</code>
|
||||
<code src="./demo/on-change.tsx">固定状态改变的回调</code>
|
||||
<code src="./demo/target.tsx">滚动容器</code>
|
||||
<code src="./demo/debug.tsx">调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678</code>
|
||||
|
||||
## API
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 13
|
||||
title:
|
||||
zh-CN: 操作
|
||||
en-US: Custom action
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以在右上角自定义操作项。
|
||||
@ -13,68 +6,6 @@ title:
|
||||
|
||||
Custom action.
|
||||
|
||||
```tsx
|
||||
import { Alert, Button, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert
|
||||
message="Success Tips"
|
||||
type="success"
|
||||
showIcon
|
||||
action={
|
||||
<Button size="small" type="text">
|
||||
UNDO
|
||||
</Button>
|
||||
}
|
||||
closable
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
showIcon
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
action={
|
||||
<Button size="small" danger>
|
||||
Detail
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
type="warning"
|
||||
action={
|
||||
<Space>
|
||||
<Button size="small" type="ghost">
|
||||
Done
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
closable
|
||||
/>
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
action={
|
||||
<Space direction="vertical">
|
||||
<Button size="small" type="primary">
|
||||
Accept
|
||||
</Button>
|
||||
<Button size="small" danger type="ghost">
|
||||
Decline
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
closable
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-alert {
|
||||
margin-bottom: 16px;
|
||||
|
||||
59
components/alert/demo/action.tsx
Normal file
59
components/alert/demo/action.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { Alert, Button, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert
|
||||
message="Success Tips"
|
||||
type="success"
|
||||
showIcon
|
||||
action={
|
||||
<Button size="small" type="text">
|
||||
UNDO
|
||||
</Button>
|
||||
}
|
||||
closable
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
showIcon
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
action={
|
||||
<Button size="small" danger>
|
||||
Detail
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
type="warning"
|
||||
action={
|
||||
<Space>
|
||||
<Button size="small" type="ghost">
|
||||
Done
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
closable
|
||||
/>
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
action={
|
||||
<Space direction="vertical">
|
||||
<Button size="small" type="primary">
|
||||
Accept
|
||||
</Button>
|
||||
<Button size="small" danger type="ghost">
|
||||
Decline
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
closable
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,11 +1,3 @@
|
||||
---
|
||||
order: 6
|
||||
iframe: 250
|
||||
title:
|
||||
zh-CN: 顶部公告
|
||||
en-US: Banner
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
页面顶部通告形式，默认有图标且 `type` 为 'warning'。
|
||||
@ -13,26 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Display Alert as a banner at top of page.
|
||||
|
||||
```tsx
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert message="Warning text" banner />
|
||||
<br />
|
||||
<Alert
|
||||
message="Very long warning text warning text text text text text text text"
|
||||
banner
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert showIcon={false} message="Warning text without icon" banner />
|
||||
<br />
|
||||
<Alert type="error" message="Error text" banner />
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
21
components/alert/demo/banner.tsx
Normal file
21
components/alert/demo/banner.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
/*
|
||||
* iframe: 250 */import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert message="Warning text" banner />
|
||||
<br />
|
||||
<Alert
|
||||
message="Very long warning text warning text text text text text text text"
|
||||
banner
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert showIcon={false} message="Warning text without icon" banner />
|
||||
<br />
|
||||
<Alert type="error" message="Error text" banner />
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法，适用于简短的警告提示。
|
||||
@ -13,15 +6,6 @@ title:
|
||||
|
||||
The simplest usage for short messages.
|
||||
|
||||
```tsx
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => <Alert message="Success Text" type="success" />;
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-alert {
|
||||
margin-bottom: 16px;
|
||||
|
||||
6
components/alert/demo/basic.tsx
Normal file
6
components/alert/demo/basic.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => <Alert message="Success Text" type="success" />;
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 可关闭的警告提示
|
||||
en-US: Closable
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
显示关闭按钮，点击可关闭警告提示。
|
||||
@ -12,32 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
To show close button.
|
||||
|
||||
```tsx
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
console.log(e, 'I was closed.');
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert
|
||||
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
type="warning"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
26
components/alert/demo/closable.tsx
Normal file
26
components/alert/demo/closable.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
console.log(e, 'I was closed.');
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert
|
||||
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
type="warning"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 自定义关闭
|
||||
en-US: Customized Close Text
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
|
||||
@ -12,12 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Replace the default icon with customized text.
|
||||
|
||||
```tsx
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => <Alert message="Info Text" type="info" closeText="Close Now" />;
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
6
components/alert/demo/close-text.tsx
Normal file
6
components/alert/demo/close-text.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => <Alert message="Info Text" type="info" closeText="Close Now" />;
|
||||
|
||||
export default App;
|
||||
@ -1,11 +1,3 @@
|
||||
---
|
||||
order: 12
|
||||
debug: true
|
||||
title:
|
||||
zh-CN: 自定义图标
|
||||
en-US: Custom Icon
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可口的图标让信息类型更加醒目。
|
||||
@ -13,51 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
A relevant icon makes information clearer and more friendly.
|
||||
|
||||
```tsx
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const icon = <SmileOutlined />;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert icon={icon} message="showIcon = false" type="success" />
|
||||
<Alert icon={icon} message="Success Tips" type="success" showIcon />
|
||||
<Alert icon={icon} message="Informational Notes" type="info" showIcon />
|
||||
<Alert icon={icon} message="Warning" type="warning" showIcon />
|
||||
<Alert icon={icon} message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Success Tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
46
components/alert/demo/custom-icon.tsx
Normal file
46
components/alert/demo/custom-icon.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
/*
|
||||
* debug: true */import { SmileOutlined } from '@ant-design/icons';
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const icon = <SmileOutlined />;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert icon={icon} message="showIcon = false" type="success" />
|
||||
<Alert icon={icon} message="Success Tips" type="success" showIcon />
|
||||
<Alert icon={icon} message="Informational Notes" type="info" showIcon />
|
||||
<Alert icon={icon} message="Warning" type="warning" showIcon />
|
||||
<Alert icon={icon} message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Success Tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
icon={icon}
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 含有辅助性文字介绍
|
||||
en-US: Description
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
含有辅助性文字介绍的警告提示。
|
||||
@ -12,35 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Additional description for alert message.
|
||||
|
||||
```tsx
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
type="success"
|
||||
/>
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
29
components/alert/demo/description.tsx
Normal file
29
components/alert/demo/description.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
type="success"
|
||||
/>
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: React 错误处理
|
||||
en-US: ErrorBoundary
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
友好的 [React 错误处理](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) 包裹组件。
|
||||
@ -12,33 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
ErrorBoundary Component for making error handling easier in [React](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html).
|
||||
|
||||
```tsx
|
||||
import { Alert, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { ErrorBoundary } = Alert;
|
||||
const ThrowError: React.FC = () => {
|
||||
const [error, setError] = useState<Error>();
|
||||
const onClick = () => {
|
||||
setError(new Error('An Uncaught Error'));
|
||||
};
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
return (
|
||||
<Button danger onClick={onClick}>
|
||||
Click me to throw a error
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ErrorBoundary>
|
||||
<ThrowError />
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
27
components/alert/demo/error-boundary.tsx
Normal file
27
components/alert/demo/error-boundary.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { Alert, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { ErrorBoundary } = Alert;
|
||||
const ThrowError: React.FC = () => {
|
||||
const [error, setError] = useState<Error>();
|
||||
const onClick = () => {
|
||||
setError(new Error('An Uncaught Error'));
|
||||
};
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
return (
|
||||
<Button danger onClick={onClick}>
|
||||
Click me to throw a error
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ErrorBoundary>
|
||||
<ThrowError />
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 图标
|
||||
en-US: Icon
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可口的图标让信息类型更加醒目。
|
||||
@ -12,44 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
A relevant icon will make information clearer and more friendly.
|
||||
|
||||
```tsx
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<Alert message="Warning" type="warning" showIcon closable />
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
message="Success Tips"
|
||||
description="Detailed description and advice about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and information about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
showIcon
|
||||
closable
|
||||
/>
|
||||
<Alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
38
components/alert/demo/icon.tsx
Normal file
38
components/alert/demo/icon.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<Alert message="Warning" type="warning" showIcon closable />
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
message="Success Tips"
|
||||
description="Detailed description and advice about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and information about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
showIcon
|
||||
closable
|
||||
/>
|
||||
<Alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 6.1
|
||||
title:
|
||||
zh-CN: 轮播的公告
|
||||
en-US: Loop Banner
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
配合 [react-text-loop-next](https://npmjs.com/package/react-text-loop-next) 或 [react-fast-marquee](https://npmjs.com/package/react-fast-marquee) 实现消息轮播通知栏。
|
||||
@ -12,22 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Show a loop banner by using with [react-text-loop-next](https://npmjs.com/package/react-text-loop-next) or [react-fast-marquee](https://npmjs.com/package/react-fast-marquee).
|
||||
|
||||
```tsx
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
import Marquee from 'react-fast-marquee';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Alert
|
||||
banner
|
||||
message={
|
||||
<Marquee pauseOnHover gradient={false}>
|
||||
I can be a React component, multiple React components, or just some text.
|
||||
</Marquee>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
16
components/alert/demo/loop-banner.tsx
Normal file
16
components/alert/demo/loop-banner.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
import Marquee from 'react-fast-marquee';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Alert
|
||||
banner
|
||||
message={
|
||||
<Marquee pauseOnHover gradient={false}>
|
||||
I can be a React component, multiple React components, or just some text.
|
||||
</Marquee>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 平滑地卸载
|
||||
en-US: Smoothly Unmount
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
平滑、自然的卸载提示。
|
||||
@ -12,27 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Smoothly unmount Alert upon close.
|
||||
|
||||
```tsx
|
||||
import { Alert } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
|
||||
const handleClose = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{visible ? (
|
||||
<Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
|
||||
) : null}
|
||||
<p>placeholder text here</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
21
components/alert/demo/smooth-closed.tsx
Normal file
21
components/alert/demo/smooth-closed.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { Alert } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
|
||||
const handleClose = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{visible ? (
|
||||
<Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
|
||||
) : null}
|
||||
<p>placeholder text here</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 四种样式
|
||||
en-US: More types
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
共有四种样式 `success`、`info`、`warning`、`error`。
|
||||
@ -13,22 +6,6 @@ title:
|
||||
|
||||
There are 4 types of Alert: `success`, `info`, `warning`, `error`.
|
||||
|
||||
```tsx
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="compact"] .code-box-demo .ant-alert {
|
||||
margin-bottom: 8px;
|
||||
|
||||
13
components/alert/demo/style.tsx
Normal file
13
components/alert/demo/style.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { Alert } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -3,6 +3,8 @@ category: Components
|
||||
type: Feedback
|
||||
title: Alert
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
Alert component for feedback.
|
||||
@ -12,6 +14,21 @@ Alert component for feedback.
|
||||
- When you need to show alert messages to users.
|
||||
- When you need a persistent static container which is closable by user actions.
|
||||
|
||||
## Examples
|
||||
|
||||
<code src="./demo/basic.tsx">Basic</code>
|
||||
<code src="./demo/style.tsx">More types</code>
|
||||
<code src="./demo/closable.tsx">Closable</code>
|
||||
<code src="./demo/description.tsx">Description</code>
|
||||
<code src="./demo/icon.tsx">Icon</code>
|
||||
<code src="./demo/close-text.tsx">Customized Close Text</code>
|
||||
<code src="./demo/banner.tsx">Banner</code>
|
||||
<code src="./demo/loop-banner.tsx">Loop Banner</code>
|
||||
<code src="./demo/smooth-closed.tsx">Smoothly Unmount</code>
|
||||
<code src="./demo/error-boundary.tsx">ErrorBoundary</code>
|
||||
<code src="./demo/custom-icon.tsx">Custom Icon</code>
|
||||
<code src="./demo/action.tsx">Custom action</code>
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
|
||||
@ -4,6 +4,8 @@ subtitle: 警告提示
|
||||
type: 反馈
|
||||
title: Alert
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
警告提示，展现需要关注的信息。
|
||||
@ -13,6 +15,21 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
|
||||
- 当某个页面需要向用户显示警告的信息时。
|
||||
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
||||
|
||||
## 代码演示
|
||||
|
||||
<code src="./demo/basic.tsx">基本</code>
|
||||
<code src="./demo/style.tsx">四种样式</code>
|
||||
<code src="./demo/closable.tsx">可关闭的警告提示</code>
|
||||
<code src="./demo/description.tsx">含有辅助性文字介绍</code>
|
||||
<code src="./demo/icon.tsx">图标</code>
|
||||
<code src="./demo/close-text.tsx">自定义关闭</code>
|
||||
<code src="./demo/banner.tsx">顶部公告</code>
|
||||
<code src="./demo/loop-banner.tsx">轮播的公告</code>
|
||||
<code src="./demo/smooth-closed.tsx">平滑地卸载</code>
|
||||
<code src="./demo/error-boundary.tsx">React 错误处理</code>
|
||||
<code src="./demo/custom-icon.tsx">自定义图标</code>
|
||||
<code src="./demo/action.tsx">操作</code>
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
@ -13,26 +6,6 @@ title:
|
||||
|
||||
The simplest usage.
|
||||
|
||||
```tsx
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-affix {
|
||||
z-index: 11;
|
||||
|
||||
17
components/anchor/demo/basic.tsx
Normal file
17
components/anchor/demo/basic.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 自定义锚点高亮
|
||||
en-US: Customize the anchor highlight
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义锚点高亮。
|
||||
@ -12,25 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Customize the anchor highlight.
|
||||
|
||||
```tsx
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const getCurrentAnchor = () => '#components-anchor-demo-static';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
19
components/anchor/demo/customizeHighlight.tsx
Normal file
19
components/anchor/demo/customizeHighlight.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const getCurrentAnchor = () => '#components-anchor-demo-static';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 监听锚点链接改变
|
||||
en-US: Listening for anchor link change
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
监听锚点链接改变
|
||||
@ -12,27 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Listening for anchor link change.
|
||||
|
||||
```tsx
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const onChange = (link: string) => {
|
||||
console.log('Anchor:OnChange', link);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor affix={false} onChange={onChange}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
21
components/anchor/demo/onChange.tsx
Normal file
21
components/anchor/demo/onChange.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const onChange = (link: string) => {
|
||||
console.log('Anchor:OnChange', link);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor affix={false} onChange={onChange}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 自定义 onClick 事件
|
||||
en-US: Customize the onClick event
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
点击锚点不记录历史。
|
||||
@ -12,34 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Clicking on an anchor does not record history.
|
||||
|
||||
```tsx
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const handleClick = (
|
||||
e: React.MouseEvent<HTMLElement>,
|
||||
link: {
|
||||
title: React.ReactNode;
|
||||
href: string;
|
||||
},
|
||||
) => {
|
||||
e.preventDefault();
|
||||
console.log(link);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor affix={false} onClick={handleClick}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
28
components/anchor/demo/onClick.tsx
Normal file
28
components/anchor/demo/onClick.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const handleClick = (
|
||||
e: React.MouseEvent<HTMLElement>,
|
||||
link: {
|
||||
title: React.ReactNode;
|
||||
href: string;
|
||||
},
|
||||
) => {
|
||||
e.preventDefault();
|
||||
console.log(link);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor affix={false} onClick={handleClick}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 静态位置
|
||||
en-US: Static Anchor
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
不浮动，状态不随页面滚动变化。
|
||||
@ -12,23 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Do not change state when page is scrolling.
|
||||
|
||||
```tsx
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor affix={false}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
17
components/anchor/demo/static.tsx
Normal file
17
components/anchor/demo/static.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor affix={false}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 设置锚点滚动偏移量
|
||||
en-US: Set Anchor scroll offset
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
锚点目标滚动到屏幕正中间。
|
||||
@ -12,31 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Anchor target scroll to screen center.
|
||||
|
||||
```tsx
|
||||
import { Anchor } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
setTargetOffset(window.innerHeight / 2);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Anchor targetOffset={targetOffset}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
25
components/anchor/demo/targetOffset.tsx
Normal file
25
components/anchor/demo/targetOffset.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Anchor } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
setTargetOffset(window.innerHeight / 2);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Anchor targetOffset={targetOffset}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -12,6 +12,15 @@ Hyperlinks to scroll on one page.
|
||||
|
||||
For displaying anchor hyperlinks on page and jumping between them.
|
||||
|
||||
## Examples
|
||||
|
||||
<code src="./demo/basic.tsx">Basic</code>
|
||||
<code src="./demo/static.tsx">Static Anchor</code>
|
||||
<code src="./demo/onClick.tsx">Customize the onClick event</code>
|
||||
<code src="./demo/customizeHighlight.tsx">Customize the anchor highlight</code>
|
||||
<code src="./demo/targetOffset.tsx">Set Anchor scroll offset</code>
|
||||
<code src="./demo/onChange.tsx">Listening for anchor link change</code>
|
||||
|
||||
## API
|
||||
|
||||
### Anchor Props
|
||||
|
||||
@ -13,6 +13,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
|
||||
|
||||
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
|
||||
|
||||
## 代码演示
|
||||
|
||||
<code src="./demo/basic.tsx">基本</code>
|
||||
<code src="./demo/static.tsx">静态位置</code>
|
||||
<code src="./demo/onClick.tsx">自定义 onClick 事件</code>
|
||||
<code src="./demo/customizeHighlight.tsx">自定义锚点高亮</code>
|
||||
<code src="./demo/targetOffset.tsx">设置锚点滚动偏移量</code>
|
||||
<code src="./demo/onChange.tsx">监听锚点链接改变</code>
|
||||
|
||||
## API
|
||||
|
||||
### Anchor Props
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本使用
|
||||
en-US: Basic Usage
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
基本使用，通过 `options` 设置自动完成的数据源。
|
||||
@ -12,56 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Basic Usage, set data source of autocomplete with `options` property.
|
||||
|
||||
```tsx
|
||||
import { AutoComplete } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const mockVal = (str: string, repeat = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
});
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [value, setValue] = useState('');
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
|
||||
const onSearch = (searchText: string) => {
|
||||
setOptions(
|
||||
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
|
||||
);
|
||||
};
|
||||
|
||||
const onSelect = (data: string) => {
|
||||
console.log('onSelect', data);
|
||||
};
|
||||
|
||||
const onChange = (data: string) => {
|
||||
setValue(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<AutoComplete
|
||||
options={options}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={onSearch}
|
||||
placeholder="input here"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={onSearch}
|
||||
onChange={onChange}
|
||||
placeholder="control mode"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
50
components/auto-complete/demo/basic.tsx
Normal file
50
components/auto-complete/demo/basic.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { AutoComplete } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const mockVal = (str: string, repeat = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
});
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [value, setValue] = useState('');
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
|
||||
const onSearch = (searchText: string) => {
|
||||
setOptions(
|
||||
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
|
||||
);
|
||||
};
|
||||
|
||||
const onSelect = (data: string) => {
|
||||
console.log('onSelect', data);
|
||||
};
|
||||
|
||||
const onChange = (data: string) => {
|
||||
setValue(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<AutoComplete
|
||||
options={options}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={onSearch}
|
||||
placeholder="input here"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={onSearch}
|
||||
onChange={onChange}
|
||||
placeholder="control mode"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 查询模式 - 确定类目
|
||||
en-US: Lookup-Patterns - Certain Category
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
[查询模式: 确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
|
||||
@ -13,71 +6,6 @@ title:
|
||||
|
||||
Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property.
|
||||
|
||||
```tsx
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const renderTitle = (title: string) => (
|
||||
<span>
|
||||
{title}
|
||||
<a
|
||||
style={{ float: 'right' }}
|
||||
href="https://www.google.com/search?q=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
|
||||
const renderItem = (title: string, count: number) => ({
|
||||
value: title,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
<span>
|
||||
<UserOutlined /> {count}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: renderTitle('Libraries'),
|
||||
options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
|
||||
},
|
||||
{
|
||||
label: renderTitle('Solutions'),
|
||||
options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
|
||||
},
|
||||
{
|
||||
label: renderTitle('Articles'),
|
||||
options: [renderItem('AntDesign design language', 100000)],
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<AutoComplete
|
||||
popupClassName="certain-category-search-dropdown"
|
||||
dropdownMatchSelectWidth={500}
|
||||
style={{ width: 250 }}
|
||||
options={options}
|
||||
>
|
||||
<Input.Search size="large" placeholder="input here" />
|
||||
</AutoComplete>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
```css
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
|
||||
color: #666;
|
||||
|
||||
62
components/auto-complete/demo/certain-category.tsx
Normal file
62
components/auto-complete/demo/certain-category.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const renderTitle = (title: string) => (
|
||||
<span>
|
||||
{title}
|
||||
<a
|
||||
style={{ float: 'right' }}
|
||||
href="https://www.google.com/search?q=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
|
||||
const renderItem = (title: string, count: number) => ({
|
||||
value: title,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
<span>
|
||||
<UserOutlined /> {count}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: renderTitle('Libraries'),
|
||||
options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
|
||||
},
|
||||
{
|
||||
label: renderTitle('Solutions'),
|
||||
options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
|
||||
},
|
||||
{
|
||||
label: renderTitle('Articles'),
|
||||
options: [renderItem('AntDesign design language', 100000)],
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<AutoComplete
|
||||
popupClassName="certain-category-search-dropdown"
|
||||
dropdownMatchSelectWidth={500}
|
||||
style={{ width: 250 }}
|
||||
options={options}
|
||||
>
|
||||
<Input.Search size="large" placeholder="input here" />
|
||||
</AutoComplete>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 自定义输入组件
|
||||
en-US: Customize Input Component
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义输入组件。
|
||||
@ -12,46 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Customize Input Component
|
||||
|
||||
```tsx
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setOptions(
|
||||
!value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],
|
||||
);
|
||||
};
|
||||
|
||||
const handleKeyPress = (ev: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
console.log('handleKeyPress', ev);
|
||||
};
|
||||
|
||||
const onSelect = (value: string) => {
|
||||
console.log('onSelect', value);
|
||||
};
|
||||
|
||||
return (
|
||||
<AutoComplete
|
||||
options={options}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={handleSearch}
|
||||
>
|
||||
<TextArea
|
||||
placeholder="input here"
|
||||
className="custom"
|
||||
style={{ height: 50 }}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
</AutoComplete>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
40
components/auto-complete/demo/custom.tsx
Normal file
40
components/auto-complete/demo/custom.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setOptions(
|
||||
!value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],
|
||||
);
|
||||
};
|
||||
|
||||
const handleKeyPress = (ev: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
console.log('handleKeyPress', ev);
|
||||
};
|
||||
|
||||
const onSelect = (value: string) => {
|
||||
console.log('onSelect', value);
|
||||
};
|
||||
|
||||
return (
|
||||
<AutoComplete
|
||||
options={options}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={handleSearch}
|
||||
>
|
||||
<TextArea
|
||||
placeholder="input here"
|
||||
className="custom"
|
||||
style={{ height: 50 }}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
</AutoComplete>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,75 +1 @@
|
||||
---
|
||||
order: 999
|
||||
title:
|
||||
zh-CN: 在 Form 中 Debug
|
||||
en-US: Debug in Form
|
||||
debug: true
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { AutoComplete, Button, Form, Input, TreeSelect } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 8 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form style={{ margin: '0 auto' }} {...formItemLayout}>
|
||||
<Form.Item label="单独 AutoComplete">
|
||||
<AutoComplete />
|
||||
</Form.Item>
|
||||
<Form.Item label="单独 TreeSelect">
|
||||
<TreeSelect />
|
||||
</Form.Item>
|
||||
<Form.Item label="添加 Input.Group 正常">
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '30%' }} />
|
||||
<AutoComplete />
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="包含 search 图标正常">
|
||||
<AutoComplete>
|
||||
<Input suffix={<SearchOutlined />} />
|
||||
</AutoComplete>
|
||||
</Form.Item>
|
||||
<Form.Item label="同时有 Input.Group 和图标发生移位">
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '30%' }} />
|
||||
<AutoComplete>
|
||||
<Input suffix={<SearchOutlined />} />
|
||||
</AutoComplete>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="同时有 Input.Group 和 Search 组件发生移位">
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '30%' }} />
|
||||
<AutoComplete>
|
||||
<Input.Search />
|
||||
</AutoComplete>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="Input Group 和 Button 结合">
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '20%' }} />
|
||||
<AutoComplete>
|
||||
<Input.Search />
|
||||
</AutoComplete>
|
||||
<Button type="primary" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
undefined
|
||||
|
||||
66
components/auto-complete/demo/form-debug.tsx
Normal file
66
components/auto-complete/demo/form-debug.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
/*
|
||||
* debug: true */import { SearchOutlined } from '@ant-design/icons';
|
||||
import { AutoComplete, Button, Form, Input, TreeSelect } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 8 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form style={{ margin: '0 auto' }} {...formItemLayout}>
|
||||
<Form.Item label="单独 AutoComplete">
|
||||
<AutoComplete />
|
||||
</Form.Item>
|
||||
<Form.Item label="单独 TreeSelect">
|
||||
<TreeSelect />
|
||||
</Form.Item>
|
||||
<Form.Item label="添加 Input.Group 正常">
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '30%' }} />
|
||||
<AutoComplete />
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="包含 search 图标正常">
|
||||
<AutoComplete>
|
||||
<Input suffix={<SearchOutlined />} />
|
||||
</AutoComplete>
|
||||
</Form.Item>
|
||||
<Form.Item label="同时有 Input.Group 和图标发生移位">
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '30%' }} />
|
||||
<AutoComplete>
|
||||
<Input suffix={<SearchOutlined />} />
|
||||
</AutoComplete>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="同时有 Input.Group 和 Search 组件发生移位">
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '30%' }} />
|
||||
<AutoComplete>
|
||||
<Input.Search />
|
||||
</AutoComplete>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="Input Group 和 Button 结合">
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '20%' }} />
|
||||
<AutoComplete>
|
||||
<Input.Search />
|
||||
</AutoComplete>
|
||||
<Button type="primary" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 不区分大小写
|
||||
en-US: Non-case-sensitive AutoComplete
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
不区分大小写的 AutoComplete
|
||||
@ -12,27 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
A non-case-sensitive AutoComplete
|
||||
|
||||
```tsx
|
||||
import { AutoComplete } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const options = [
|
||||
{ value: 'Burns Bay Road' },
|
||||
{ value: 'Downing Street' },
|
||||
{ value: 'Wall Street' },
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<AutoComplete
|
||||
style={{ width: 200 }}
|
||||
options={options}
|
||||
placeholder="try to type `b`"
|
||||
filterOption={(inputValue, option) =>
|
||||
option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
21
components/auto-complete/demo/non-case-sensitive.tsx
Normal file
21
components/auto-complete/demo/non-case-sensitive.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { AutoComplete } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const options = [
|
||||
{ value: 'Burns Bay Road' },
|
||||
{ value: 'Downing Street' },
|
||||
{ value: 'Wall Street' },
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<AutoComplete
|
||||
style={{ width: 200 }}
|
||||
options={options}
|
||||
placeholder="try to type `b`"
|
||||
filterOption={(inputValue, option) =>
|
||||
option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 自定义选项
|
||||
en-US: Customized
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `options`。
|
||||
@ -12,36 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `options`。
|
||||
|
||||
```tsx
|
||||
import { AutoComplete } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { Option } = AutoComplete;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [result, setResult] = useState<string[]>([]);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
let res: string[] = [];
|
||||
if (!value || value.indexOf('@') >= 0) {
|
||||
res = [];
|
||||
} else {
|
||||
res = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
|
||||
}
|
||||
setResult(res);
|
||||
};
|
||||
|
||||
return (
|
||||
<AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here">
|
||||
{result.map((email: string) => (
|
||||
<Option key={email} value={email}>
|
||||
{email}
|
||||
</Option>
|
||||
))}
|
||||
</AutoComplete>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
30
components/auto-complete/demo/options.tsx
Normal file
30
components/auto-complete/demo/options.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { AutoComplete } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { Option } = AutoComplete;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [result, setResult] = useState<string[]>([]);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
let res: string[] = [];
|
||||
if (!value || value.indexOf('@') >= 0) {
|
||||
res = [];
|
||||
} else {
|
||||
res = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
|
||||
}
|
||||
setResult(res);
|
||||
};
|
||||
|
||||
return (
|
||||
<AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here">
|
||||
{result.map((email: string) => (
|
||||
<Option key={email} value={email}>
|
||||
{email}
|
||||
</Option>
|
||||
))}
|
||||
</AutoComplete>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,11 +1,3 @@
|
||||
---
|
||||
order: 999
|
||||
title:
|
||||
zh-CN: _InternalPanelDoNotUseOrYouWillBeFired
|
||||
en-US: _InternalPanelDoNotUseOrYouWillBeFired
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
调试用组件，请勿直接使用。
|
||||
@ -13,33 +5,3 @@ debug: true
|
||||
## en-US
|
||||
|
||||
Debug usage. Do not use in your production.
|
||||
|
||||
```tsx
|
||||
import { AutoComplete, Switch, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalAutoComplete } = AutoComplete;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ display: 'flex' }}>
|
||||
<Switch checked={open} onChange={() => setOpen(!open)} />
|
||||
<InternalAutoComplete
|
||||
defaultValue="lucy"
|
||||
style={{ width: 120 }}
|
||||
open={open}
|
||||
options={[
|
||||
{ label: 'Jack', value: 'jack' },
|
||||
{ label: 'Lucy', value: 'lucy' },
|
||||
{ label: 'Disabled', value: 'disabled' },
|
||||
{ label: 'Bamboo', value: 'bamboo' },
|
||||
]}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
28
components/auto-complete/demo/render-panel.tsx
Normal file
28
components/auto-complete/demo/render-panel.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
/*
|
||||
* debug: true */import { AutoComplete, Switch, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalAutoComplete } = AutoComplete;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ display: 'flex' }}>
|
||||
<Switch checked={open} onChange={() => setOpen(!open)} />
|
||||
<InternalAutoComplete
|
||||
defaultValue="lucy"
|
||||
style={{ width: 120 }}
|
||||
open={open}
|
||||
options={[
|
||||
{ label: 'Jack', value: 'jack' },
|
||||
{ label: 'Lucy', value: 'lucy' },
|
||||
{ label: 'Disabled', value: 'disabled' },
|
||||
{ label: 'Bamboo', value: 'bamboo' },
|
||||
]}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,11 +1,3 @@
|
||||
---
|
||||
order: 19
|
||||
version: 4.19.0
|
||||
title:
|
||||
zh-CN: 自定义状态
|
||||
en-US: Status
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `status` 为 AutoComplete 添加状态，可选 `error` 或者 `warning`。
|
||||
@ -13,31 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Add status to AutoComplete with `status`, which could be `error` or `warning`.
|
||||
|
||||
```tsx
|
||||
import { AutoComplete, Space } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const mockVal = (str: string, repeat = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
});
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
|
||||
const onSearch = (searchText: string) => {
|
||||
setOptions(
|
||||
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<AutoComplete options={options} onSearch={onSearch} status="error" style={{ width: 200 }} />
|
||||
<AutoComplete options={options} onSearch={onSearch} status="warning" style={{ width: 200 }} />
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
26
components/auto-complete/demo/status.tsx
Normal file
26
components/auto-complete/demo/status.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
/*
|
||||
* version: 4.19.0 */import { AutoComplete, Space } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const mockVal = (str: string, repeat = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
});
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
|
||||
const onSearch = (searchText: string) => {
|
||||
setOptions(
|
||||
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<AutoComplete options={options} onSearch={onSearch} status="error" style={{ width: 200 }} />
|
||||
<AutoComplete options={options} onSearch={onSearch} status="warning" style={{ width: 200 }} />
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 查询模式 - 不确定类目
|
||||
en-US: Lookup-Patterns - Uncertain Category
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
[查询模式: 不确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
|
||||
@ -12,68 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
|
||||
|
||||
```tsx
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import type { SelectProps } from 'antd/es/select';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
|
||||
const searchResult = (query: string) =>
|
||||
new Array(getRandomInt(5))
|
||||
.join('.')
|
||||
.split('.')
|
||||
.map((_, idx) => {
|
||||
const category = `${query}${idx}`;
|
||||
return {
|
||||
value: category,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
Found {query} on{' '}
|
||||
<a
|
||||
href={`https://s.taobao.com/search?q=${query}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{category}
|
||||
</a>
|
||||
</span>
|
||||
<span>{getRandomInt(200, 100)} results</span>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<SelectProps<object>['options']>([]);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setOptions(value ? searchResult(value) : []);
|
||||
};
|
||||
|
||||
const onSelect = (value: string) => {
|
||||
console.log('onSelect', value);
|
||||
};
|
||||
|
||||
return (
|
||||
<AutoComplete
|
||||
dropdownMatchSelectWidth={252}
|
||||
style={{ width: 300 }}
|
||||
options={options}
|
||||
onSelect={onSelect}
|
||||
onSearch={handleSearch}
|
||||
>
|
||||
<Input.Search size="large" placeholder="input here" enterButton />
|
||||
</AutoComplete>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
62
components/auto-complete/demo/uncertain-category.tsx
Normal file
62
components/auto-complete/demo/uncertain-category.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import type { SelectProps } from 'antd/es/select';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
|
||||
const searchResult = (query: string) =>
|
||||
new Array(getRandomInt(5))
|
||||
.join('.')
|
||||
.split('.')
|
||||
.map((_, idx) => {
|
||||
const category = `${query}${idx}`;
|
||||
return {
|
||||
value: category,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
Found {query} on{' '}
|
||||
<a
|
||||
href={`https://s.taobao.com/search?q=${query}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{category}
|
||||
</a>
|
||||
</span>
|
||||
<span>{getRandomInt(200, 100)} results</span>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<SelectProps<object>['options']>([]);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setOptions(value ? searchResult(value) : []);
|
||||
};
|
||||
|
||||
const onSelect = (value: string) => {
|
||||
console.log('onSelect', value);
|
||||
};
|
||||
|
||||
return (
|
||||
<AutoComplete
|
||||
dropdownMatchSelectWidth={252}
|
||||
style={{ width: 300 }}
|
||||
options={options}
|
||||
onSelect={onSelect}
|
||||
onSearch={handleSearch}
|
||||
>
|
||||
<Input.Search size="large" placeholder="input here" enterButton />
|
||||
</AutoComplete>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -18,6 +18,18 @@ The differences with Select are:
|
||||
- AutoComplete is an input box with text hints, and users can type freely. The keyword is aiding **input**.
|
||||
- Select is selecting among given choices. The keyword is **select**.
|
||||
|
||||
## Examples
|
||||
|
||||
<code src="./demo/basic.tsx">Basic Usage</code>
|
||||
<code src="./demo/options.tsx">Customized</code>
|
||||
<code src="./demo/custom.tsx">Customize Input Component</code>
|
||||
<code src="./demo/non-case-sensitive.tsx">Non-case-sensitive AutoComplete</code>
|
||||
<code src="./demo/certain-category.tsx">Lookup-Patterns - Certain Category</code>
|
||||
<code src="./demo/uncertain-category.tsx">Lookup-Patterns - Uncertain Category</code>
|
||||
<code src="./demo/status.tsx">Status</code>
|
||||
<code src="./demo/form-debug.tsx">Debug in Form</code>
|
||||
<code src="./demo/render-panel.tsx">_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
|
||||
@ -19,6 +19,18 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
||||
- AutoComplete 是一个带提示的文本输入框，用户可以自由输入，关键词是辅助**输入**。
|
||||
- Select 是在限定的可选项中进行选择，关键词是**选择**。
|
||||
|
||||
## 代码演示
|
||||
|
||||
<code src="./demo/basic.tsx">基本使用</code>
|
||||
<code src="./demo/options.tsx">自定义选项</code>
|
||||
<code src="./demo/custom.tsx">自定义输入组件</code>
|
||||
<code src="./demo/non-case-sensitive.tsx">不区分大小写</code>
|
||||
<code src="./demo/certain-category.tsx">查询模式 - 确定类目</code>
|
||||
<code src="./demo/uncertain-category.tsx">查询模式 - 不确定类目</code>
|
||||
<code src="./demo/status.tsx">自定义状态</code>
|
||||
<code src="./demo/form-debug.tsx">在 Form 中 Debug</code>
|
||||
<code src="./demo/render-panel.tsx">_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 带徽标的头像
|
||||
en-US: With Badge
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通常用于消息提示。
|
||||
@ -13,29 +6,6 @@ title:
|
||||
|
||||
Usually used for reminders and notifications.
|
||||
|
||||
```tsx
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<span className="avatar-item">
|
||||
<Badge count={1}>
|
||||
<Avatar shape="square" icon={<UserOutlined />} />
|
||||
</Badge>
|
||||
</span>
|
||||
<span>
|
||||
<Badge dot>
|
||||
<Avatar shape="square" icon={<UserOutlined />} />
|
||||
</Badge>
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
```css
|
||||
/* tile uploaded pictures */
|
||||
.avatar-item {
|
||||
|
||||
20
components/avatar/demo/badge.tsx
Normal file
20
components/avatar/demo/badge.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<span className="avatar-item">
|
||||
<Badge count={1}>
|
||||
<Avatar shape="square" icon={<UserOutlined />} />
|
||||
</Badge>
|
||||
</span>
|
||||
<span>
|
||||
<Badge dot>
|
||||
<Avatar shape="square" icon={<UserOutlined />} />
|
||||
</Badge>
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
头像有三种尺寸，两种形状可选。
|
||||
@ -13,31 +6,6 @@ title:
|
||||
|
||||
Three sizes and two shapes are available.
|
||||
|
||||
```tsx
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<div>
|
||||
<Avatar size={64} icon={<UserOutlined />} />
|
||||
<Avatar size="large" icon={<UserOutlined />} />
|
||||
<Avatar icon={<UserOutlined />} />
|
||||
<Avatar size="small" icon={<UserOutlined />} />
|
||||
</div>
|
||||
<div>
|
||||
<Avatar shape="square" size={64} icon={<UserOutlined />} />
|
||||
<Avatar shape="square" size="large" icon={<UserOutlined />} />
|
||||
<Avatar shape="square" icon={<UserOutlined />} />
|
||||
<Avatar shape="square" size="small" icon={<UserOutlined />} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
<style>
|
||||
#components-avatar-demo-basic .ant-avatar {
|
||||
margin-top: 16px;
|
||||
|
||||
22
components/avatar/demo/basic.tsx
Normal file
22
components/avatar/demo/basic.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<div>
|
||||
<Avatar size={64} icon={<UserOutlined />} />
|
||||
<Avatar size="large" icon={<UserOutlined />} />
|
||||
<Avatar icon={<UserOutlined />} />
|
||||
<Avatar size="small" icon={<UserOutlined />} />
|
||||
</div>
|
||||
<div>
|
||||
<Avatar shape="square" size={64} icon={<UserOutlined />} />
|
||||
<Avatar shape="square" size="large" icon={<UserOutlined />} />
|
||||
<Avatar shape="square" icon={<UserOutlined />} />
|
||||
<Avatar shape="square" size="small" icon={<UserOutlined />} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 自动调整字符大小
|
||||
en-US: Autoset Font Size
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。也可使用 `gap` 来设置字符距离左右两侧边界单位像素。
|
||||
@ -12,49 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. You can also use `gap` to set the unit distance between left and right sides.
|
||||
|
||||
```tsx
|
||||
import { Avatar, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
|
||||
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
|
||||
const GapList = [4, 3, 2, 1];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [user, setUser] = useState(UserList[0]);
|
||||
const [color, setColor] = useState(ColorList[0]);
|
||||
const [gap, setGap] = useState(GapList[0]);
|
||||
|
||||
const changeUser = () => {
|
||||
const index = UserList.indexOf(user);
|
||||
setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]);
|
||||
setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);
|
||||
};
|
||||
|
||||
const changeGap = () => {
|
||||
const index = GapList.indexOf(gap);
|
||||
setGap(index < GapList.length - 1 ? GapList[index + 1] : GapList[0]);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large" gap={gap}>
|
||||
{user}
|
||||
</Avatar>
|
||||
<Button
|
||||
size="small"
|
||||
style={{ margin: '0 16px', verticalAlign: 'middle' }}
|
||||
onClick={changeUser}
|
||||
>
|
||||
ChangeUser
|
||||
</Button>
|
||||
<Button size="small" style={{ verticalAlign: 'middle' }} onClick={changeGap}>
|
||||
changeGap
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
43
components/avatar/demo/dynamic.tsx
Normal file
43
components/avatar/demo/dynamic.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { Avatar, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
|
||||
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
|
||||
const GapList = [4, 3, 2, 1];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [user, setUser] = useState(UserList[0]);
|
||||
const [color, setColor] = useState(ColorList[0]);
|
||||
const [gap, setGap] = useState(GapList[0]);
|
||||
|
||||
const changeUser = () => {
|
||||
const index = UserList.indexOf(user);
|
||||
setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]);
|
||||
setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);
|
||||
};
|
||||
|
||||
const changeGap = () => {
|
||||
const index = GapList.indexOf(gap);
|
||||
setGap(index < GapList.length - 1 ? GapList[index + 1] : GapList[0]);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large" gap={gap}>
|
||||
{user}
|
||||
</Avatar>
|
||||
<Button
|
||||
size="small"
|
||||
style={{ margin: '0 16px', verticalAlign: 'middle' }}
|
||||
onClick={changeUser}
|
||||
>
|
||||
ChangeUser
|
||||
</Button>
|
||||
<Button size="small" style={{ verticalAlign: 'middle' }} onClick={changeGap}>
|
||||
changeGap
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,11 +1,3 @@
|
||||
---
|
||||
order: 99
|
||||
title:
|
||||
zh-CN: 图片不存在时
|
||||
en-US: Fallback
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
图片不存在时，如果 `src` 本身是个 ReactElement，会尝试回退到 `src`，否则尝试回退到 `icon`，最后回退到显示 `children`。
|
||||
@ -13,21 +5,3 @@ debug: true
|
||||
## en-US
|
||||
|
||||
图片不存在时，如果 `src` 本身是个 ReactElement，会尝试回退到 `src`，否则尝试回退到 `icon`，最后回退到显示 `children`。
|
||||
|
||||
```tsx
|
||||
import { Avatar } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Avatar shape="circle" src="http://abc.com/not-exist.jpg">
|
||||
A
|
||||
</Avatar>
|
||||
<Avatar shape="circle" src="http://abc.com/not-exist.jpg">
|
||||
ABC
|
||||
</Avatar>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
16
components/avatar/demo/fallback.tsx
Normal file
16
components/avatar/demo/fallback.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
/*
|
||||
* debug: true */import { Avatar } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Avatar shape="circle" src="http://abc.com/not-exist.jpg">
|
||||
A
|
||||
</Avatar>
|
||||
<Avatar shape="circle" src="http://abc.com/not-exist.jpg">
|
||||
ABC
|
||||
</Avatar>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: Avatar.Group
|
||||
en-US: Avatar.Group
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
头像组合展现。
|
||||
@ -12,60 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Avatar group display.
|
||||
|
||||
```tsx
|
||||
import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Divider, Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Avatar.Group>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/random" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
<Divider />
|
||||
<Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/random" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
<Divider />
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
|
||||
>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/random" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
<Divider />
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
maxPopoverTrigger="click"
|
||||
size="large"
|
||||
maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' }}
|
||||
>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
54
components/avatar/demo/group.tsx
Normal file
54
components/avatar/demo/group.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Divider, Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Avatar.Group>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/random" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
<Divider />
|
||||
<Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/random" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
<Divider />
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
size="large"
|
||||
maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
|
||||
>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/random" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
<Divider />
|
||||
<Avatar.Group
|
||||
maxCount={2}
|
||||
maxPopoverTrigger="click"
|
||||
size="large"
|
||||
maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' }}
|
||||
>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
<Tooltip title="Ant User" placement="top">
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</Tooltip>
|
||||
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
|
||||
</Avatar.Group>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 响应式尺寸
|
||||
en-US: Responsive Size
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
头像大小可以根据屏幕大小自动调整。
|
||||
@ -12,18 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
Avatar size can be automatically adjusted based on the screen size.
|
||||
|
||||
```tsx
|
||||
import { AntDesignOutlined } from '@ant-design/icons';
|
||||
import { Avatar } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Avatar
|
||||
size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
|
||||
icon={<AntDesignOutlined />}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
12
components/avatar/demo/responsive.tsx
Normal file
12
components/avatar/demo/responsive.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import { AntDesignOutlined } from '@ant-design/icons';
|
||||
import { Avatar } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Avatar
|
||||
size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
|
||||
icon={<AntDesignOutlined />}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,11 +1,3 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 隐藏情况下计算字符对齐
|
||||
en-US: Calculate text style when hiding
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
切换 Avatar 显示的时候，文本样式应该居中并正确调整字体大小。
|
||||
@ -13,65 +5,3 @@ debug: true
|
||||
## en-US
|
||||
|
||||
Text inside Avatar should be set a proper font size when toggle it's visibility.
|
||||
|
||||
```tsx
|
||||
import { Avatar, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
type SizeType = 'large' | 'small' | 'default' | number;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [hide, setHide] = useState(true);
|
||||
const [size, setSize] = useState<SizeType>('large');
|
||||
const [scale, setScale] = useState(1);
|
||||
|
||||
const toggle = () => {
|
||||
setHide(!hide);
|
||||
};
|
||||
|
||||
const toggleSize = () => {
|
||||
const sizes = ['small', 'default', 'large'] as SizeType[];
|
||||
let current = sizes.indexOf(size) + 1;
|
||||
if (current > 2) {
|
||||
current = 0;
|
||||
}
|
||||
setSize(sizes[current]);
|
||||
};
|
||||
|
||||
const changeScale = () => {
|
||||
setScale(scale === 1 ? 2 : 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={toggle}>Toggle Avatar visibility</Button>
|
||||
<Button onClick={toggleSize}>Toggle Avatar size</Button>
|
||||
<Button onClick={changeScale}>Change Avatar scale</Button>
|
||||
<br />
|
||||
<br />
|
||||
<div style={{ textAlign: 'center', transform: `scale(${scale})`, marginTop: 24 }}>
|
||||
<Avatar size={size} style={{ background: '#7265e6', display: hide ? 'none' : '' }}>
|
||||
Avatar
|
||||
</Avatar>
|
||||
<Avatar
|
||||
size={size}
|
||||
src="invalid"
|
||||
style={{ background: '#00a2ae', display: hide ? 'none' : '' }}
|
||||
>
|
||||
Invalid
|
||||
</Avatar>
|
||||
<div style={{ display: hide ? 'none' : '' }}>
|
||||
<Avatar size={size} style={{ background: '#7265e6' }}>
|
||||
Avatar
|
||||
</Avatar>
|
||||
<Avatar size={size} src="invalid" style={{ background: '#00a2ae' }}>
|
||||
Invalid
|
||||
</Avatar>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
60
components/avatar/demo/toggle-debug.tsx
Normal file
60
components/avatar/demo/toggle-debug.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
/*
|
||||
* debug: true */import { Avatar, Button } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
type SizeType = 'large' | 'small' | 'default' | number;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [hide, setHide] = useState(true);
|
||||
const [size, setSize] = useState<SizeType>('large');
|
||||
const [scale, setScale] = useState(1);
|
||||
|
||||
const toggle = () => {
|
||||
setHide(!hide);
|
||||
};
|
||||
|
||||
const toggleSize = () => {
|
||||
const sizes = ['small', 'default', 'large'] as SizeType[];
|
||||
let current = sizes.indexOf(size) + 1;
|
||||
if (current > 2) {
|
||||
current = 0;
|
||||
}
|
||||
setSize(sizes[current]);
|
||||
};
|
||||
|
||||
const changeScale = () => {
|
||||
setScale(scale === 1 ? 2 : 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={toggle}>Toggle Avatar visibility</Button>
|
||||
<Button onClick={toggleSize}>Toggle Avatar size</Button>
|
||||
<Button onClick={changeScale}>Change Avatar scale</Button>
|
||||
<br />
|
||||
<br />
|
||||
<div style={{ textAlign: 'center', transform: `scale(${scale})`, marginTop: 24 }}>
|
||||
<Avatar size={size} style={{ background: '#7265e6', display: hide ? 'none' : '' }}>
|
||||
Avatar
|
||||
</Avatar>
|
||||
<Avatar
|
||||
size={size}
|
||||
src="invalid"
|
||||
style={{ background: '#00a2ae', display: hide ? 'none' : '' }}
|
||||
>
|
||||
Invalid
|
||||
</Avatar>
|
||||
<div style={{ display: hide ? 'none' : '' }}>
|
||||
<Avatar size={size} style={{ background: '#7265e6' }}>
|
||||
Avatar
|
||||
</Avatar>
|
||||
<Avatar size={size} src="invalid" style={{ background: '#00a2ae' }}>
|
||||
Invalid
|
||||
</Avatar>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 类型
|
||||
en-US: Type
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
|
||||
@ -13,26 +6,6 @@ title:
|
||||
|
||||
Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
|
||||
|
||||
```tsx
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Image } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Avatar icon={<UserOutlined />} />
|
||||
<Avatar>U</Avatar>
|
||||
<Avatar size={40}>USER</Avatar>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/random" />
|
||||
<Avatar src={<Image src="https://joeschmoe.io/api/v1/random" style={{ width: 32 }} />} />
|
||||
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
<style>
|
||||
#components-avatar-demo-type .ant-avatar {
|
||||
margin-top: 16px;
|
||||
|
||||
17
components/avatar/demo/type.tsx
Normal file
17
components/avatar/demo/type.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Image } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Avatar icon={<UserOutlined />} />
|
||||
<Avatar>U</Avatar>
|
||||
<Avatar size={40}>USER</Avatar>
|
||||
<Avatar src="https://joeschmoe.io/api/v1/random" />
|
||||
<Avatar src={<Image src="https://joeschmoe.io/api/v1/random" style={{ width: 32 }} />} />
|
||||
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -3,10 +3,23 @@ category: Components
|
||||
type: Data Display
|
||||
title: Avatar
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
|
||||
|
||||
## Examples
|
||||
|
||||
<code src="./demo/basic.tsx">Basic</code>
|
||||
<code src="./demo/type.tsx">Type</code>
|
||||
<code src="./demo/dynamic.tsx">Autoset Font Size</code>
|
||||
<code src="./demo/badge.tsx">With Badge</code>
|
||||
<code src="./demo/group.tsx">Avatar.Group</code>
|
||||
<code src="./demo/toggle-debug.tsx">Calculate text style when hiding</code>
|
||||
<code src="./demo/responsive.tsx">Responsive Size</code>
|
||||
<code src="./demo/fallback.tsx">Fallback</code>
|
||||
|
||||
## API
|
||||
|
||||
### Avatar
|
||||
|
||||
@ -4,6 +4,8 @@ subtitle: 头像
|
||||
type: 数据展示
|
||||
title: Avatar
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
用来代表用户或事物，支持图片、图标或字符展示。
|
||||
@ -12,6 +14,17 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
|
||||
|
||||
安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，一键填充高逼格头像和文本。
|
||||
|
||||
## 代码演示
|
||||
|
||||
<code src="./demo/basic.tsx">基本</code>
|
||||
<code src="./demo/type.tsx">类型</code>
|
||||
<code src="./demo/dynamic.tsx">自动调整字符大小</code>
|
||||
<code src="./demo/badge.tsx">带徽标的头像</code>
|
||||
<code src="./demo/group.tsx">Avatar.Group</code>
|
||||
<code src="./demo/toggle-debug.tsx">隐藏情况下计算字符对齐</code>
|
||||
<code src="./demo/responsive.tsx">响应式尺寸</code>
|
||||
<code src="./demo/fallback.tsx">图片不存在时</code>
|
||||
|
||||
## API
|
||||
|
||||
### Avatar
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
@ -13,22 +6,6 @@ title:
|
||||
|
||||
The most basic usage.
|
||||
|
||||
```tsx
|
||||
import { BackTop } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<BackTop />
|
||||
Scroll down to see the bottom-right
|
||||
<strong className="site-back-top-basic"> gray </strong>
|
||||
button.
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
```css
|
||||
.site-back-top-basic {
|
||||
color: rgba(64, 64, 64, 0.6);
|
||||
|
||||
13
components/back-top/demo/basic.tsx
Normal file
13
components/back-top/demo/basic.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { BackTop } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<BackTop />
|
||||
Scroll down to see the bottom-right
|
||||
<strong className="site-back-top-basic"> gray </strong>
|
||||
button.
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,11 +1,3 @@
|
||||
---
|
||||
order: 1
|
||||
iframe: 400
|
||||
title:
|
||||
zh-CN: 自定义样式
|
||||
en-US: Custom style
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。
|
||||
@ -17,36 +9,3 @@ title:
|
||||
You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
|
||||
|
||||
> Note: `BackTop` expects a element could accept `onClick` propety as children. If you put a text directly as children the component will not function properly.
|
||||
|
||||
```tsx
|
||||
import { BackTop } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
height: 40,
|
||||
width: 40,
|
||||
lineHeight: '40px',
|
||||
borderRadius: 4,
|
||||
backgroundColor: '#1088e9',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
fontSize: 14,
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div style={{ height: '600vh', padding: 8 }}>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<BackTop>
|
||||
<div style={style}>UP</div>
|
||||
</BackTop>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
31
components/back-top/demo/custom.tsx
Normal file
31
components/back-top/demo/custom.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
/*
|
||||
* iframe: 400 */import { BackTop } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
height: 40,
|
||||
width: 40,
|
||||
lineHeight: '40px',
|
||||
borderRadius: 4,
|
||||
backgroundColor: '#1088e9',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
fontSize: 14,
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div style={{ height: '600vh', padding: 8 }}>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<BackTop>
|
||||
<div style={style}>UP</div>
|
||||
</BackTop>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -3,6 +3,8 @@ category: Components
|
||||
type: Other
|
||||
title: BackTop
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
`BackTop` makes it easy to go back to the top of the page.
|
||||
@ -12,6 +14,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
|
||||
- When the page content is very long.
|
||||
- When you need to go back to the top very frequently in order to view the contents.
|
||||
|
||||
## Examples
|
||||
|
||||
<code src="./demo/basic.tsx">Basic</code>
|
||||
<code src="./demo/custom.tsx">Custom style</code>
|
||||
|
||||
## API
|
||||
|
||||
> The distance to the bottom is set to `50px` by default, which is overridable.
|
||||
|
||||
@ -4,6 +4,8 @@ type: 其他
|
||||
subtitle: 回到顶部
|
||||
title: BackTop
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
返回页面顶部的操作按钮。
|
||||
@ -13,6 +15,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
|
||||
- 当页面内容区域比较长时；
|
||||
- 当用户需要频繁返回顶部查看相关内容时。
|
||||
|
||||
## 代码演示
|
||||
|
||||
<code src="./demo/basic.tsx">基本</code>
|
||||
<code src="./demo/custom.tsx">自定义样式</code>
|
||||
|
||||
## API
|
||||
|
||||
> 有默认样式，距离底部 `50px`，可覆盖。
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
简单的徽章展示，当 `count` 为 `0` 时，默认不显示，但是可以使用 `showZero` 修改为显示。
|
||||
@ -13,28 +6,6 @@ title:
|
||||
|
||||
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
|
||||
|
||||
```tsx
|
||||
import { ClockCircleOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Badge count={5}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={0} showZero>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
<style>
|
||||
.ant-badge:not(.ant-badge-not-a-wrapper) {
|
||||
margin-right: 20px;
|
||||
|
||||
19
components/badge/demo/basic.tsx
Normal file
19
components/badge/demo/basic.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { ClockCircleOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Badge count={5}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={0} showZero>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -1,10 +1,3 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 动态
|
||||
en-US: Dynamic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
展示动态变化的效果。
|
||||
@ -12,63 +5,3 @@ title:
|
||||
## en-US
|
||||
|
||||
The count will be animated as it changes.
|
||||
|
||||
```tsx
|
||||
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge, Button, Divider, Switch } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [count, setCount] = useState(5);
|
||||
const [show, setShow] = useState(true);
|
||||
|
||||
const increase = () => {
|
||||
setCount(count + 1);
|
||||
};
|
||||
|
||||
const decline = () => {
|
||||
let newCount = count - 1;
|
||||
if (newCount < 0) {
|
||||
newCount = 0;
|
||||
}
|
||||
setCount(newCount);
|
||||
};
|
||||
|
||||
const random = () => {
|
||||
const newCount = Math.floor(Math.random() * 100);
|
||||
setCount(newCount);
|
||||
};
|
||||
|
||||
const onChange = (checked: boolean) => {
|
||||
setShow(checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Badge count={count}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<ButtonGroup>
|
||||
<Button onClick={decline}>
|
||||
<MinusOutlined />
|
||||
</Button>
|
||||
<Button onClick={increase}>
|
||||
<PlusOutlined />
|
||||
</Button>
|
||||
<Button onClick={random}>
|
||||
<QuestionOutlined />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<Divider />
|
||||
<Badge dot={show}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Switch onChange={onChange} checked={show} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
57
components/badge/demo/change.tsx
Normal file
57
components/badge/demo/change.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge, Button, Divider, Switch } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [count, setCount] = useState(5);
|
||||
const [show, setShow] = useState(true);
|
||||
|
||||
const increase = () => {
|
||||
setCount(count + 1);
|
||||
};
|
||||
|
||||
const decline = () => {
|
||||
let newCount = count - 1;
|
||||
if (newCount < 0) {
|
||||
newCount = 0;
|
||||
}
|
||||
setCount(newCount);
|
||||
};
|
||||
|
||||
const random = () => {
|
||||
const newCount = Math.floor(Math.random() * 100);
|
||||
setCount(newCount);
|
||||
};
|
||||
|
||||
const onChange = (checked: boolean) => {
|
||||
setShow(checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Badge count={count}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<ButtonGroup>
|
||||
<Button onClick={decline}>
|
||||
<MinusOutlined />
|
||||
</Button>
|
||||
<Button onClick={increase}>
|
||||
<PlusOutlined />
|
||||
</Button>
|
||||
<Button onClick={random}>
|
||||
<QuestionOutlined />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<Divider />
|
||||
<Badge dot={show}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Switch onChange={onChange} checked={show} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user