Fes Design

Text 文本 ​

用于普通文本展示。

组件注册 ​

js
import { FText } from '@fesjs/fes-design';

app.use(FText);

代码演示 ​

基础用法 ​

play
<template>
    <FSpace>
        <FText>Default</FText>
        <FDivider vertical />
        <FText type="success">Success</FText>
        <FDivider vertical />
        <FText type="info">Info</FText>
        <FDivider vertical />
        <FText type="warning">Warning</FText>
        <FDivider vertical />
        <FText type="danger">Danger</FText>
    </FSpace>
</template>

尺寸 ​

play
<template>
    <FSpace>
        <FText size="large">Large</FText>
        <FDivider vertical />
        <FText>Middle</FText>
        <FDivider vertical />
        <FText size="small">Small</FText>
    </FSpace>
</template>

字体效果 ​

play
<template>
    <FForm :labelWidth="160">
        <FFormItem label="字体加粗：">
            <FRadioGroup v-model="isStrong">
                <FRadio :value="false">否</FRadio>
                <FRadio :value="true">是</FRadio>
            </FRadioGroup>
        </FFormItem>
        <FFormItem label="字体倾斜：">
            <FRadioGroup v-model="IsItalic">
                <FRadio :value="false">否</FRadio>
                <FRadio :value="true">是</FRadio>
            </FRadioGroup>
        </FFormItem>
    </FForm>

    <FDivider />

    <FSpace>
        <FText :strong="isStrong" :italic="IsItalic">
            道生一，一生二，二生三，三生万物
        </FText>
    </FSpace>
</template>

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

const isStrong = ref(true);
const IsItalic = ref(true);
</script>

自定义元素标签 ​

play
<template>
    <FSpace vertical>
        <FText>span</FText>
        <FText tag="p">This is a paragraph.</FText>
        <FText tag="b">Bold</FText>
        <FText tag="i">Italic</FText>
        <FText>
            This is
            <FText tag="sub" size="small">subscript</FText>
        </FText>
        <FText>
            This is
            <FText tag="sup" size="small">superscript</FText>
        </FText>
        <FText tag="ins">Inserted</FText>
        <FText tag="del">Deleted</FText>
        <FText tag="mark">Marked</FText>
    </FSpace>
</template>

混合使用 ​

play
<template>
    <FSpace vertical>
        <FText>
            This is text mixed icon
            <BellOutlined />
            and component
            <FButton>Button</FButton>
            and
            <FText>a subtext</FText>
            .
        </FText>
        <FEllipsis :tooltip="{ showAfter: 500 }" style="max-width: 240px">
            <FText>
                This is text mixed icon
                <BellOutlined />
                and component
                <FButton>Button</FButton>
                and
                <FText>a subtext</FText>
                .
            </FText>
        </FEllipsis>
    </FSpace>
</template>

<script setup>
import { BellOutlined } from '@fesjs/fes-design/icon';
</script>

颜色渐变 ​

通过gradient，可以设置文字的颜色渐变

play
<template>
    <div>
        <FText :gradient="gradientColor1"> 这是渐变色的文本，角度为数值类型 </FText>
    </div>
    <div>
        <FText :gradient="gradientColor2"> 这是渐变色的文本，角度为字符串类型 </FText>
    </div>
    <div>
        <FText gradient="#5384ff"> 这是纯色的文本 </FText>
    </div>
    <div>
        <FText gradient="#722ed1"> 这是纯色文本，没有渐变角度文本 </FText>
    </div>
</template>

<script setup>
const gradientColor1 = {
    deg: 90,
    from: '#5384ff',
    to: '#00cb91',
};

const gradientColor2 = {
    deg: '90deg',
    from: '#5384ff',
    to: '#00cb91',
};
</script>

Text Props ​

属性说明类型默认值
type类型，可选值为default success info warning dangerstringdefault
size尺寸，可选值为small middle largestringmiddle
strong是否字体加粗booleanfalse
italic是否字体倾斜booleanfalse
tag自定义元素标签，可选值为span div p h1 h2 h3 等stringspan
gradient文本渐变色配置string/Object<Gradient>-

Text Slots ​

slot 名称说明
default默认内容

Gradient Props ​

属性说明类型默认值
from起始颜色string-
to结束颜色string-
deg渐变角度，默认为 0，即从上之下渐变number/string0