mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
chore: update Form and TreeSelect demo (#29656)
* chore: update Form and TreeSelect demo * fix eslint
This commit is contained in:
afc163
GitHub
parent
cab596fbaa
commit
165477175d
@ -3237,32 +3237,30 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
<label
|
||||
class="ant-form-item-required"
|
||||
for="register_nickname"
|
||||
title=""
|
||||
title="Nickname"
|
||||
>
|
||||
<span>
|
||||
Nickname
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
class="anticon anticon-question-circle"
|
||||
role="img"
|
||||
Nickname
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
class="anticon anticon-question-circle ant-form-item-tooltip"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="question-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="question-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -54,7 +54,7 @@ This demo shows three typical usages:
|
||||
See the `Customized Form Controls` demo below for more advanced usage.
|
||||
|
||||
```jsx
|
||||
import { Form, Input, Select, Tooltip, Button } from 'antd';
|
||||
import { Form, Input, Select, Tooltip, Button, Space, Typography } from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
@ -66,18 +66,18 @@ const Demo = () => {
|
||||
return (
|
||||
<Form name="complex-form" onFinish={onFinish} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
|
||||
<Form.Item label="Username">
|
||||
<Form.Item
|
||||
name="username"
|
||||
noStyle
|
||||
rules={[{ required: true, message: 'Username is required' }]}
|
||||
>
|
||||
<Input style={{ width: 160 }} placeholder="Please input" />
|
||||
</Form.Item>
|
||||
<Tooltip title="Useful information">
|
||||
<a href="#API" style={{ margin: '0 8px' }}>
|
||||
Need Help?
|
||||
</a>
|
||||
</Tooltip>
|
||||
<Space>
|
||||
<Form.Item
|
||||
name="username"
|
||||
noStyle
|
||||
rules={[{ required: true, message: 'Username is required' }]}
|
||||
>
|
||||
<Input style={{ width: 160 }} placeholder="Please input" />
|
||||
</Form.Item>
|
||||
<Tooltip title="Useful information">
|
||||
<Typography.Link href="#API">Need Help?</Typography.Link>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
<Form.Item label="Address">
|
||||
<Input.Group compact>
|
||||
|
||||
@ -18,7 +18,6 @@ import React, { useState } from 'react';
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Tooltip,
|
||||
Cascader,
|
||||
Select,
|
||||
Row,
|
||||
@ -27,7 +26,6 @@ import {
|
||||
Button,
|
||||
AutoComplete,
|
||||
} from 'antd';
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
@ -188,14 +186,8 @@ const RegistrationForm = () => {
|
||||
|
||||
<Form.Item
|
||||
name="nickname"
|
||||
label={
|
||||
<span>
|
||||
Nickname
|
||||
<Tooltip title="What do you want others to call you?">
|
||||
<QuestionCircleOutlined />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
label="Nickname"
|
||||
tooltip="What do you want others to call you?"
|
||||
rules={[{ required: true, message: 'Please input your nickname!', whitespace: true }]}
|
||||
>
|
||||
<Input />
|
||||
|
||||
@ -14,45 +14,39 @@ title:
|
||||
The most basic usage.
|
||||
|
||||
```jsx
|
||||
import { useState } from 'react';
|
||||
import { TreeSelect } from 'antd';
|
||||
|
||||
const { TreeNode } = TreeSelect;
|
||||
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
value: undefined,
|
||||
const Demo = () => {
|
||||
const [value, setValue] = useState(undefined);
|
||||
const onChange = () => {
|
||||
setValue(value);
|
||||
};
|
||||
|
||||
onChange = value => {
|
||||
console.log(value);
|
||||
this.setState({ value });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<TreeSelect
|
||||
showSearch
|
||||
style={{ width: '100%' }}
|
||||
value={this.state.value}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
placeholder="Please select"
|
||||
allowClear
|
||||
treeDefaultExpandAll
|
||||
onChange={this.onChange}
|
||||
>
|
||||
<TreeNode value="parent 1" title="parent 1">
|
||||
<TreeNode value="parent 1-0" title="parent 1-0">
|
||||
<TreeNode value="leaf1" title="my leaf" />
|
||||
<TreeNode value="leaf2" title="your leaf" />
|
||||
</TreeNode>
|
||||
<TreeNode value="parent 1-1" title="parent 1-1">
|
||||
<TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
|
||||
</TreeNode>
|
||||
return (
|
||||
<TreeSelect
|
||||
showSearch
|
||||
style={{ width: '100%' }}
|
||||
value={value}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
placeholder="Please select"
|
||||
allowClear
|
||||
treeDefaultExpandAll
|
||||
onChange={onChange}
|
||||
>
|
||||
<TreeNode value="parent 1" title="parent 1">
|
||||
<TreeNode value="parent 1-0" title="parent 1-0">
|
||||
<TreeNode value="leaf1" title="leaf1" />
|
||||
<TreeNode value="leaf2" title="leaf2" />
|
||||
</TreeNode>
|
||||
</TreeSelect>
|
||||
);
|
||||
}
|
||||
}
|
||||
<TreeNode value="parent 1-1" title="parent 1-1">
|
||||
<TreeNode value="leaf3" title={<b style={{ color: '#08c' }}>leaf3</b>} />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</TreeSelect>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user