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>
    <px-text class="mr-10" type="sakura">Sakura</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>
    <px-text class="mr-10" bold type="sakura">喵</px-text>
  </p>
</template>

尺寸

使用 size 属性设置 Text 尺寸, 默认大小为 14px, 传入值默认为 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>
    <px-text class="mr-10" size="28" type="sakura">Sakura</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>

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Text API

Props

Name	Description	Type	Default
size	文本大小(px)	number	14
type	文本类型	enum	base
color	文本颜色	string	#212529
bold	是否启用粗体	boolean	false
align	对齐方式	enum	left
tag	自定义元素标签	string | Component	span
compact	是否启用紧凑模式	boolean	false