SGUI / Development
EditableTitleField
Inline title editing with save/cancel and read-only presentation.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Inline title editing with save/cancel and read-only presentation.
Loading examples…
Loading examples…
Loading examples…
Inline title editing with save/cancel and read-only presentation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { EditableTitleField } from '@structured-growth/sg-ui/components';
export default function EditableTitleFieldExample() {
const [title,setTitle] = useState("Course introduction");
return (
<>
<ThemeScope density="comfortable">
<EditableTitleField title={title} placeholder={"Building a thoughtful learning experience"} onSave={setTitle} readOnly={false} variant={"h4"} minWidth={0} />
</ThemeScope>
</>
);
}
Inline title editing with save/cancel and read-only presentation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { EditableTitleField } from '@structured-growth/sg-ui/components';
export default function EditableTitleFieldExample() {
const [title,setTitle] = useState("Course introduction");
return (
<>
<ThemeScope density="compact">
<EditableTitleField title={title} placeholder={"Building a thoughtful learning experience"} onSave={setTitle} readOnly={false} variant={"h4"} minWidth={0} />
</ThemeScope>
</>
);
}
Inline title editing with save/cancel and read-only presentation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { EditableTitleField } from '@structured-growth/sg-ui/components';
export default function EditableTitleFieldExample() {
const [title,setTitle] = useState("Course introduction");
return (
<>
<ThemeScope density="comfortable">
<EditableTitleField title={title} placeholder={"Building a thoughtful learning experience"} onSave={setTitle} readOnly={false} variant={"h4"} minWidth={0} />
</ThemeScope>
</>
);
}
Inline title editing with save/cancel and read-only presentation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { EditableTitleField } from '@structured-growth/sg-ui/components';
export default function EditableTitleFieldExample() {
const [title,setTitle] = useState("Course introduction");
return (
<>
<ThemeScope density="compact">
<EditableTitleField title={title} placeholder={"Building a thoughtful learning experience"} onSave={setTitle} readOnly={false} variant={"h5"} minWidth={0} />
</ThemeScope>
</>
);
}
Inline title editing with save/cancel and read-only presentation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { EditableTitleField } from '@structured-growth/sg-ui/components';
export default function EditableTitleFieldExample() {
const [title,setTitle] = useState("Course introduction");
return (
<>
<ThemeScope density="comfortable">
<EditableTitleField title={title} placeholder={"Building a thoughtful learning experience"} onSave={setTitle} readOnly={false} variant={"h5"} minWidth={0} />
</ThemeScope>
</>
);
}
Inline title editing with save/cancel and read-only presentation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { EditableTitleField } from '@structured-growth/sg-ui/components';
export default function EditableTitleFieldExample() {
const [title,setTitle] = useState("Course introduction");
return (
<>
<ThemeScope density="compact">
<EditableTitleField title={title} placeholder={"Building a thoughtful learning experience"} onSave={setTitle} readOnly={false} variant={"h6"} minWidth={0} />
</ThemeScope>
</>
);
}
Inline title editing with save/cancel and read-only presentation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { EditableTitleField } from '@structured-growth/sg-ui/components';
export default function EditableTitleFieldExample() {
const [title,setTitle] = useState("Course introduction");
return (
<>
<ThemeScope density="comfortable">
<EditableTitleField title={title} placeholder={"Building a thoughtful learning experience"} onSave={setTitle} readOnly={false} variant={"h6"} minWidth={0} />
</ThemeScope>
</>
);
}
Inline title editing with save/cancel and read-only presentation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { EditableTitleField } from '@structured-growth/sg-ui/components';
export default function EditableTitleFieldExample() {
const [title,setTitle] = useState("Archived course introduction");
return (
<>
<ThemeScope density="comfortable">
<EditableTitleField title={title} placeholder={"Building a thoughtful learning experience"} onSave={setTitle} readOnly={true} variant={"h4"} minWidth={0} />
</ThemeScope>
</>
);
}