z-base-ui

Appearance

ZText ​

文本的常见操作。

基础用法 ​

Basic usage
<template>
  <z-text>Basic usage</z-text>
</template>

主题 ​

使用属性 type 选择文本主题样式，内置五种主题 primary success warning danger info。

Normal textPrimary textSuccess textWarning textDanger textInfo text
<template>
  <div class="box">
    <z-text>Normal text</z-text>
    <z-text type="primary">Primary text</z-text>
    <z-text type="success">Success text</z-text>
    <z-text type="warning">Warning text</z-text>
    <z-text type="danger">Danger text</z-text>
    <z-text type="info">Info text</z-text>
  </div>
</template>



<style scoped>
.box {
  display: flex;
  grid-gap: 12px;
}
</style>

尺寸 ​

使用属性 size 选择文本大小，内置四种尺寸 large midden normal small。

LargeMiddenNormalSmall
<template>
  <div class="box">
    <z-text size="large">Large</z-text>
    <z-text size="midden">Midden</z-text>
    <z-text size="normal">Normal</z-text>
    <z-text size="small">Small</z-text>
  </div>
</template>



<style scoped>
.box {
  display: flex;
  grid-gap: 12px;
  align-items: center;
}
</style>

两端对其 ​

添加属性 stuffed 使文字填满当前行后在进行换行。

使用stuffed：
Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text component

未使用stuffed：
Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text component
<template>
  <div style="width: 300px">
    <z-text type="success">使用stuffed：</z-text>
    <br/>
    <z-text stuffed>Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text component</z-text>

    <br/>
    <br/>
    <z-text type="danger">未使用stuffed：</z-text>
    <br/>

    <z-text>Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text component</z-text>
  </div>
</template>

省略 ​

添加属性 clamp 使文本超过最大宽度时展示省略符。

  • clamp 为 boolean 时默认单行
  • clamp 为 number \ string 时为多行
Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text componen
Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text componen
<template>
  <div>
    <z-text clamp width="300px">Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text componen</z-text>

    <div style="width: 300px;">
      <z-text clamp="3" stuffed>Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text componen</z-text>
    </div>

  </div>
</template>


<style scoped>
.box {
  display: flex;
  grid-gap: 12px;
  align-items: center;
  width: 300px;
}
</style>

覆盖 ​

使用属性 tag 设置标签类型覆盖元素。

B labelEm labelIns labelDel labelMark labelMark label

<template>
  <div class="box">
    <z-text tag="b">B label</z-text>
    <z-text tag="em">Em label</z-text>
    <z-text tag="ins">Ins label</z-text>
    <z-text tag="del">Del label</z-text>
    <z-text tag="mark">Mark label</z-text>
    <z-text tag="b">Mark label</z-text>
  </div>
</template>



<style scoped>
.box {
  display: grid;
  grid-template-rows: 5fr;
  grid-gap: 4px;
  width: fit-content;
}
</style>

组合使用 ​

500 元
500 元
Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text component
这是一段正常的文本内容 
<template>
  <div>
    <z-text>
      500
      <z-text tag="sup" type="danger">元</z-text>
    </z-text>

    <br/>
    <z-text size="large" type="primary">
      500
      <z-text tag="sup" size="small" type="success">元</z-text>
    </z-text>

    <br/>
    <z-text tag="b" type="danger" width="300px" clamp="3">Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text component</z-text>

    <br/>
    这是一段<z-text type="warning" size="large">正常</z-text>的文本内容
  </div>
</template>

动画效果 ​

通过属性 underline 启用下划线动画效果，当鼠标移入时，添加下划线从开头进入尾部滑出，将鼠标移至下方文本体验交付效果。

Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text componen
<template>
  <z-text width="300px" underline stuffed clamp="3">Thank you for using the z base ui flush component library. What you are seeing now is the multi line omitted text display in the z text componen</z-text>
</template>

Text 属性 ​

属性名说明类型默认值
type主题，决定文字颜色primary | success | warning | danger | info—
size尺寸，决定文字大小small | normal | midden | large—
clamp当文字超出最大宽度时，展示省略号，布尔时默认单行string | number | boolean—
width预设宽度，使用clamp时生效string—
stuffed处最后一行外，其余文本两段对其boolean—
tag自定义标签string—
underline下划线动画效果boolean—

Text 插槽 ​

slotName说明参数
default默认插槽，用于填充文本内容