Layout
Box

Box

The Box component is a highly customizable container element that allows you to control various CSS properties such as background, borders, size, positioning, and more.

Examples

Basic Usage

<Widget
	src={'flashui.near/widget/Box'}
	props={{
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
		width: '500px',
		height: '250px',
		background: '#789ADD',
		children: <div style={{ color: 'White' }}>Box Content</div>,
	}}
/>

Props

The Box component accepts a wide range of props for customizing its appearance and behavior. Here are some of the key props:

  • background (string, optional): The background color or image of the box. Defaults to "transparency."

  • border (string, optional): The border style of the box. Defaults to "none."

  • borderTop, borderBottom, borderLeft, borderRight (string, optional): Individual border styles for each side of the box. Defaults to null.

  • borderRadius (string, optional): The border radius of the box. Defaults to "0."

  • margin (string, optional): The margin around the box. Defaults to "none."

  • padding (string, optional): The padding within the box. Defaults to "none."

  • height, width (string, optional): The height and width of the box. Defaults to "auto" and "fit-content," respectively.

  • maxWidth, minWidth, maxHeight, minHeight (string, optional): The maximum and minimum dimensions of the box. Defaults to "auto."

  • boxSizing (string, optional): The box-sizing property of the box. Defaults to "border-box."

  • outline, outlineOffset (string, optional): The outline style and outline offset of the box. Defaults to "none" and "0," respectively.

  • position, top, bottom, left, right (string, optional): The positioning properties of the box. Defaults to "static."

  • zIndex (string, optional): The z-index of the box. Defaults to "0."

  • overflow, overflowX, overflowY, overflowWrap (string, optional): The overflow and text wrapping properties of the box. Defaults to "visible."

  • float (string, optional): The float property of the box. Defaults to "none."

  • display (string, optional): The display property of the box. Defaults to "block."

  • flexDirection, flexWrap, flex, alignItems, justifyContent, alignContent, order, alignSelf (string, optional): Flexbox properties for the box. Defaults to various values depending on the property.

  • gap, gridTemplateColumns, gridTemplateRows, gridColumn, gridRow, gridArea, gridTemplateAreas (string, optional): Grid properties for the box. Defaults to various values depending on the property.

  • opacity (string, optional): The opacity of the box. Defaults to "1.0."

  • boxShadow (string, optional): The box shadow of the box. Defaults to "none."

OverviewContainer