SGUI / Development
ColumnsLayoutModal
A fresh layout draft on opening with a host-owned insertion result.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
A fresh layout draft on opening with a host-owned insertion result.
Loading examples…
Loading examples…
Loading examples…
Inserted preset: twoEqual
Building a thoughtful learning experience
A fresh layout draft on opening with a host-owned insertion result.
Inserted preset: twoEqual
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ColumnsLayoutModal, type ColumnsLayoutPreset } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ColumnsLayoutModalExample() {
const [open,setOpen] = useState(false);
const [preset,setPreset] = useState<ColumnsLayoutPreset>("twoEqual");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Choose columns</Button><Typography role="status">Inserted preset: {preset}</Typography><Typography>{"Building a thoughtful learning experience"}</Typography><ColumnsLayoutModal open={open} defaultPreset={"twoEqual"} onClose={()=>setOpen(false)} onSubmit={next=>{setPreset(next);setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
A fresh layout draft on opening with a host-owned insertion result.
Inserted preset: twoEqual
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ColumnsLayoutModal, type ColumnsLayoutPreset } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ColumnsLayoutModalExample() {
const [open,setOpen] = useState(false);
const [preset,setPreset] = useState<ColumnsLayoutPreset>("twoEqual");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Choose columns</Button><Typography role="status">Inserted preset: {preset}</Typography><Typography>{"Building a thoughtful learning experience"}</Typography><ColumnsLayoutModal open={open} defaultPreset={"twoEqual"} onClose={()=>setOpen(false)} onSubmit={next=>{setPreset(next);setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
A fresh layout draft on opening with a host-owned insertion result.
Inserted preset: twoEqual
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ColumnsLayoutModal, type ColumnsLayoutPreset } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ColumnsLayoutModalExample() {
const [open,setOpen] = useState(false);
const [preset,setPreset] = useState<ColumnsLayoutPreset>("twoEqual");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Choose columns</Button><Typography role="status">Inserted preset: {preset}</Typography><Typography>{"Building a thoughtful learning experience"}</Typography><ColumnsLayoutModal open={open} defaultPreset={"two2575"} onClose={()=>setOpen(false)} onSubmit={next=>{setPreset(next);setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
A fresh layout draft on opening with a host-owned insertion result.
Inserted preset: twoEqual
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ColumnsLayoutModal, type ColumnsLayoutPreset } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ColumnsLayoutModalExample() {
const [open,setOpen] = useState(false);
const [preset,setPreset] = useState<ColumnsLayoutPreset>("twoEqual");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Choose columns</Button><Typography role="status">Inserted preset: {preset}</Typography><Typography>{"Building a thoughtful learning experience"}</Typography><ColumnsLayoutModal open={open} defaultPreset={"threeEqual"} onClose={()=>setOpen(false)} onSubmit={next=>{setPreset(next);setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
A fresh layout draft on opening with a host-owned insertion result.
Inserted preset: twoEqual
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ColumnsLayoutModal, type ColumnsLayoutPreset } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ColumnsLayoutModalExample() {
const [open,setOpen] = useState(false);
const [preset,setPreset] = useState<ColumnsLayoutPreset>("twoEqual");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Choose columns</Button><Typography role="status">Inserted preset: {preset}</Typography><Typography>{"Building a thoughtful learning experience"}</Typography><ColumnsLayoutModal open={open} defaultPreset={"three255025"} onClose={()=>setOpen(false)} onSubmit={next=>{setPreset(next);setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
A fresh layout draft on opening with a host-owned insertion result.
Inserted preset: twoEqual
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ColumnsLayoutModal, type ColumnsLayoutPreset } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ColumnsLayoutModalExample() {
const [open,setOpen] = useState(false);
const [preset,setPreset] = useState<ColumnsLayoutPreset>("twoEqual");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Choose columns</Button><Typography role="status">Inserted preset: {preset}</Typography><Typography>{"Building a thoughtful learning experience"}</Typography><ColumnsLayoutModal open={open} defaultPreset={"fourEqual"} onClose={()=>setOpen(false)} onSubmit={next=>{setPreset(next);setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
A fresh layout draft on opening with a host-owned insertion result.
Inserted preset: twoEqual
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ColumnsLayoutModal, type ColumnsLayoutPreset } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ColumnsLayoutModalExample() {
const [open,setOpen] = useState(false);
const [preset,setPreset] = useState<ColumnsLayoutPreset>("twoEqual");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><Button disabled={false} onPress={()=>setOpen(true)}>Choose columns</Button><Typography role="status">Inserted preset: {preset}</Typography><Typography>{"Building a thoughtful learning experience"}</Typography><ColumnsLayoutModal open={open} defaultPreset={"twoEqual"} onClose={()=>setOpen(false)} onSubmit={next=>{setPreset(next);setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}