Divider & Spacer

Divider is a thin line that groups content in lists and layouts. Spacer creates an adjustable, empty spacer that can be used to tune the spacing between widgets in a Flex container, like Row or Column.

Usage

Horizontal Divider:

Item 1

Item 2

Item 3

Vertical Divider:

Left

Right

Spacer:

<template>
  <Column :gap="20">
    <Text>Horizontal Divider:</Text>
    <Container color="#f5f5f5" :padding="EdgeInsets.all(16)">
      <Column>
        <Text>Item 1</Text>
        <Divider />
        <Text>Item 2</Text>
        <Divider :color="'red'" :thickness="2" />
        <Text>Item 3</Text>
      </Column>
    </Container>

    <Text>Vertical Divider:</Text>
    <Container color="#f5f5f5" :height="50" :padding="EdgeInsets.all(8)">
      <Row>
        <Text>Left</Text>
        <Divider vertical />
        <Text>Right</Text>
      </Row>
    </Container>

    <Text>Spacer:</Text>
    <Row>
      <Container :width="50" :height="50" color="blue" />
      <Spacer />
      <Container :width="50" :height="50" color="green" />
    </Row>
  </Column>
</template>

<script setup lang="ts">
import { Column, Row, Text, Divider, Container, EdgeInsets, Spacer } from "fluekit";
</script>

Divider API

Props

Name	Type	Default	Description
height	number	16	Total height of the divider widget (including empty space) for horizontal divider.
thickness	number	1	Thickness of the line.
indent	number	0	Empty space before the line.
endIndent	number	0	Empty space after the line.
color	string	'#e0e0e0'	Color of the line.
vertical	boolean	false	If true, draws a vertical line (VerticalDivider).

Spacer API

Props

Name	Type	Default	Description
flex	number	1	The flex factor to use for the spacer.