Text ​

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

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

<template>
  <w-text class="w-150px mb-2" truncated> Self element set width 100px </w-text>
  <w-row class="w-150px mb-2">
    <w-text truncated>Squeezed by parent element</w-text>
  </w-row>
  <w-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.
  </w-text>
</template>

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

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

<script lang="ts" setup>
import { Bell, Edit } from '@win-design-next/icons-vue'
</script>