import {Row} from "@qinetik/anique/row";
import {Button} from "@qinetik/anique/button";
export default function RowSameSizedExample() {
return (
<Row gap={"1em"}>
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
<Button>Fourth</Button>
<Button>Fifth</Button>
</Row>
)
}
Row
Equal Sized Items
Different Sized Items
import {Row} from "@qinetik/anique/row";
import {Button} from "@qinetik/anique/button";
export default function RowDiffSizedExample() {
return (
<Row 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>
</Row>
)
}
Wrap
import {Row} from "@qinetik/anique/row";
import {Button} from "@qinetik/anique/button";
export default function RowWrapSizedExample() {
return (
<Row style={{ width : "320px" }} gap={"0.2em"} wrap>
<Button>Item #1</Button>
<Button>Item #2</Button>
<Button>Item #3</Button>
<Button>Item #4</Button>
<Button>Item #5</Button>
</Row>
)
}