Skip to content
Home

ListFormat

Info
Demos
Properties

Import

import { ListFormat } from '@dnb/eufemia'

Description

A ready-to-use list formatter. Use it wherever you have to display a list of strings, numbers, or elements.

Good reasons for why we have this is to:

  • uniform the creation and formatting of lists.
  • Any other good reasons?

Demos

Value

Foo, Bar og Baz
Code Editor
<ListFormat value={['Foo', 'Bar', 'Baz']} />

Custom format

123, 456 or 789
Code Editor
<Provider
  locale="en-GB"
  data={{
    myPath: [123, 456, 789],
  }}
>
  <ListFormat
    value={[123, 456, 789]}
    format={{
      type: 'disjunction',
    }}
  />
</Provider>

Inline

This is before the component Foo, Bar og Baz This is after the component

Code Editor
<P>
  This is before the component <ListFormat value={['Foo', 'Bar', 'Baz']} />{' '}
  This is after the component
</P>

List variants

Ordered List:

  1. Foo
  2. Bar
  3. Baz

Unordered List:

  • Foo
  • Bar
  • Baz
Code Editor
<P>Ordered List:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" />
<P>Unordered List:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ul" />

List types

Ordered List a:

  1. Foo
  2. Bar
  3. Baz

Ordered List A:

  1. Foo
  2. Bar
  3. Baz

Ordered List i:

  1. Foo
  2. Bar
  3. Baz

Ordered List I:

  1. Foo
  2. Bar
  3. Baz

Unordered List square:

  • Foo
  • Bar
  • Baz

Unordered List circle:

  • Foo
  • Bar
  • Baz
Code Editor
<P>Ordered List a:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="a" />
<P>Ordered List A:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="A" />
<P>Ordered List i:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="i" />
<P>Ordered List I:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="I" />
<P>Unordered List square:</P>
<ListFormat
  value={['Foo', 'Bar', 'Baz']}
  variant="ul"
  listType="square"
/>
<P>Unordered List circle:</P>
<ListFormat
  value={['Foo', 'Bar', 'Baz']}
  variant="ul"
  listType="circle"
/>