List

A bulleted or numbered list.

It implements the <ul> or <ol> element.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/List.css';

Props

ordered

TypeBoolean (optional)
Defaultfalse

If false, a <ul> element is used to display a bulleted list. Otherwise, a <ol> element is used to display a numbered list

...props

Type…* (optional)

Additional props for the container; either a <ul> or <ol> element.

Examples

Deep import.
import List from 'device-agnostic-ui/public/components/List.js';
Deep require.
const List = require('device-agnostic-ui/public/components/List');
Index import. Convenient, but technically inferior to a deep import.
import { List } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { List } = require('device-agnostic-ui');
Bulleted list.
import { List } from 'device-agnostic-ui';

const result = (
  <List>
    <li>Eat healthy</li>
    <li>Sleep well</li>
    <li>Exercise regularly</li>
  </List>
);
  • Eat healthy
  • Sleep well
  • Exercise regularly
Nested paragraphs and bulleted lists.
import { List, Para } from 'device-agnostic-ui';

const result = (
  <List>
    <li>Lorum ipsum.</li>
    <li>
      <Para>Lorum ipsum.</Para>
      <List>
        <li>Lorum ipsum.</li>
        <li>
          <Para>Lorum ipsum.</Para>
          <List>
            <li>Lorum ipsum.</li>
            <li>Lorum ipsum.</li>
          </List>
        </li>
      </List>
    </li>
  </List>
);
  • Lorum ipsum.
  • Lorum ipsum.

    • Lorum ipsum.
    • Lorum ipsum.

      • Lorum ipsum.
      • Lorum ipsum.
Numbered list.
import { List } from 'device-agnostic-ui';

const result = (
  <List ordered>
    <li>Pichu</li>
    <li>Pikachu</li>
    <li>Raichu</li>
  </List>
);
  1. Pichu
  2. Pikachu
  3. Raichu
Nested paragraphs and ordered lists.
import { List, Para } from 'device-agnostic-ui';

const result = (
  <List ordered>
    <li>Lorum ipsum.</li>
    <li>
      <Para>Lorum ipsum.</Para>
      <List ordered>
        <li>Lorum ipsum.</li>
        <li>
          <Para>Lorum ipsum.</Para>
          <List ordered>
            <li>Lorum ipsum.</li>
            <li>Lorum ipsum.</li>
          </List>
        </li>
      </List>
    </li>
  </List>
);
  1. Lorum ipsum.
  2. Lorum ipsum.

    1. Lorum ipsum.
    2. Lorum ipsum.

      1. Lorum ipsum.
      2. Lorum ipsum.

Tags