SGUI / Development
Disclosure
Expandable regions with controlled state and optional child unmounting.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Expandable regions with controlled state and optional child unmounting.
Loading examples…
Loading examples…
Loading examples…
No prior experience is required.
Expandable regions with controlled state and optional child unmounting.
No prior experience is required.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Disclosure, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function DisclosurePlaygroundExample() {
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">
<Disclosure label={"Course prerequisites"} disabled={false} unmountOnCollapse={false} expanded={open} onExpandedChange={setOpen}><Typography>No prior experience is required.</Typography><Button>View preparation guide</Button></Disclosure>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
No prior experience is required.
No prior experience is required.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Disclosure, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function DisclosurePlaygroundDensitiesExample() {
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 (
<>
<Stack gap={3}>
<ThemeScope density="compact"><Disclosure label={"Course prerequisites"} disabled={false} unmountOnCollapse={false} expanded={open} onExpandedChange={setOpen}><Typography>No prior experience is required.</Typography><Button>View preparation guide</Button></Disclosure></ThemeScope>
<ThemeScope density="comfortable"><Disclosure label={"Course prerequisites"} disabled={false} unmountOnCollapse={false} expanded={open} onExpandedChange={setOpen}><Typography>No prior experience is required.</Typography><Button>View preparation guide</Button></Disclosure></ThemeScope>
</Stack>
</>
);
}