Text 文本 ​

<template>
  <u-text class="mx-1">Default</u-text>
  <u-text class="mx-1" type="primary">Primary</u-text>
  <u-text class="mx-1" type="success">Success</u-text>
  <u-text class="mx-1" type="info">Info</u-text>
  <u-text class="mx-1" type="warning">Warning</u-text>
  <u-text class="mx-1" type="danger">Danger</u-text>
</template>

<template>
  <u-text class="mx-1" size="large">Large</u-text>
  <u-text class="mx-1">Default</u-text>
  <u-text class="mx-1" size="small">Small</u-text>
</template>

<template>
  <u-text class="w-150px mb-2" truncated> Self element set width 100px </u-text>
  <u-row class="w-150px mb-2">
    <u-text truncated>Squeezed by parent element</u-text>
  </u-row>
  <u-row class="mb-2">
    <u-text line-clamp="2">
      The -webkit-line-clamp CSS property<br />
      allows limiting of the contents of<br />
      a block to the specified number of lines.
    </u-text>
  </u-row>
  <u-row>
    <u-text ref="textRef" class="w-150px" truncated>
      Show tooltip only when the text is truncated
    </u-text>
  </u-row>
  <p class="mt-2">isTruncated: {{ !!textRef?.isTruncated }}</p>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TextInstance } from 'uniboot-ui'

const textRef = ref<TextInstance>()
</script>

<template>
  <u-space direction="vertical">
    <u-text>span</u-text>
    <u-text tag="p">This is a paragraph.</u-text>
    <u-text tag="b">Bold</u-text>
    <u-text tag="i">Italic</u-text>
    <u-text>
      This is
      <u-text tag="sub" size="small">subscript</u-text>
    </u-text>
    <u-text>
      This is
      <u-text tag="sup" size="small">superscript</u-text>
    </u-text>
    <u-text tag="ins">Inserted</u-text>
    <u-text tag="del">Deleted</u-text>
    <u-text tag="mark">Marked</u-text>
  </u-space>
</template>

<template>
  <u-space direction="vertical">
    <u-text>
      <u-icon>
        <ElementPlus />
      </u-icon>
      Element-Plus
    </u-text>
    <u-row>
      <u-text>Rate</u-text>
      <u-rate class="ml-1" />
    </u-row>
    <u-text>
      This is text mixed icon
      <u-icon>
        <Bell />
      </u-icon>
      and component
      <u-button>Button</u-button>
    </u-text>
  </u-space>
</template>

<script lang="ts" setup>
import { Bell, ElementPlus } from '@uniboot/icons-vue'
</script>