From c756c2f67984bbf7b4f5715833acc410a8fb2952 Mon Sep 17 00:00:00 2001
From: GuoJikun <qwerboy0912@gmail.com>
Date: Tue, 21 Nov 2023 17:11:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=83=20docs:=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=20text=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/src/components/text.md | 68 ++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 packages/docs/src/components/text.md

diff --git a/packages/docs/src/components/text.md b/packages/docs/src/components/text.md
new file mode 100644
index 0000000..660783a
--- /dev/null
+++ b/packages/docs/src/components/text.md
@@ -0,0 +1,68 @@
+# Text 文字
+
+文本的常见操作
+
+## 基础用法
+
+由 `type` 属性来选择 Text 的类型。
+
+<ivy-text>default</ivy-text>
+<ivy-text type="primary" class="margin-left">primary</ivy-text>
+<ivy-text type="success" class="margin-left">success</ivy-text>
+<ivy-text type="warning" class="margin-left">warning</ivy-text>
+<ivy-text type="danger" class="margin-left">danger</ivy-text>
+<ivy-text type="info" class="margin-left">info</ivy-text>
+
+```html
+<ivy-text>default</ivy-text>
+<ivy-text type="primary">primary</ivy-text>
+<ivy-text type="success">success</ivy-text>
+<ivy-text type="warning">warning</ivy-text>
+<ivy-text type="danger">danger</ivy-text>
+<ivy-text type="info">info</ivy-text>
+```
+
+## 省略
+
+通过 `truncated` 属性，在文本超过视图或最大宽度设置时展示省略符。 通过 `line-clamp` 属性控制多行的样式
+
+<ivy-text truncated style="width: 200px"> 这里是测试超出宽度显示省略号功能的 </ivy-text>
+<br />
+<ivy-text truncated line-clamp="2">
+这个功能是使用 CSS 属性 -webkit-line-clamp<br> 来设置显示行数的，超出<br> 的内容将不显示。
+</ivy-text>
+
+```html
+<ivy-text truncated style="width: 200px">
+  这里是测试超出宽度显示省略号功能的
+</ivy-text>
+<ivy-text truncated line-clamp="2">
+  这个功能是使用 CSS 属性 -webkit-line-clamp<br />
+  来设置显示行数的，超出<br />
+  的内容将不显示。
+</ivy-text>
+```
+
+## 自定义颜色和字体大小
+
+通过自定义 css 属性 来更改 Text 组件的字体颜色和大小
+
+<ivy-text>默认</ivy-text>
+<ivy-text style="--ivy-text-color: darkblue;" class="margin-left">自定义颜色</ivy-text>
+<ivy-text style="--ivy-text-color: darkblue; --ivy-text-font-size: 20px;" class="margin-left">自定义颜色和字体大小</ivy-text>
+
+```html
+<ivy-text>默认</ivy-text>
+<ivy-text style="--ivy-text-color: darkblue;">自定义颜色</ivy-text>
+<ivy-text style="--ivy-text-color: darkblue; --ivy-text-font-size: 20px;">
+  自定义颜色和字体大小
+</ivy-text>
+```
+
+## Props
+
+| 属性名     | 说明           | 类型      | 可选值                                | 默认值 |
+| ---------- | -------------- | --------- | ------------------------------------- | ------ |
+| type       | 类型           | `string`  | `primary/success/warning/danger/info` | -      |
+| truncated  | 超出显示省略号 | `boolean` | -                                     | -      |
+| line-clamp | 行数           | `number`  | -                                     | -      |