import {Column} from "@qinetik/anique/column";
import {Button} from "@qinetik/anique/button";
export default function ColSameSizedExample(){
return (
<Column gap={"1em"}>
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
<Button>Fourth</Button>
<Button>Fifth</Button>
</Column>
)
}
Column
Same sized items
Different sized items
import {Column} from "@qinetik/anique/column";
import {Button} from "@qinetik/anique/button";
export default function ColDiffSizedExample(){
return (
<Column gap={"1em"}>
<Button size={0}>First</Button>
<Button size={1}>Second</Button>
<Button size={2}>Third</Button>
<Button size={3}>Fourth</Button>
<Button size={4}>Fifth</Button>
</Column>
)
}
Wrap
import {Column} from "@qinetik/anique/column";
import {Button} from "@qinetik/anique/button";
export default function ColWrapExample() {
return (
<Column style={{height: "160px"}} gap={"0.5em 0.75em"} wrap>
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
<Button>Fourth</Button>
<Button>Fifth</Button>
</Column>
)
}