List

Lists are structured collections of text and images, presented in a vertical format, typically with individual items and potential actions associated with each.

Basic

  • Container Dangerous

  • Container Dry

  • Container Flatrack

  • Container Tank

  • Crane Container

Source Code

import { List, ListItem, ListItemText } from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

import { mockListItems } from '../../utils/List/helpers';

export function ListBasic() {
  return (
    <List>
      {mockListItems.map((item, index) => {
        return (
          <ListItem key={item.title + index}>
            <ListItemText primaryText={item.title}></ListItemText>

Sizes

  • List supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
  • Default size is lg.

  • Container Dangerous

    This following list includes such commodities as propane gas lighters, ordinary wall paint, and more.

  • Container Dry

    This type of container is for general cargo. General cargo should not be over-length or in bulk.

  • Container Flatrack

    Flat racks are best suited for stowage of heavy lift, over-height and/or over-width cargo.

  • Container Tank

    A tank container or tanktainer is an intermodal container for the transport of liquids as bulk cargo.

  • Crane Container

    Crane Container provides basic port crane products include Rail Mounted Container Gantry Crane, etc.

  • Container Dangerous

    This following list includes such commodities as propane gas lighters, ordinary wall paint, and more.

  • Container Dry

    This type of container is for general cargo. General cargo should not be over-length or in bulk.

  • Container Flatrack

    Flat racks are best suited for stowage of heavy lift, over-height and/or over-width cargo.

  • Container Tank

    A tank container or tanktainer is an intermodal container for the transport of liquids as bulk cargo.

  • Crane Container

    Crane Container provides basic port crane products include Rail Mounted Container Gantry Crane, etc.

  • Container Dangerous

    This following list includes such commodities as propane gas lighters, ordinary wall paint, and more.

  • Container Dry

    This type of container is for general cargo. General cargo should not be over-length or in bulk.

  • Container Flatrack

    Flat racks are best suited for stowage of heavy lift, over-height and/or over-width cargo.

  • Container Tank

    A tank container or tanktainer is an intermodal container for the transport of liquids as bulk cargo.

  • Crane Container

    Crane Container provides basic port crane products include Rail Mounted Container Gantry Crane, etc.

Source Code

import { List, ListItem, ListItemText } from '@ocean-network-express/magenta-ui/react';

import { mockListItems } from '../../utils/List/helpers';

export function ListSizes() {
  return (
    <div className="grid grid-cols-3 gap-6">
      {[{ size: 'sm' }, { size: 'md' }, { size: 'lg' }].map(({ size }) => (
        <List size={size as 'sm' | 'md' | 'lg'}>
          {mockListItems.map((item, index) => {
            return (
              <ListItem key={item.title + index}>
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

  • Container Dangerous

    This following list includes such commodities as propane gas lighters, ordinary wall paint, and more.

  • Container Dry

    This type of container is for general cargo. General cargo should not be over-length or in bulk.

  • Container Flatrack

    Flat racks are best suited for stowage of heavy lift, over-height and/or over-width cargo.

  • Container Tank

    A tank container or tanktainer is an intermodal container for the transport of liquids as bulk cargo.

  • Crane Container

    Crane Container provides basic port crane products include Rail Mounted Container Gantry Crane, etc.

Source Code

import { List, ListItem, ListItemText } from '@ocean-network-express/magenta-ui/react';

import { mockListItems } from '../../utils/List/helpers';

export function ListSizeResponsive() {
  return (
    <List size="responsive">
      {mockListItems.map((item, index) => {
        return (
          <ListItem key={item.title + index}>
            <ListItemText primaryText={item.title} secondaryText={item.subtitle} />
          </ListItem>

With Icons

  • We supports icons from the @ocean-network-express/magenta-ui/icons package.

  • Container Dangerous

    This following list includes such commodities as propane gas lighters, ordinary wall paint, and more.

  • Container Dry

    This type of container is for general cargo. General cargo should not be over-length or in bulk.

  • Container Flatrack

    Flat racks are best suited for stowage of heavy lift, over-height and/or over-width cargo.

  • Container Tank

    A tank container or tanktainer is an intermodal container for the transport of liquids as bulk cargo.

  • Crane Container

    Crane Container provides basic port crane products include Rail Mounted Container Gantry Crane, etc.

Source Code

import { AddCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

import { mockListItems } from '../../utils/List/helpers';

export function ListWithIcons() {

Interactive

  • Below is an interactive demo that lets you explore the visual results of the different props:

Source Code

import {
  Checkbox,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';

import { mockListItems } from '../../utils/List/helpers';

export function ListInteractive() {
  return (

Selected ListItem

  • You can set a ListItem as selected by passing the selected prop.

Source Code

import {
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

import { mockListItemsTwo } from '../../utils/List/helpers';

export function ListSelectedListItem() {
  const [selected, setSelected] = React.useState<string>();

Active ListItem

  • You can set a ListItem as active by passing the active prop.

Source Code

import {
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

import { mockListItemsTwo } from '../../utils/List/helpers';

export function ListItemActive() {
  const [selected, setSelected] = React.useState<string>();

Grouped list

  • Group header level 1
  • Group header level 2 A

  • Container Dangerous

  • Container Dry

  • Container Flatrack

  • Container Tank

  • Crane Container

  • Group header level 2 B

  • Container Dangerous

  • Container Dry

  • Container Flatrack

  • Container Tank

  • Crane Container

Source Code

import {
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  ListSubheader,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

import { mockListItems } from '../../utils/List/helpers';

export function ListGrouped() {

List control

  • ListItem could using along with Checkbox component, see example below:

Source Code

import {
  Avatar,
  Checkbox,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

import { mockListItems } from '../../utils/List/helpers';

Disabled

  • Disabled state can be enabled by setting disabled prop to true.

Source Code

import {
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';

import { mockListItems } from '../../utils/List/helpers';

export function ListDisabled() {
  return (
    <div className="grid grid-cols-2 gap-6">

List Empty

    Empty

Source Code

import { List, ListEmpty as MagentaListEmpty } from '@ocean-network-express/magenta-ui/react';

export function ListEmpty() {
  return (
    <List>
      <MagentaListEmpty text="Empty" />
    </List>
  );
}

List Loading

    Loading

Source Code

import { List, ListLoading as MagentaListLoading } from '@ocean-network-express/magenta-ui/react';

export function ListLoading() {
  return (
    <List>
      <MagentaListLoading text="Loading" />
    </List>
  );
}

Was this page helpful?