Divider

The Divider component renders a horizontal line to separate content in terminal apps. Customize the character, length, and color.

Basic Usage

<template>
  <Divider />
</template>

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

Props

Name	Type	Default	Description
char	string	'─'	Character used to draw the divider
length	number	40	Length of the divider in characters
color	string	-	Text color (chalk color names)

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

Customization

Custom Character

<template>
  <Divider char="=" />
</template>

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

Custom Length

<template>
  <Divider :length="20" />
</template>

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

Custom Color

<template>
  <Divider color="cyan" />
</template>

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

Usage with Other Components

With Box

<template>
  <Box :padding="1">
    <Text>Section 1</Text>
    <Divider />
    <Text>Section 2</Text>
  </Box>
</template>

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

With Row and Col

<template>
  <Col gap="1">
    <Text>Above Divider</Text>
    <Divider />
    <Text>Below Divider</Text>
  </Col>
</template>

<script setup>
import { Divider, Col, Text } from 'vuetty';
</script>