GlobalStatus

Info
Demos
Properties
Events

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)

      }}

      global_status_id="main-status"

    />

  )

}

render(

  <InputWithError />

)

GlobalStatus and update routines

To showcase the custom Update and Remove possibility

To showcase the scrolling

Some browsers (Safari, Edge) will need a polyfill like smoothscroll-polyfill.