SGUI / Development
Stack
Responsive spacing, alignment and wrapping for composed content.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Responsive spacing, alignment and wrapping for composed content.
Loading examples…
Loading examples…
Loading examples…
Supporting content
Responsive spacing, alignment and wrapping for composed content.
Supporting content
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function StackPlaygroundExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<Stack direction={"row"} gap={Number("0") as 0 | 1 | 2 | 3 | 4} align={"start"} justify={"start"} wrap={true} responsive={false}><Button>First</Button><Button variant="outlined">Second action</Button><Typography>Supporting content</Typography></Stack>
</ThemeScope>
</>
);
}
Compare spacing and alignment with a fixed layout and density.
Course publishing actions
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function StackMatrixExample() {
const [clicks, setClicks] = useState(0);
return (
<>
<ThemeScope density={"compact"}>
<Stack gap={3}>
<Stack direction={"row"} gap={3} align="center" justify="between" wrap responsive={false}>
<Typography>Course publishing actions</Typography>
<Button onPress={() => setClicks(value => value + 1)}>Save draft</Button>
<Button variant="outlined" onPress={() => setClicks(value => value + 1)}>Review publishing options</Button>
</Stack>
</Stack>
</ThemeScope>
</>
);
}
Compare spacing and alignment with a fixed layout and density.
Course publishing actions
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function StackMatrixExample() {
const [clicks, setClicks] = useState(0);
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3}>
<Stack direction={"row"} gap={3} align="center" justify="between" wrap responsive={false}>
<Typography>Course publishing actions</Typography>
<Button onPress={() => setClicks(value => value + 1)}>Save draft</Button>
<Button variant="outlined" onPress={() => setClicks(value => value + 1)}>Review publishing options</Button>
</Stack>
</Stack>
</ThemeScope>
</>
);
}
Compare spacing and alignment with a fixed layout and density.
Course publishing actions
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function StackMatrixExample() {
const [clicks, setClicks] = useState(0);
return (
<>
<ThemeScope density={"compact"}>
<Stack gap={3}>
<Stack direction={"column"} gap={3} align="center" justify="between" wrap responsive={false}>
<Typography>Course publishing actions</Typography>
<Button onPress={() => setClicks(value => value + 1)}>Save draft</Button>
<Button variant="outlined" onPress={() => setClicks(value => value + 1)}>Review publishing options</Button>
</Stack>
</Stack>
</ThemeScope>
</>
);
}
Compare spacing and alignment with a fixed layout and density.
Course publishing actions
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function StackMatrixExample() {
const [clicks, setClicks] = useState(0);
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3}>
<Stack direction={"column"} gap={3} align="center" justify="between" wrap responsive={false}>
<Typography>Course publishing actions</Typography>
<Button onPress={() => setClicks(value => value + 1)}>Save draft</Button>
<Button variant="outlined" onPress={() => setClicks(value => value + 1)}>Review publishing options</Button>
</Stack>
</Stack>
</ThemeScope>
</>
);
}
This fixed row becomes a column at the owned viewport breakpoint; resize the page to compare.
Course publishing actions
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function StackMatrixExample() {
const [clicks, setClicks] = useState(0);
return (
<>
<ThemeScope density={"compact"}>
<Stack gap={3}>
<Stack direction={"row"} gap={3} align="center" justify="between" wrap responsive={true}>
<Typography>Course publishing actions</Typography>
<Button onPress={() => setClicks(value => value + 1)}>Save draft</Button>
<Button variant="outlined" onPress={() => setClicks(value => value + 1)}>Review publishing options</Button>
</Stack>
</Stack>
</ThemeScope>
</>
);
}
This fixed row becomes a column at the owned viewport breakpoint; resize the page to compare.
Course publishing actions
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function StackMatrixExample() {
const [clicks, setClicks] = useState(0);
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3}>
<Stack direction={"row"} gap={3} align="center" justify="between" wrap responsive={true}>
<Typography>Course publishing actions</Typography>
<Button onPress={() => setClicks(value => value + 1)}>Save draft</Button>
<Button variant="outlined" onPress={() => setClicks(value => value + 1)}>Review publishing options</Button>
</Stack>
</Stack>
</ThemeScope>
</>
);
}