Skip to content

Commit 7f23de9

Browse files
committed
[docs](BasicTypographyEllipsis): Adjust docs
1 parent 2e9ae2a commit 7f23de9

File tree

2 files changed

+123
-7
lines changed

2 files changed

+123
-7
lines changed
Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,56 @@
11
---
2-
title:
3-
category: lib
2+
group:
3+
title: 通用
4+
order: 2
45
---
56

6-
## Example
7+
# BasicTypographyEllipsis 文本省略
78

8-
```
9-
TODO
9+
基于 Ant Design Typography 封装,提供文本省略、Tooltip 和复制功能。
1010

11-
dms-kit 版本移除 linkData 功能
12-
```
11+
## 何时使用
12+
13+
- 需要在固定宽度容器中显示长文本
14+
- 需要文本超出时自动省略并提供 Tooltip
15+
- 需要为省略的文本提供复制功能
16+
17+
## 代码演示
18+
19+
### 基础用法
20+
21+
<code src="./demo/basic.tsx"></code>
22+
23+
## API
24+
25+
BasicTypographyEllipsis 基于 Ant Design Typography.Text 封装。
26+
27+
| 参数 | 说明 | 类型 | 默认值 | 必填 |
28+
| --- | --- | --- | --- | --- |
29+
| textCont | 文本内容 | `string` | - ||
30+
| tooltipLimitLength | Tooltip 显示的最大文本长度 | `number` | `500` | - |
31+
| tooltipsMaxWidth | Tooltip 的最大宽度(px) | `number` | `640` | - |
32+
| copyable | 是否显示复制按钮 | `boolean` | `true` | - |
33+
| tooltips | Tooltip 配置 | `EllipsisConfig['tooltip']` | `true` | - |
34+
| className | 自定义类名 | `string` | - | - |
35+
36+
## 组件特点
37+
38+
1. **统一样式规范** → 自动应用项目主题系统的样式
39+
2. **自动省略** → 文本超出容器宽度时自动显示省略号
40+
3. **Tooltip 支持** → 鼠标悬停查看完整内容
41+
4. **长度限制** → Tooltip 内容过长时自动截断,避免影响体验
42+
5. **复制功能** → 支持一键复制完整文本
43+
44+
## 注意事项
45+
46+
1. 组件需要包裹在 `ConfigProvider` 中确保主题正常工作
47+
2. **外层容器必须设置 `max-width`**,否则文本不会省略
48+
3. `tooltipLimitLength` 用于限制 Tooltip 显示的文本长度,超过部分会显示省略号
49+
4. `tooltipsMaxWidth` 控制 Tooltip 的最大宽度,避免 Tooltip 过宽
50+
51+
## 最佳实践
52+
53+
1. **容器宽度**:外层容器必须设置明确的 `max-width``width`
54+
2. **长文本场景**:对于超长文本(如日志、错误信息),使用 `tooltipLimitLength` 限制 Tooltip 长度
55+
3. **复制功能**:不需要复制功能时,设置 `copyable={false}` 减少视觉干扰
56+
4. **Tooltip 宽度**:根据内容长度调整 `tooltipsMaxWidth`,确保 Tooltip 不会过宽
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react';
2+
import { BasicTypographyEllipsis, ConfigProvider } from '@actiontech/dms-kit';
3+
import { Space, Typography } from 'antd';
4+
5+
const { Text } = Typography;
6+
7+
const BasicTypographyEllipsisDemo = () => {
8+
const shortText = '这是一段短文本';
9+
const longText =
10+
'这是一段很长的文本内容,用于演示文本超出容器宽度时的省略效果。当文本内容超过容器宽度时,会自动显示省略号,鼠标悬停可以查看完整内容,并且支持复制功能。';
11+
const veryLongText =
12+
'这是一段超长的文本内容,用于演示 tooltipLimitLength 功能。当文本长度超过 tooltipLimitLength 设置的值时,tooltip 中也会显示省略号,避免 tooltip 内容过长影响用户体验。这段文本会持续很长很长,用于测试 tooltip 长度限制功能是否正常工作。在实际应用中,这个功能对于展示日志、错误信息等长文本非常有用。';
13+
14+
return (
15+
<ConfigProvider>
16+
<Space direction="vertical" size="large" style={{ width: '100%' }}>
17+
<div>
18+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
19+
基础用法:
20+
</Text>
21+
<div style={{ maxWidth: 300 }}>
22+
<BasicTypographyEllipsis textCont={longText} />
23+
</div>
24+
</div>
25+
26+
<div>
27+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
28+
短文本(不会省略):
29+
</Text>
30+
<div style={{ maxWidth: 300 }}>
31+
<BasicTypographyEllipsis textCont={shortText} />
32+
</div>
33+
</div>
34+
35+
<div>
36+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
37+
禁用复制功能:
38+
</Text>
39+
<div style={{ maxWidth: 300 }}>
40+
<BasicTypographyEllipsis textCont={longText} copyable={false} />
41+
</div>
42+
</div>
43+
44+
<div>
45+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
46+
限制 Tooltip 长度(tooltipLimitLength=50):
47+
</Text>
48+
<div style={{ maxWidth: 300 }}>
49+
<BasicTypographyEllipsis
50+
textCont={veryLongText}
51+
tooltipLimitLength={50}
52+
/>
53+
</div>
54+
</div>
55+
56+
<div>
57+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
58+
自定义 Tooltip 最大宽度(tooltipsMaxWidth=400):
59+
</Text>
60+
<div style={{ maxWidth: 300 }}>
61+
<BasicTypographyEllipsis
62+
textCont={longText}
63+
tooltipsMaxWidth={400}
64+
/>
65+
</div>
66+
</div>
67+
</Space>
68+
</ConfigProvider>
69+
);
70+
};
71+
72+
export default BasicTypographyEllipsisDemo;

0 commit comments

Comments
 (0)