Box

A convenience widget that combines common painting, positioning, and sizing widgets. It is similar to Container but allows passing decoration properties (border, borderRadius, boxShadow, etc.) directly as props, without needing a BoxDecoration object.

Usage

Box

Circle

<template>
  <Column :gap="20">
    <Box
      :width="100"
      :height="100"
      color="lightblue"
      :border-radius="BorderRadius.circular(10)"
      :box-shadow="[BoxShadow({ blurRadius: 10, color: 'rgba(0,0,0,0.1)' })]"
    >
      <Center>
        <Text data="Box" />
      </Center>
    </Box>

    <Box
      :width="100"
      :height="100"
      :border="Border.all({ color: 'blue', width: 2 })"
      shape="circle"
    >
      <Center>
        <Text data="Circle" />
      </Center>
    </Box>
  </Column>
</template>

<script setup lang="ts">
import { Box, Column, Center, Text, BorderRadius, Border, BoxShadow } from "fluekit";
</script>

API

Props

Name	Type	Default	Description
width	number | string	-	Width of the box.
height	number | string	-	Height of the box.
padding	EdgeInsets	-	Empty space to inscribe inside the box.
margin	EdgeInsets	-	Empty space to surround the box.
color	string	-	Background color.
border	Border	-	Border around the box.
borderRadius	BorderRadius	-	Border radius of the box.
boxShadow	BoxShadow[]	-	Shadows to cast behind the box.
shape	'rectangle' | 'circle'	'rectangle'	Shape of the box.
alignment	Alignment	-	Align the child within the box.
clipBehavior	Clip	'none'	The clip behavior when decoration is set.
gradient	string	-	Background gradient (CSS string).
image	DecorationImage	-	Background image.