Text

Introduction

The text component is used to display text content, supporting multiple styles and sizes. You can use <MYText></MYText> or <MYText /> to implement a text component.

Color Usage

type

Using type in MYText allows you to define text colors. These are the basic color definitions provided by mengyue-components. For example, use type to define the following colors. If type is not specified, the default text color is black:

Code Demo

Default Text

primary Text

Success Text

Warning Text

Danger Text

Info Text

<template>
  <MYText>Default Text</MYText>
  <MYText type='primary'>primary Text</MYText>
  <MYText type='success'>Success Text</MYText>
  <MYText type='warning'>Warning Text</MYText>
  <MYText type='danger'>Danger Text</MYText>
  <MYText type='info'>Info Text</MYText>
</template>

展开代码

Custom Color

If the default colors don't meet your needs, you can also customize the color using the textColor property.

Code Demo

Custom Red TextCustom Pink Text

<template>
  <MYText textColor='#ff0000'>Custom Red Text</MYText>
  <MYText textColor='pink'>Custom Pink Text</MYText>
</template>

展开代码

Sizing

size

Use the size property to adjust the text size.

Code Demo

small Textmedium Textlarge Text

<template>
  <MYText size='small'>small Text</MYText>
  <MYText size='medium'>medium Text</MYText>
  <MYText size='large'>large Text</MYText>
</template>

展开代码

Custom Size

Custom text sizes are also supported:

Code Demo

Custom Text 20pxCustom Text: 20Custom Text 5remCustom Text 5em

<template>
  <MYText size='20px'>Custom Text 20px</MYText>
  <MYText :size='20'>Custom Text: 20</MYText>
  <MYText size='5rem'>Custom Text 5rem</MYText>
  <MYText size='5em'>Custom Text 5em</MYText>
</template>

展开代码

Combined Usage

Finally, combine multiple APIs:

Code Demo

Combined usage with medium and blue

<template>
  <MYText size='5em' textColor='blue'>Combined usage with medium and blue</MYText>
</template>

展开代码

API Reference

Props

Parameter	Description	Type	Options	Default
type	Text type	string	primary/success/warning/danger/info	—
size	Text size	string	small/medium/large/number/custom	medium
textColor	Text color	string	Supports hex colors or color names	—
tag	Render tag	string	All HTML tags	span

Type Definitions

interface TextProps {
  type?: string;
  size?: string | number;
  textColor?: string;
  tag?: string;
}