Container

A convenience widget that combines common painting, positioning, and sizing widgets.

Basic Usage

Box

<template>
  <Container :width="100" :height="100" color="blue" :margin="EdgeInsets.only({ bottom: 10 })">
    <Text data="Box" :style="TextStyle({ color: 'white' })" />
  </Container>
</template>

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

Alignment

Control how the child is aligned within the container.

<template>
  <Container
    :width="150"
    :height="100"
    color="grey"
    alignment="center"
    :margin="EdgeInsets.only({ bottom: 10 })"
  >
    <Container :width="50" :height="50" color="red" />
  </Container>
</template>

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

Decoration

Add background color, border, border radius, and box shadow.

Decorated

<template>
  <Container :width="120" :height="120" :decoration="decoration" alignment="center">
    <Text data="Decorated" />
  </Container>
</template>

<script setup lang="ts">
import { Container, Text, BoxDecoration, BorderRadius, Border, BoxShadow } from "fluekit";

const decoration = BoxDecoration({
  color: "white",
  borderRadius: BorderRadius.all(20),
  border: Border.all({ color: "purple", width: 4 }),
  boxShadow: [
    BoxShadow({
      color: "rgba(0,0,0,0.5)",
      blurRadius: 10,
      spreadRadius: 5,
      offset: { x: 5, y: 5 },
    }),
  ],
});
</script>

Decoration Image

Add a background image to the container.

Cover

Contain

Align TopLeft

Repeat

Gradient Img

<template>
  <Row wrap gap="10">
    <!-- Cover -->
    <Column>
      <Text>Cover</Text>
      <Container :width="100" :height="100" :decoration="coverDecoration" />
    </Column>

    <!-- Contain -->
    <Column>
      <Text>Contain</Text>
      <Container :width="100" :height="100" :decoration="containDecoration" />
    </Column>

    <!-- Alignment TopLeft -->
    <Column>
      <Text>Align TopLeft</Text>
      <Container :width="100" :height="100" :decoration="alignTopLeftDecoration" />
    </Column>

    <!-- Repeat -->
    <Column>
      <Text>Repeat</Text>
      <Container :width="100" :height="100" :decoration="repeatDecoration" />
    </Column>

    <!-- Gradient as Image -->
    <Column>
      <Text>Gradient Img</Text>
      <Container :width="100" :height="100" :decoration="gradientImageDecoration" />
    </Column>
  </Row>
</template>

<script setup lang="ts">
import {
  Container,
  NetworkImage,
  BoxFit,
  BoxAlignment,
  Row,
  Column,
  Text,
  BorderRadius,
  BoxDecoration,
} from "fluekit";

const coverDecoration = BoxDecoration({
  color: "#eee",
  borderRadius: BorderRadius.all(10),
  image: {
    image: NetworkImage("https://picsum.photos/200/300"),
    fit: BoxFit.cover,
  },
});

const containDecoration = BoxDecoration({
  color: "#eee",
  borderRadius: BorderRadius.all(10),
  image: {
    image: NetworkImage("https://picsum.photos/200/300"),
    fit: BoxFit.contain,
  },
});

const alignTopLeftDecoration = BoxDecoration({
  color: "#eee",
  borderRadius: BorderRadius.all(10),
  image: {
    image: NetworkImage("https://picsum.photos/50/50"),
    fit: BoxFit.none,
    alignment: BoxAlignment.topLeft,
  },
});

const repeatDecoration = BoxDecoration({
  color: "#eee",
  borderRadius: BorderRadius.all(10),
  image: {
    image: NetworkImage("https://picsum.photos/20/20"),
    repeat: "repeat",
  },
});

const gradientImageDecoration = BoxDecoration({
  color: "#eee",
  borderRadius: BorderRadius.all(10),
  image: {
    image: "linear-gradient(to right, red, blue)",
    fit: BoxFit.cover,
  },
});
</script>

Gradient

Use linear or radial gradients.

Gradient

<template>
  <Container :width="120" :height="120" :decoration="gradientDecoration" alignment="center">
    <Text data="Gradient" :style="whiteTextStyle" />
  </Container>
</template>

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

const gradientDecoration = BoxDecoration({
  gradient: "linear-gradient(45deg, blue, red)",
  borderRadius: BorderRadius.all(10),
});

const whiteTextStyle = TextStyle({ color: "white" });
</script>

Transform

Apply transformations like rotation, scaling, and translation.

Rotated

<template>
  <Container
    :width="100"
    :height="100"
    color="orange"
    :transform="Matrix4.rotationZ(0.26)"
    transformAlignment="center"
    alignment="center"
    :margin="EdgeInsets.all(20)"
  >
    <Text data="Rotated" />
  </Container>
</template>

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

Foreground Decoration

Draw a decoration in front of the child.

Content

<template>
  <Container
    :width="120"
    :height="120"
    :foregroundDecoration="foregroundDecoration"
    alignment="center"
    :decoration="backgroundDecoration"
  >
    <Text data="Content" :style="largeWhiteTextStyle" />
  </Container>
</template>

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

const foregroundDecoration = BoxDecoration({
  border: Border.all({ color: "rgba(255,255,255,1)", width: 5 }),
  borderRadius: BorderRadius.all(10), // Circle overlay
  color: "green",
  opacity: 0.7,
});

const backgroundDecoration = BoxDecoration({
  color: "black",
  borderRadius: BorderRadius.all(3),
});

const largeWhiteTextStyle = TextStyle({ color: "white", fontSize: 32 });
</script>

API

Props

Name	Type	Default	Description
width	number | string	-	The width of the container.
height	number | string	-	The height of the container.
padding	EdgeInsets	-	Empty space to inscribe inside the decoration.
margin	EdgeInsets	-	Empty space to surround the decoration and child.
decoration	BoxDecoration	-	The decoration to paint behind the child.
foregroundDecoration	BoxDecoration	-	The decoration to paint in front of the child.
color	string	-	The color to paint behind the child.
alignment	Alignment | string	-	Align the child within the container.
clipBehavior	'none' | 'hardEdge' | 'antiAlias'	'none'	The clip behavior when decoration is not null.
transform	Matrix4	-	The transformation matrix to apply before painting the container.
transformAlignment	Alignment | string	-	The alignment of the origin of the coordinate system.
constraints	BoxConstraints	-	Additional constraints to apply to the child.

Slots

Name	Description
default	The child widget.