Skip to content
Home

ListFormat

Info
Demos
Properties

Demos

Basic usage with value

A, B, C, D, 123, Link to Eufemia's Github Repo og Text Info Text
Code Editor
<ListFormat
  value={[
    <React.Fragment key="a">A</React.Fragment>,
    <>
      <b>B</b>
    </>,
    <>C</>,
    'D',
    123,
    <Anchor
      target="_blank"
      href="https://github.com/dnbexperience/eufemia"
      rel="noopener noreferrer"
      key="github"
    >
      Link to Eufemia's Github Repo
    </Anchor>,
    <>
      Text <Badge content="Info" variant="information" /> Text
    </>,
  ]}
/>

Basic usage with children

A, B, C, D, 123, Link to Eufemia's Github Repo og Text Info Text
Code Editor
<ListFormat>
  <React.Fragment key="a">A</React.Fragment>
  <>
    <b>B</b>
  </>
  <>C</>
  <>D</>
  123
  <Anchor
    target="_blank"
    href="https://github.com/dnbexperience/eufemia"
    rel="noopener noreferrer"
    key="github"
  >
    Link to Eufemia's Github Repo
  </Anchor>
  <>
    Text <Badge content="Info" variant="information" /> Text
  </>
</ListFormat>

Custom format

A, B, C, D, 123, Link to Eufemia's Github Repo or Text Info Text
Code Editor
<Provider locale="en-GB">
  <ListFormat
    value={[
      <React.Fragment key="a">A</React.Fragment>,
      <>
        <b>B</b>
      </>,
      <>C</>,
      'D',
      123,
      <Anchor
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </Anchor>,
      <>
        Text <Badge content="Info" variant="information" /> Text
      </>,
    ]}
    format={{
      type: 'disjunction',
    }}
  />
</Provider>

Inline

This is before the component 123, Link to Eufemia's Github Repo og Text Info Text This is after the component

Code Editor
<P>
  This is before the component{' '}
  <ListFormat
    value={[
      123,
      <Anchor
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </Anchor>,
      <>
        Text <Badge content="Info" variant="information" /> Text
      </>,
    ]}
  />{' '}
  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

Unordered List unstyled:

  • 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"
/>
<P>Unordered List unstyled:</P>
<ListFormat
  value={['Foo', 'Bar', 'Baz']}
  variant="ul"
  listType="unstyled"
/>

Using listFormat function

A, B, C, D, 123, Link to Eufemia's Github Repo, or Text Info Text
Code Editor
{
  listFormat(
    [
      <React.Fragment key="a">A</React.Fragment>,
      <>
        <b>B</b>
      </>,
      <>C</>,
      'D',
      123,
      <Anchor
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </Anchor>,
      <>
        Text <Badge content="Info" variant="information" /> Text
      </>,
    ],
    {
      format: {
        type: 'disjunction',
      },
      locale: 'en-US',
    },
  )
}