mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 21:18:01 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
2.1 KiB
2.1 KiB
| order | title | debug | ||||
|---|---|---|---|---|---|---|
| 99 |
|
true |
zh-CN
多行文本省略。
en-US
Multiple line ellipsis support.
import React, { useState } from 'react';
import { Typography, Slider, Switch } from 'antd';
const { Text, Paragraph } = Typography;
const App: React.FC = () => {
const [rows, setRows] = useState(1);
const [longText, setLongText] = useState(true);
const [copyable, setCopyable] = useState(false);
const [editable, setEditable] = useState(false);
const [expandable, setExpandable] = useState(false);
return (
<>
<Switch checked={longText} checkedChildren="Long Text" onChange={setLongText} />
<Switch checked={copyable} onChange={setCopyable} />
<Switch checked={editable} onChange={setEditable} />
<Switch checked={expandable} onChange={setExpandable} />
<Slider value={rows} min={1} max={10} onChange={setRows} />
{longText ? (
<Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
Ant Design, a design language for background applications, is refined by Ant UED Team.
This is a nest sample{' '}
<Text code strong delete>
Test
</Text>{' '}
case. Bnt Design, a design language for background applications, is refined by Ant UED
Team. Cnt Design, a design language for background applications, is refined by Ant UED
Team. Dnt Design, a design language for background applications, is refined by Ant UED
Team. Ent Design, a design language for background applications, is refined by Ant UED
Team.
</Paragraph>
) : (
<Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
Hello World
</Paragraph>
)}
<Text style={{ width: 100 }} ellipsis copyable>
Ant Design is a design language for background applications, is refined by Ant UED Team.
</Text>
<p>
[Before]<Text ellipsis>not ellipsis</Text>[After]
</p>
</>
);
};
export default App;