Skip to content

Demos

GlobalStatus displaying error status

NB: Keep in mind, the items are handled automatically by all form components! This is just an example of how to define the content manually.

Custom Title

Failure text


<GlobalStatus
title="Custom Title"
text="Failure text"
items={[
{
text: 'List item',
status_anchor_url: '/uilib/components/global-status',
status_anchor_label: 'eksempel',
},
]}
show={true}
autoscroll={false}
no_animation={true}
omit_set_focus={true}
id="demo-1"
/>

GlobalStatus displaying info status

Custom info title ...

Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus

  • Status text 1

  • Status text 2


<GlobalStatus
state="info"
title="Custom info title ..."
text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
items={['Status text 1', 'Status text 2']}
show={true}
autoscroll={false}
no_animation={true}
omit_set_focus={true}
id="demo-4"
/>

To showcase the automated coupling between FormStatus and GlobalStatus

const InputWithError = () => {
const [errorMessage, setErrorMessage] = React.useState(null)
return (
<Input
label="Input:"
placeholder="Write less than 5 chars and dismiss the focus to show the GlobalStatus ..."
stretch
status={errorMessage}
on_blur={({ value }) => {
setErrorMessage(value.length <= 4 ? 'With a message shown' : null)
}}
globalStatus={{
id: 'main-status',
}}
/>
)
}
render(<InputWithError />)

GlobalStatus and update routines

To showcase the custom Update and Remove possibility

To showcase the scrolling