文本

用于展示一行或多行文本内容的组件。

基础用法

通过标签 NueText 使用文本组件。

大小

通过属性 size 修改文本大小。属性类型为 string，可选值有 xs、sm、md、lg、xl、xxl 以及 CSS 大小值。

<template>
    <nue-div align="center">
        <nue-text size="sm">sm</nue-text>
        <nue-text size="16px">16px</nue-text>
        <nue-text size="var(--custom-size)">CustomSize</nue-text>
    </nue-div>
</template>

<style scoped>
.nue-text {
    --custom-size: 1.5rem;
}
</style>

颜色

通过属性 color 修改文本颜色。属性类型为 string，支持 CSS color 属性值。

<template>
    <nue-div>
        <nue-text color="red">红色</nue-text>
        <nue-text color="#00FF00">绿色</nue-text>
        <nue-text color="var(--custom-color)">蓝色</nue-text>
    </nue-div>
</template>

<style scoped>
.nue-text {
    --custom-color: rgb(0, 0, 255);
}
</style>

粗细

通过属性 weight 修改文本粗细。属性类型为 string，支持 CSS font-weight 属性值。

<template>
    <nue-div align="center">
        <nue-text weight="200">200</nue-text>
        <nue-text weight="bold">bold</nue-text>
        <nue-text weight="var(--custom-weight)">CustomWeight</nue-text>
    </nue-div>
</template>

<style scoped>
.nue-text {
    --custom-weight: 900;
}
</style>

装饰

通过属性 decoration 修改文本装饰。属性类型为 string，支持 CSS text-decoration 属性值。

<template>
    <nue-div align="center">
        <nue-text decoration="underline">下划线</nue-text>
        <nue-text decoration="line-through">删除线</nue-text>
        <nue-text decoration="var(--custom-decoration)">上划线</nue-text>
    </nue-div>
</template>

<style scoped>
.nue-text {
    --custom-decoration: overline;
}
</style>

标签变更

通过属性 tag 修改渲染时的元素标签。默认为 <span> 标签。

<template>
    <nue-div align="center">
        <nue-text tag="h1">一级标题(h1)</nue-text>
        <nue-text tag="p">段落(p)</nue-text>
        <nue-text tag="b">粗体(b)</nue-text>
    </nue-div>
</template>

文本溢出

通过属性 clamped 设置文本溢出时是否显示省略号。属性类型为 number ，表示显示省略号并限制显示的行数，默认为未定义。

<template>
    <nue-div vertical>
        <nue-button @click="handleClick">{{ isClamped ? '禁用' : '启用' }}溢出隐藏</nue-button>
        <nue-text :clamped="isClamped">
            文本可显示的最大行数。当内容超过设置值则会隐藏超出的内容，并显示省略号。（填充文本：在那遥远而神秘的夜晚，
            星辰如同细碎的钻石，点缀着深邃的天幕。微风轻拂，带着一丝丝凉爽和花香，仿佛能穿透心灵的每一个角落。
            魔法在空气中悄然弥漫，每一盏路灯都似乎拥有了自己的故事，静静地诉说着过往与未来。）
        </nue-text>
    </nue-div>
</template>

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

const isClamped = ref(0);

const handleClick = () => {
    isClamped.value = isClamped.value ? 0 : 2;
};
</script>