Row & Column

Flex layouts for horizontal and vertical arrangement.

Basic Usage

1

2

3

<template>
  <Container
    color="#f0f0f0"
    :padding="EdgeInsets.all(10)"
    :margin="EdgeInsets.only({ bottom: 20 })"
  >
    <Column mainAxisSize="min">
      <Row mainAxisAlignment="space-between" :margin="EdgeInsets.only({ bottom: 10 })">
        <Container :width="50" :height="50" color="red" alignment="center"
          ><Text data="1" :style="TextStyle({ color: 'white' })"
        /></Container>
        <Container :width="50" :height="50" color="green" alignment="center"
          ><Text data="2" :style="TextStyle({ color: 'white' })"
        /></Container>
        <Container :width="50" :height="50" color="blue" alignment="center"
          ><Text data="3" :style="TextStyle({ color: 'white' })"
        /></Container>
      </Row>
    </Column>
  </Container>
</template>

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

Alignment

Control main axis and cross axis alignment.

Align(bottomRight) vs Center

<template>
  <Row :gap="20">
    <Container :width="100" :height="100" color="#ddd">
      <Align alignment="bottomRight">
        <Container :width="30" :height="30" color="red" />
      </Align>
    </Container>
    <Container :width="100" :height="100" color="#ddd">
      <Center>
        <Container :width="30" :height="30" color="blue" />
      </Center>
    </Container>
  </Row>
  <Container :margin="EdgeInsets.only({ top: 5 })">
    <Text data="Align(bottomRight) vs Center" :style="TextStyle({ fontSize: 12, color: 'grey' })" />
  </Container>
</template>

<script setup lang="ts">
import { Container, Row, Align, Center, Text, TextStyle, EdgeInsets } from "fluekit";
</script>

MainAxisAlignment Examples

MainAxisAlignment.spaceBetween

1

2

3

MainAxisAlignment.spaceAround

1

2

3

MainAxisAlignment.spaceEvenly

1

2

3

<template>
  <Container :width="300" :height="150" color="#f0f0f0" :padding="EdgeInsets.all(10)">
    <Text data="MainAxisAlignment.spaceBetween" :style="TextStyle({ marginBottom: '10px' })" />
    <Row mainAxisAlignment="spaceBetween" :margin="EdgeInsets.only({ bottom: '10px' })">
      <Container :width="40" :height="40" color="red" alignment="center"
        ><Text data="1" :style="TextStyle({ color: 'white' })"
      /></Container>
      <Container :width="40" :height="40" color="green" alignment="center"
        ><Text data="2" :style="TextStyle({ color: 'white' })"
      /></Container>
      <Container :width="40" :height="40" color="blue" alignment="center"
        ><Text data="3" :style="TextStyle({ color: 'white' })"
      /></Container>
    </Row>

    <Text data="MainAxisAlignment.spaceAround" :style="TextStyle({ marginBottom: '10px' })" />
    <Row mainAxisAlignment="spaceAround" :margin="EdgeInsets.only({ bottom: '10px' })">
      <Container :width="40" :height="40" color="red" alignment="center"
        ><Text data="1" :style="TextStyle({ color: 'white' })"
      /></Container>
      <Container :width="40" :height="40" color="green" alignment="center"
        ><Text data="2" :style="TextStyle({ color: 'white' })"
      /></Container>
      <Container :width="40" :height="40" color="blue" alignment="center"
        ><Text data="3" :style="TextStyle({ color: 'white' })"
      /></Container>
    </Row>

    <Text data="MainAxisAlignment.spaceEvenly" :style="TextStyle({ marginBottom: '10px' })" />
    <Row mainAxisAlignment="spaceEvenly">
      <Container :width="40" :height="40" color="red" alignment="center"
        ><Text data="1" :style="TextStyle({ color: 'white' })"
      /></Container>
      <Container :width="40" :height="40" color="green" alignment="center"
        ><Text data="2" :style="TextStyle({ color: 'white' })"
      /></Container>
      <Container :width="40" :height="40" color="blue" alignment="center"
        ><Text data="3" :style="TextStyle({ color: 'white' })"
      /></Container>
    </Row>
  </Container>
</template>

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

ColumnAxisAlignment Examples

MainAxisAlignment.start

1

2

3

MainAxisAlignment.center

1

2

3

MainAxisAlignment.end

1

2

3

