Text

Brief 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.

Using Colors

type

Use type in MYText to define text colors. These colors are basic color definitions provided by mengyue-components. For example, use type to achieve the color definitions below. 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 do not meet your needs, you can customize the text color using the color prop.

Code Demo

Custom red textCustom pink text

<template>
  <MYText color='#ff0000'>Custom red text</MYText>
  <MYText color='pink'>Custom pink text</MYText>
</template>

展开代码

Sizes

size

Use the size prop 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

You can also customize the text size:

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, here is a combination of multiple APIs:

Code Demo

Combined usage: medium size and blue color

<template>
  <MYText size='5em' color='blue'>Combined usage: medium size and blue color</MYText>
</template>

展开代码

API Reference

Props

Prop	Description	Type	Options	Default
type	Text type	string	primary/success/warning/danger/info	—
size	Text size	string	small/medium/large/number/custom value	medium
Tecolor	Text color	string	Hex or named color	—
tag	Rendered HTML tag	string	Any HTML tag	span

Type Definitions

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