# Text

文本组件，便于切换主题及文本颜色

## 代码演示

<CodePreview src="/doc-comp/text" :height="460">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper contentFullHeight title="文本组件" content="用于文本元素，便于设置文本属性">
    <div class="space-x-2 space-y-sm">
      <Text color="primary" class="bg-colorPrimaryBg">我是主题色的文字</Text>
      <Text class="!text-colorPrimaryTextHover bg-colorPrimaryBgHover">
        我是主题色hover的文字
      </Text>
      <Text class="!text-colorPrimaryTextActive bg-colorPrimaryBg"> 我是主题色active的文字 </Text>
      <Text class="!text-colorPrimaryText bg-colorPrimaryBg border-colorPrimaryBorder border-1">
        我是主题色border的文字
      </Text>
      <Text color="success">我是成功色的文字</Text>
      <Text color="warning">我是警告色的文字</Text>
      <Text color="info">我是信息色的文字</Text>
      <Text color="paragraph">我是第一级文字</Text>
      <Text color="secondary">我是第二级文字</Text>
      <Text color="description">我是第三级文字</Text>
      <Text color="placeholder">我是第四级文字</Text>

      <Text color="inverse">我是反转颜色的文字</Text>
      <Text color="current">我是继承上级元素颜色的文字</Text>
      <Text italic>我是斜体文字</Text>

      <Text truncate>我是长度超出宽度会自动隐藏的文字</Text>
      <Text block>我是块级元素的文字</Text>
      <Text bold>我是加粗的文字</Text>
      <Text uppercase>我是大写的文字uppercase</Text>
      <Text underline>我是下划线的文字</Text>
      <Text block preIcon="ant-design:aliwangwang-outlined">我是有前置图标的文字</Text>
      <Text block postIcon="ant-design:aliwangwang-outlined">我是有后置图标的文字</Text>
      <Text block preIcon="moon" isSvgIcon>我是有前置SVG图标的文字</Text>
      <Text block postIcon="sun" isSvgIcon>我是有后置SVG图标的文字</Text>

      <Text block postIcon="ant-design:aliwangwang-outlined" hoverable>我是鼠标划过高亮的文字</Text>
    </div>
  </PageWrapper>
</template>
<script setup lang="ts">
  import { PageWrapper } from '@eciol/ant-ui';
  import { Text } from '@eciol/share-ui';
</script>
```
</details>
</CodePreview>

## Usage

```vue
<template>
  <div>
    <Text color="primary">我是主题色的文字</Text>
    <Text truncate>我是长度超出宽度会自动隐藏的文字</Text>
  </div>
</template>
<script setup lang="ts">
  import { Text } from '@eciol/share-ui';
</script>
```

## Props

| 属性        | 类型               | 默认值  | 说明                     |
| ----------- | ------------------ | ------- | ------------------------ |
| size | `xs`, `sm`, `md`, `lg`, `xl`, `current`, `sm`       | 文本大小     |
| align        | `left`, `center`, `right`, `justify`         | `left` | 文本对齐方式 |
| color      | `primary`, `danger`, `success`, `warning`, `info`, `exception`, `error`, `paragraph`, `secondary`, `description`, `placeholder`, `disabled`, `inverse`, `current`          | `current` | 文本颜色     |
| italic        | `boolean`      | `false` | 文本是否斜体 |
| truncate        | `boolean`      | `false` | 文本是否超出宽度隐藏 |
| block        | `boolean`      | `false` | 文本是否是块级元素 |
| bold        | `boolean`      | `false` | 文本是否加粗 |
| uppercase        | `boolean`      | `false` | 文本是否转为大写 |
| underline        | `boolean`      | `false` | 文本是否有下划线 |
| preIcon        | `string`      | - | 文本前置图标 |
| postIcon        | `string`      | - | 文本后置图标 |
| iconSize        | `number`      | 14 | 文本图标大小 |
| isSvgIcon        | `boolean`      | `false` | 文本图标是否是svg图标 |
| hoverable        | `boolean`      | `false` | 文本是否划过高亮 |

## Slots

| 名称    | 说明     |
| ------- | -------- |
| default | 文本 |