SGUI / Development
TextStyleMenuControl
Case conversion and checked formatting state with explicit host callbacks.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Case conversion and checked formatting state with explicit host callbacks.
Loading examples…
Loading examples…
Loading examples…
Style this host-controlled sentence.
Case conversion and checked formatting state with explicit host callbacks.
Style this host-controlled sentence.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextStyleMenuControl, type TextStyleId } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextStyleMenuControlExample() {
const [text,setText] = useState("Style this host-controlled sentence.");
const [activeStyles,setActiveStyles] = useState<TextStyleId[]>([]);
const toggleStyle = (style:TextStyleId) => setActiveStyles(items=>items.includes(style)?items.filter(item=>item!==style):[...items,style]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextStyleMenuControl disabled={false} activeStyles={activeStyles} onLowercase={()=>setText(s=>s.toLowerCase())} onUppercase={()=>setText(s=>s.toUpperCase())} onCapitalize={()=>setText(s=>s.replace(/\b\w/g,c=>c.toUpperCase()))} onStrikethrough={()=>toggleStyle('strikethrough')} onSubscript={()=>toggleStyle('subscript')} onSuperscript={()=>toggleStyle('superscript')} onHighlight={()=>toggleStyle('highlight')} onClearFormatting={()=>{setActiveStyles([]);setText("Building a thoughtful learning experience");}}/><Typography style={{textDecoration:activeStyles.includes('strikethrough')?'line-through':undefined}}>{text}</Typography></Stack>
</ThemeScope>
</>
);
}
Case conversion and checked formatting state with explicit host callbacks.
Style this host-controlled sentence.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextStyleMenuControl, type TextStyleId } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextStyleMenuControlExample() {
const [text,setText] = useState("Style this host-controlled sentence.");
const [activeStyles,setActiveStyles] = useState<TextStyleId[]>([]);
const toggleStyle = (style:TextStyleId) => setActiveStyles(items=>items.includes(style)?items.filter(item=>item!==style):[...items,style]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextStyleMenuControl disabled={false} activeStyles={activeStyles} onLowercase={()=>setText(s=>s.toLowerCase())} onUppercase={()=>setText(s=>s.toUpperCase())} onCapitalize={()=>setText(s=>s.replace(/\b\w/g,c=>c.toUpperCase()))} onStrikethrough={()=>toggleStyle('strikethrough')} onSubscript={()=>toggleStyle('subscript')} onSuperscript={()=>toggleStyle('superscript')} onHighlight={()=>toggleStyle('highlight')} onClearFormatting={()=>{setActiveStyles([]);setText("Building a thoughtful learning experience");}}/><Typography style={{textDecoration:activeStyles.includes('strikethrough')?'line-through':undefined}}>{text}</Typography></Stack>
</ThemeScope>
</>
);
}
Case conversion and checked formatting state with explicit host callbacks.
Style this host-controlled sentence.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextStyleMenuControl, type TextStyleId } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextStyleMenuControlExample() {
const [text,setText] = useState("Style this host-controlled sentence.");
const [activeStyles,setActiveStyles] = useState<TextStyleId[]>([]);
const toggleStyle = (style:TextStyleId) => setActiveStyles(items=>items.includes(style)?items.filter(item=>item!==style):[...items,style]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextStyleMenuControl disabled={false} activeStyles={activeStyles} onLowercase={()=>setText(s=>s.toLowerCase())} onUppercase={()=>setText(s=>s.toUpperCase())} onCapitalize={()=>setText(s=>s.replace(/\b\w/g,c=>c.toUpperCase()))} onClearFormatting={()=>{setActiveStyles([]);setText("Building a thoughtful learning experience");}}/><Typography style={{textDecoration:activeStyles.includes('strikethrough')?'line-through':undefined}}>{text}</Typography></Stack>
</ThemeScope>
</>
);
}
Case conversion and checked formatting state with explicit host callbacks.
Style this host-controlled sentence.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextStyleMenuControl, type TextStyleId } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextStyleMenuControlExample() {
const [text,setText] = useState("Style this host-controlled sentence.");
const [activeStyles,setActiveStyles] = useState<TextStyleId[]>([]);
const toggleStyle = (style:TextStyleId) => setActiveStyles(items=>items.includes(style)?items.filter(item=>item!==style):[...items,style]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextStyleMenuControl disabled={true} activeStyles={activeStyles} onLowercase={()=>setText(s=>s.toLowerCase())} onUppercase={()=>setText(s=>s.toUpperCase())} onCapitalize={()=>setText(s=>s.replace(/\b\w/g,c=>c.toUpperCase()))} onStrikethrough={()=>toggleStyle('strikethrough')} onSubscript={()=>toggleStyle('subscript')} onSuperscript={()=>toggleStyle('superscript')} onHighlight={()=>toggleStyle('highlight')} onClearFormatting={()=>{setActiveStyles([]);setText("Building a thoughtful learning experience");}}/><Typography style={{textDecoration:activeStyles.includes('strikethrough')?'line-through':undefined}}>{text}</Typography></Stack>
</ThemeScope>
</>
);
}