SGUI / Development
TextAlignMenuControl
Physical and logical alignment with host-controlled indent bounds.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Physical and logical alignment with host-controlled indent bounds.
Loading examples…
Loading examples…
Loading examples…
Building a thoughtful learning experience
Physical and logical alignment with host-controlled indent bounds.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextAlignMenuControl, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextAlignMenuControlExample() {
const [alignment,setAlignment] = useState<AlignOption>("left");
const [indent,setIndent] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextAlignMenuControl value={alignment} onChange={setAlignment} disabled={false} canIndent={indent<3} canOutdent={indent>0} onIndent={()=>setIndent(n=>Math.min(3,n+1))} onOutdent={()=>setIndent(n=>Math.max(0,n-1))}/><Typography style={{textAlign:alignment,marginInlineStart:indent*16}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Physical and logical alignment with host-controlled indent bounds.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextAlignMenuControl, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextAlignMenuControlExample() {
const [alignment,setAlignment] = useState<AlignOption>("left");
const [indent,setIndent] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextAlignMenuControl value={alignment} onChange={setAlignment} disabled={false} canIndent={indent<3} canOutdent={indent>0} onIndent={()=>setIndent(n=>Math.min(3,n+1))} onOutdent={()=>setIndent(n=>Math.max(0,n-1))}/><Typography style={{textAlign:alignment,marginInlineStart:indent*16}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Physical and logical alignment with host-controlled indent bounds.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextAlignMenuControl, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextAlignMenuControlExample() {
const [alignment,setAlignment] = useState<AlignOption>("center");
const [indent,setIndent] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextAlignMenuControl value={alignment} onChange={setAlignment} disabled={false} canIndent={indent<3} canOutdent={indent>0} onIndent={()=>setIndent(n=>Math.min(3,n+1))} onOutdent={()=>setIndent(n=>Math.max(0,n-1))}/><Typography style={{textAlign:alignment,marginInlineStart:indent*16}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Physical and logical alignment with host-controlled indent bounds.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextAlignMenuControl, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextAlignMenuControlExample() {
const [alignment,setAlignment] = useState<AlignOption>("right");
const [indent,setIndent] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextAlignMenuControl value={alignment} onChange={setAlignment} disabled={false} canIndent={indent<3} canOutdent={indent>0} onIndent={()=>setIndent(n=>Math.min(3,n+1))} onOutdent={()=>setIndent(n=>Math.max(0,n-1))}/><Typography style={{textAlign:alignment,marginInlineStart:indent*16}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Physical and logical alignment with host-controlled indent bounds.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextAlignMenuControl, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextAlignMenuControlExample() {
const [alignment,setAlignment] = useState<AlignOption>("justify");
const [indent,setIndent] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextAlignMenuControl value={alignment} onChange={setAlignment} disabled={false} canIndent={indent<3} canOutdent={indent>0} onIndent={()=>setIndent(n=>Math.min(3,n+1))} onOutdent={()=>setIndent(n=>Math.max(0,n-1))}/><Typography style={{textAlign:alignment,marginInlineStart:indent*16}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Physical and logical alignment with host-controlled indent bounds.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextAlignMenuControl, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextAlignMenuControlExample() {
const [alignment,setAlignment] = useState<AlignOption>("start");
const [indent,setIndent] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextAlignMenuControl value={alignment} onChange={setAlignment} disabled={false} canIndent={indent<3} canOutdent={indent>0} onIndent={()=>setIndent(n=>Math.min(3,n+1))} onOutdent={()=>setIndent(n=>Math.max(0,n-1))}/><Typography style={{textAlign:alignment,marginInlineStart:indent*16}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Physical and logical alignment with host-controlled indent bounds.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextAlignMenuControl, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextAlignMenuControlExample() {
const [alignment,setAlignment] = useState<AlignOption>("end");
const [indent,setIndent] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextAlignMenuControl value={alignment} onChange={setAlignment} disabled={false} canIndent={indent<3} canOutdent={indent>0} onIndent={()=>setIndent(n=>Math.min(3,n+1))} onOutdent={()=>setIndent(n=>Math.max(0,n-1))}/><Typography style={{textAlign:alignment,marginInlineStart:indent*16}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Physical and logical alignment with host-controlled indent bounds.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TextAlignMenuControl, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TextAlignMenuControlExample() {
const [alignment,setAlignment] = useState<AlignOption>("left");
const [indent,setIndent] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><TextAlignMenuControl value={alignment} onChange={setAlignment} disabled={true} canIndent={indent<3} canOutdent={indent>0} onIndent={()=>setIndent(n=>Math.min(3,n+1))} onOutdent={()=>setIndent(n=>Math.max(0,n-1))}/><Typography style={{textAlign:alignment,marginInlineStart:indent*16}}>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}