SGUI / Development
InsertContentMenuControl
Insertion commands request host-owned changes rather than saving content themselves.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Insertion commands request host-owned changes rather than saving content themselves.
Loading examples…
Loading examples…
Loading examples…
Building a thoughtful learning experience
Ready
Insertion commands request host-owned changes rather than saving content themselves.
Building a thoughtful learning experience
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { InsertContentMenuControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function InsertContentMenuControlExample() {
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><InsertContentMenuControl disabled={false} onInsertHorizontalRule={()=>setStatus('Horizontal rule insertion requested')} onInsertImage={()=>setStatus('Image insertion requested')} onInsertColumnsLayout={()=>setStatus('Columns insertion requested')}/><Typography>{"Building a thoughtful learning experience"}</Typography><Typography role="status">{status}</Typography></Stack>
</ThemeScope>
</>
);
}
Insertion commands request host-owned changes rather than saving content themselves.
Building a thoughtful learning experience
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { InsertContentMenuControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function InsertContentMenuControlExample() {
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><InsertContentMenuControl disabled={false} onInsertHorizontalRule={()=>setStatus('Horizontal rule insertion requested')} onInsertImage={()=>setStatus('Image insertion requested')} onInsertColumnsLayout={()=>setStatus('Columns insertion requested')}/><Typography>{"Building a thoughtful learning experience"}</Typography><Typography role="status">{status}</Typography></Stack>
</ThemeScope>
</>
);
}
Insertion commands request host-owned changes rather than saving content themselves.
Building a thoughtful learning experience
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { InsertContentMenuControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function InsertContentMenuControlExample() {
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><InsertContentMenuControl disabled={false} onInsertHorizontalRule={()=>setStatus('Horizontal rule insertion requested')} /><Typography>{"Building a thoughtful learning experience"}</Typography><Typography role="status">{status}</Typography></Stack>
</ThemeScope>
</>
);
}
Insertion commands request host-owned changes rather than saving content themselves.
Building a thoughtful learning experience
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { InsertContentMenuControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function InsertContentMenuControlExample() {
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><InsertContentMenuControl disabled={true} onInsertHorizontalRule={()=>setStatus('Horizontal rule insertion requested')} onInsertImage={()=>setStatus('Image insertion requested')} onInsertColumnsLayout={()=>setStatus('Columns insertion requested')}/><Typography>{"Building a thoughtful learning experience"}</Typography><Typography role="status">{status}</Typography></Stack>
</ThemeScope>
</>
);
}