<template>
  <Row :gap="20">
    <Container :width="100" :height="200" color="#f0f0f0" :padding="EdgeInsets.all(10)">
      <Text
        data="MainAxisAlignment.start"
        :style="TextStyle({ marginBottom: '10px', fontSize: '12px' })"
      />
      <Column mainAxisAlignment="start" :height="150">
        <Container :width="30" :height="30" color="red" alignment="center"
          ><Text data="1" :style="TextStyle({ color: 'white', fontSize: '12px' })"
        /></Container>
        <Container :width="30" :height="30" color="green" alignment="center"
          ><Text data="2" :style="TextStyle({ color: 'white', fontSize: '12px' })"
        /></Container>
        <Container :width="30" :height="30" color="blue" alignment="center"
          ><Text data="3" :style="TextStyle({ color: 'white', fontSize: '12px' })"
        /></Container>
      </Column>
    </Container>

    <Container :width="100" :height="200" color="#f0f0f0" :padding="EdgeInsets.all(10)">
      <Text
        data="MainAxisAlignment.center"
        :style="TextStyle({ marginBottom: '10px', fontSize: '12px' })"
      />
      <Column mainAxisAlignment="center" :height="150">
        <Container :width="30" :height="30" color="red" alignment="center"
          ><Text data="1" :style="TextStyle({ color: 'white', fontSize: '12px' })"
        /></Container>
        <Container :width="30" :height="30" color="green" alignment="center"
          ><Text data="2" :style="TextStyle({ color: 'white', fontSize: '12px' })"
        /></Container>
        <Container :width="30" :height="30" color="blue" alignment="center"
          ><Text data="3" :style="TextStyle({ color: 'white', fontSize: '12px' })"
        /></Container>
      </Column>
    </Container>

    <Container :width="100" :height="200" color="#f0f0f0" :padding="EdgeInsets.all(10)">
      <Text
        data="MainAxisAlignment.end"
        :style="TextStyle({ marginBottom: '10px', fontSize: '12px' })"
      />
      <Column mainAxisAlignment="end" :height="150">
        <Container :width="30" :height="30" color="red" alignment="center"
          ><Text data="1" :style="TextStyle({ color: 'white', fontSize: '12px' })"
        /></Container>
        <Container :width="30" :height="30" color="green" alignment="center"
          ><Text data="2" :style="TextStyle({ color: 'white', fontSize: '12px' })"
        /></Container>
        <Container :width="30" :height="30" color="blue" alignment="center"
          ><Text data="3" :style="TextStyle({ color: 'white', fontSize: '12px' })"
        /></Container>
      </Column>
    </Container>
  </Row>
</template>

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

Fixed Size Children

Scroll the page to see the Fixed element

Fixed Badge

<template>
  <Container :width="300" :height="100" color="#eee">
    <Center>
      <Text data="Scroll the page to see the Fixed element" />
    </Center>
    <!-- Fixed element is relative to viewport -->
    <Fixed :bottom="20" :right="20" :zIndex="1000">
      <Container
        :padding="EdgeInsets.all(10)"
        :decoration="BoxDecoration({ borderRadius: BorderRadius.all(20), color: 'black' })"
      >
        <Text data="Fixed Badge" :style="TextStyle({ color: 'white' })" />
      </Container>
    </Fixed>
  </Container>
</template>

<script setup lang="ts">
import {
  Container,
  Center,
  Fixed,
  Text,
  BoxDecoration,
  BorderRadius,
  EdgeInsets,
  TextStyle,
} from "fluekit";
</script>

Wrap

A widget that displays its children in multiple horizontal or vertical runs.

1

2

3

4

5

6

7

8

<template>
  <Container color="#f9f9f9" :padding="EdgeInsets.all(10)" :width="300">
    <Wrap :spacing="10" :runSpacing="10">
      <Container v-for="i in 8" :key="i" :width="60" :height="40" color="teal" alignment="center">
        <Text :data="i" :style="TextStyle({ color: 'white' })" />
      </Container>
    </Wrap>
  </Container>
</template>

<script setup lang="ts">
import { Container, Wrap, Text, TextStyle, EdgeInsets } from "fluekit";
</script>

API

Row

Props

Name	Type	Default	Description
mainAxisAlignment	MainAxisAlignment	'start'	How the children should be placed along the main axis.
crossAxisAlignment	CrossAxisAlignment	'center'	How the children should be placed along the cross axis.
wrap	boolean	false	Whether the children should wrap.
gap	number | string	-	The gap between children.
expanded	boolean	false	Whether to expand to fill the available space.

Slots

Name	Description
default	The children widgets.

Column

Props

Name	Type	Default	Description
mainAxisAlignment	MainAxisAlignment	'start'	How the children should be placed along the main axis.
crossAxisAlignment	CrossAxisAlignment	'center'	How the children should be placed along the cross axis.
wrap	boolean	false	Whether the children should wrap.
gap	number | string	-	The gap between children.
expanded	boolean	false	Whether to expand to fill the available space.

Slots

Name	Description
default	The children widgets.

Align

Props

Name	Type	Default	Description
alignment	FlexAlignment	'center'	How to align the child.
widthFactor	number	-	If non-null, sets its width to the child's width multiplied by this factor.
heightFactor	number	-	If non-null, sets its height to the child's height multiplied by this factor.

Slots

Name	Description
default	The child widget.

Center

Props

Name	Type	Default	Description
widthFactor	number	-	If non-null, sets its width to the child's width multiplied by this factor.
heightFactor	number	-	If non-null, sets its height to the child's height multiplied by this factor.

Slots

Name	Description
default	The child widget.

Fixed

Props

Name	Type	Default	Description
top	number | string	-	Distance from the top.
bottom	number | string	-	Distance from the bottom.
left	number | string	-	Distance from the left.
right	number | string	-	Distance from the right.
width	number | string	-	Width of the widget.
height	number | string	-	Height of the widget.
zIndex	number | string	100	The z-index of the widget.

Slots

Name	Description
default	The child widget.

Wrap

Props

Name	Type	Default	Description
direction	'horizontal' | 'vertical'	'horizontal'	The direction to use as the main axis.
alignment	'start' | 'end' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly'	'start'	How the children within a run should be placed in the main axis.
spacing	number | string	0	How much space to place between children in a run in the main axis.
runAlignment	'start' | 'end' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly'	'start'	How the runs themselves should be placed in the cross axis.
runSpacing	number | string	0	How much space to place between the runs in the cross axis.
crossAxisAlignment	'start' | 'end' | 'center'	'start'	How the children within a run should be aligned relative to each other in the cross axis.
verticalDirection	'down' | 'up'	'down'	The direction to use as the cross axis.
clipBehavior	'none' | 'hardEdge' | 'antiAlias'	'none'	The content will be clipped (or not) according to this option.

Slots

Name	Description
default	The children widgets.