Expanded & SizedBox

Expanded

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

Expanded Flex:1

Expanded Flex:2

<template>
  <Container color="#e0e0e0" :height="60" :padding="EdgeInsets.all(5)">
    <Row>
      <Container :width="50" color="red" />
      <Expanded :flex="1">
        <Container color="green" alignment="center">
          <Text data="Expanded Flex:1" :style="TextStyle({ color: 'white', fontSize: 12 })" />
        </Container>
      </Expanded>
      <Expanded :flex="2">
        <Container color="blue" alignment="center">
          <Text data="Expanded Flex:2" :style="TextStyle({ color: 'white', fontSize: 12 })" />
        </Container>
      </Expanded>
    </Row>
  </Container>
</template>

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

SizedBox & Padding

SizedBox is a box with a specified size. Padding insets its child by the given padding.

Padding

SizedBox

<template>
  <Row>
    <Container color="orange">
      <Padding :all="10">
        <Text data="Padding" :style="TextStyle({ color: 'white' })" />
      </Padding>
    </Container>

    <SizedBox :width="20" />
    <!-- Spacer -->

    <Container color="purple">
      <SizedBox :width="80" :height="40">
        <Center>
          <Text data="SizedBox" :style="TextStyle({ color: 'white' })" />
        </Center>
      </SizedBox>
    </Container>
  </Row>
</template>

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

API

Expanded

Props

Name	Type	Default	Description
flex	number	1	The flex factor to use for this child.
alignSelf	'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline'	'auto'	How this child should be aligned along the cross axis.
minSize	number | string	-	Minimum size of the widget.
maxSize	number | string	-	Maximum size of the widget.

Slots

Name	Description
default	The child widget.

SizedBox

Props

Name	Type	Default	Description
width	number | string	-	Width of the widget.
height	number | string	-	Height of the widget.

Slots

Name	Description
default	The child widget.

Padding

Props

Name	Type	Default	Description
all	number | string	-	Padding for all sides.
horizontal	number | string	-	Padding for left and right.
vertical	number | string	-	Padding for top and bottom.
top	number | string	-	Padding for top.
bottom	number | string	-	Padding for bottom.
left	number | string	-	Padding for left.
right	number | string	-	Padding for right.

Slots

Name	Description
default	The child widget.