Text3D 3D Text Effect

Used to create a 3D text effect.

Basic Usage

Set the text attribute to specify the text content to be displayed.

Onionl UI

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center h-sm">
    <OlText3D text="Onionl UI" class="text-100px" />
  </div>
</template>

Customizing Layers

Set the layer attribute to specify the number of layers for the shadow, with a larger number resulting in a stronger 3D effect.

Onionl UI

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center h-sm">
    <OlText3D text="Onionl UI" class="text-100px" :layer="10" />
  </div>
</template>

Direction Control

Use the direction attribute to control the direction of the 3D effect, supporting top-left, top-right, bottom-left, and bottom-right directions.

Onionl UI

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center h-sm">
    <OlText3D text="Onionl UI" class="text-100px" direction="top-left" />
  </div>
</template>

Blur Effect

Add the blur attribute to enable the blur effect for the shadow.

Onionl UI

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center h-sm">
    <OlText3D text="Onionl UI" class="text-100px" :layer="8" blur />
  </div>
</template>

Customizing Styles

You can customize the text style through the color, shadowColor, and letterSpacing properties.

Onionl UI

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center h-sm">
    <OlText3D
      text="Onionl UI"
      class="text-100px"
      color="#ff479a"
      shadowColor="#00d0ff"
      letterSpacing="10px"
    />
  </div>
</template>

Attributes

Attribute Name	Description	Type	Default Value
text	Text content to be displayed	string	—
color	Text color	string	var(--onl-primary)
shadowColor	Shadow color	string	var(--onl-purple-900)
layer	Number of layers for the 3D effect	number	5
letterSpacing	Letter spacing	string	'0'
direction	Direction of the 3D effect	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	—
blur	Whether to enable the blur effect	boolean	false