BigText

The BigText component renders text as ASCII art using figlet fonts. It supports font selection, alignment, and text styling.

Basic Usage

<template>
  <BigText font="Slant">Hello World</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Props

Name	Type	Default	Description
font	string	'Standard'	Font name for ASCII art
horizontalLayout	string	'default'	Layout mode: 'default', 'full', or 'fitted'
align	string	'left'	Text alignment: 'left', 'center', or 'right'
color	string	-	Text color (chalk color names)
bg	string	-	Background color
bold	boolean	false	Bold text
italic	boolean	false	Italic text
underline	boolean	false	Underlined text
dim	boolean	false	Dimmed text

Layout Props (Box Props)

Name	Type	Default	Description
flex	number | string	null	Flex shorthand when inside a flex container
flexGrow	number	null	Flex grow factor
flexShrink	number	null	Flex shrink factor
flexBasis	number | string	null	Flex basis
alignSelf	string	null	Self alignment: 'auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'
width	number | string	null	Width (chars or %)
height	number | string	null	Height (rows)
minWidth	number	null	Minimum width
maxWidth	number	null	Maximum width
minHeight	number	null	Minimum height
maxHeight	number	null	Maximum height
padding	number	null	Padding
paddingLeft	number	null	Left padding
paddingRight	number	null	Right padding
paddingTop	number	null	Top padding
paddingBottom	number	null	Bottom padding
margin	number	null	Margin
marginLeft	number	null	Left margin
marginRight	number	null	Right margin
marginTop	number	null	Top margin
marginBottom	number	null	Bottom margin

Fonts

Standard Font

<template>
  <BigText font="Standard">Standard</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Slant Font

<template>
  <BigText font="Slant">Slant</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Big Font

<template>
  <BigText font="Big">Big</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Layout Modes

Default Layout

<template>
  <BigText horizontalLayout="default">Default</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Full Layout

<template>
  <BigText horizontalLayout="full">Full</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Fitted Layout

<template>
  <BigText horizontalLayout="fitted">Fitted</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Alignment

Left Alignment

<template>
  <BigText align="left">Left</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Center Alignment

<template>
  <BigText align="center">Center</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Right Alignment

<template>
  <BigText align="right">Right</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Styling

Custom Colors

<template>
  <BigText color="cyan">Cyan</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Background Colors

<template>
  <BigText bg="blue" color="white">Blue Background</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Text Styling

<template>
  <BigText bold>Bold</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Usage with Other Components

With Gradient

<template>
  <Gradient name="rainbow">
    <BigText font="Big">Rainbow</BigText>
  </Gradient>
</template>

<script setup>
import { BigText, Gradient } from 'vuetty';
</script>

With Box

<template>
  <Box :padding="2" color="magenta" borderStyle="double">
    <BigText font="Slant">VUETTY</BigText>
  </Box>
</template>

<script setup>
import { BigText, Box } from 'vuetty';
</script>

Common Patterns

Title

<template>
  <BigText font="Slant" color="cyan">Application Title</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Header

<template>
  <BigText font="Big" align="center">Welcome</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>

Decorative Element

<template>
  <BigText font="Standard" color="green" bold>Success!</BigText>
</template>

<script setup>
import { BigText } from 'vuetty';
</script>