mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
c092ea89a7
Co-authored-by: Hale <hale@shundaojia.com>
72 lines
2.0 KiB
Markdown
72 lines
2.0 KiB
Markdown
---
|
|
order: 3
|
|
title:
|
|
zh-CN: 可交互
|
|
en-US: Interactive
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
提供可编辑和可复制等额外的交互能力。
|
|
|
|
## en-US
|
|
|
|
Provide additional interactive capacity of editable and copyable.
|
|
|
|
```jsx
|
|
import React, { useState } from 'react';
|
|
import { Typography } from 'antd';
|
|
import { HighlightOutlined, SmileOutlined, SmileFilled } from '@ant-design/icons';
|
|
|
|
const { Paragraph } = Typography;
|
|
|
|
const Demo = () => {
|
|
const [editableStr, setEditableStr] = useState('This is an editable text.');
|
|
const [customIconStr, setCustomIconStr] = useState('Custom Edit icon and replace tooltip text.');
|
|
const [hideTooltipStr, setHideTooltipStr] = useState('Hide Edit tooltip.');
|
|
const [lengthLimitedStr, setLengthLimitedStr] = useState(
|
|
'This is an editable text with limited length.',
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
|
|
<Paragraph
|
|
editable={{
|
|
icon: <HighlightOutlined />,
|
|
tooltip: 'click to edit text',
|
|
onChange: setCustomIconStr,
|
|
}}
|
|
>
|
|
{customIconStr}
|
|
</Paragraph>
|
|
<Paragraph editable={{ tooltip: false, onChange: setHideTooltipStr }}>
|
|
{hideTooltipStr}
|
|
</Paragraph>
|
|
<Paragraph
|
|
editable={{
|
|
onChange: setLengthLimitedStr,
|
|
maxLength: 50,
|
|
autoSize: { maxRows: 5, minRows: 3 },
|
|
}}
|
|
>
|
|
{lengthLimitedStr}
|
|
</Paragraph>
|
|
<Paragraph copyable>This is a copyable text.</Paragraph>
|
|
<Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
|
|
<Paragraph
|
|
copyable={{
|
|
icon: [<SmileOutlined key="copy-icon" />, <SmileFilled key="copied-icon" />],
|
|
tooltips: ['click here', 'you clicked!!'],
|
|
}}
|
|
>
|
|
Custom Copy icon and replace tooltips text.
|
|
</Paragraph>
|
|
<Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>
|
|
</>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
|
```
|