Ui.Container

This component displays its children in a only one axis grid (in a line).

Interactive Demo

You can play around with a Ui.Container below using the controls:

Orientation
horizontal
Justify
stretch
Align
center
Gap (20px)
<Ui.Container
orientation="horizontal"
gap={Ui.Size.Px(20)}
justify="stretch"
align="center">
<div style="background: gray;min-width: 100px;min-height: 100px;"/>
<div style="background: gray;min-width: 50px;min-height: 50px;"/>
<div style="background: gray;min-width: 25px;min-height: 25px;"/>
</Ui.Container>
Gap

The space betweem the items can be controlled usign the gap property.

<>
<Ui.Container gap={Ui.Size.Px(10)}>
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
<Ui.Container gap={Ui.Size.Px(30)}>
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
<Ui.Container gap={Ui.Size.Px(60)}>
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
</>
Orientation

The orirentation of the items can be controlled usign the orientation property.

<>
<Ui.Container orientation="horizontal">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
<Ui.Container orientation="vertical">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
</>
Align

The the alignment of the items can be controlled usign the align property.

<>
<Ui.Container align="start">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
<Ui.Container align="center">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
<Ui.Container align="end">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
</>
Justify

The the justification of the items can be controlled usign the justify property.

<>
<Ui.Container justify="start">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
<Ui.Container justify="center">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
<Ui.Container justify="end">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Container>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.