Fes Design
本页目录

Text 文本 ​

用于普通文本展示。

组件注册 ​

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

app.use(FText);

代码演示 ​

基础用法 ​

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

尺寸 ​

play
<template>
    <FSpace>
        <FText size="large">Large</FText>
        <FDivider vertical></FDivider>
        <FText>Middle</FText>
        <FDivider vertical></FDivider>
        <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></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>

Text Props ​

属性说明类型默认值
type类型，可选值为default success info warning dangerstringdefault
size尺寸，可选值为small middle largestringmiddle
strong是否字体加粗booleanfalse
italic是否字体倾斜booleanfalse
tag自定义元素标签，可选值为span div p h1 h2 h3 等stringspan

Text Slots ​

slot 名称说明
default默认内容