Text 文本

文本的常见操作

基础用法

用 type 属性设置 Text 类型, bold 属性设置粗体

<template>
  <p>
    <px-text class="mr-10">Default</px-text>
    <px-text class="mr-10" type="primary">Primary</px-text>
    <px-text class="mr-10" type="success">Success</px-text>
    <px-text class="mr-10" type="warning">Warning</px-text>
    <px-text class="mr-10" type="danger">Danger</px-text>
  </p>
  <p>
    <px-text class="mr-10" bold>这</px-text>
    <px-text class="mr-10" bold type="primary">个</px-text>
    <px-text class="mr-10" bold type="success">是</px-text>
    <px-text class="mr-10" bold type="warning">粗</px-text>
    <px-text class="mr-10" bold type="danger">体</px-text>
  </p>
</template>

尺寸

使用 size 属性设置 Text 尺寸, 默认大小为 16px, 传入值默认为 px

<template>
  <p>
    <px-text class="mr-10" size="12">Default</px-text>
    <px-text class="mr-10" size="16" type="primary">Primary</px-text>
    <px-text class="mr-10" size="20" type="success">Success</px-text>
  </p>
  <p>
    <px-text class="mr-10" size="24" type="warning">Warning</px-text>
    <px-text class="mr-10" size="28" type="danger">Danger</px-text>
  </p>
</template>

颜色

使用 color 属性设置 Text 颜色

<template>
  <px-text class="mr-10" color="green">Text</px-text>
  <px-text class="mr-10" color="#ff4785">Text</px-text>
  <px-text class="mr-10" color="rgb(0,212,255)">Text</px-text>
  <px-text class="mr-10" color="hsl(265, 100%, 50%)">Text</px-text>
  <px-text class="mr-10" color="hwb(38 0% 0%)">Text</px-text>
</template>

对齐方式 & 紧凑

使用 align 属性设置 Text 对齐方式, 可选值为 left, center, right, 使用 compact 属性设置 Text 是否紧凑

<template>
  <p>
    <px-text align="left" class="block w-full">align-left</px-text>
  </p>
  <p>
    <px-text align="center" class="block w-full">align-center</px-text>
  </p>
  <p>
    <px-text align="right" class="block w-full">align-right</px-text>
  </p>
  <p>
    <px-text>文本文本</px-text>
    <br />
    <px-text compact>文本文本</px-text>
    <br />
    <px-text>文本文本</px-text>
  </p>
</template>

Tag

可以自定义元素标签。例如，按钮，div，路由链接，nuxt 链接。

<template>
  <px-text>span</px-text>
  <px-text tag="div">div</px-text>
  <px-text tag="a">a</px-text>
</template>

Text API

Props

Name	Description	Type	Default
size	字体大小	number	16
type	字体类型	enum - primary | success | warning | danger | base	base
color	字体颜色	string	#212529
bold	是否粗体	boolean	false
align	对齐方式	enum - left | center | right	left
compact	是否紧凑	boolean	false
tag	自定义元素标签	string/Component	span