List Item

<mo-list-item> | MOListItem

Since 1.8

stable

List items are used inside a list to display a set of related items.

Status New

<mo-list>
  <mo-list-item>
    <span slot="label">Status</span>
    <span slot="value">New</span>
  </mo-list-item>
</mo-list>

import { MOList, MOListItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOList>
    <MOListItem>
      <span slot="label">Status</span>
      <span slot="value">New</span>
    </MOListItem>
  </MOList>
);

Examples

Multiple list items

List items inside a mo-list will automatically be separated by divisor borders.

Status New

Type Claim

Subject Data request

<mo-list>
  <mo-list-item>
    <span slot="label">Status</span>
    <span slot="value">New</span>
  </mo-list-item>
  <mo-list-item>
    <span slot="label">Type</span>
    <span slot="value">Claim</span>
  </mo-list-item>
  <mo-list-item>
    <span slot="label">Subject</span>
    <span slot="value">Data request</span>
  </mo-list-item>
</mo-list>

import { MOList, MOListItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOList>
    <MOListItem>
      <span slot="label">Status</span>
      <span slot="value">New</span>
    </MOListItem>
    <MOListItem>
      <span slot="label">Type</span>
      <span slot="value">Claim</span>
    </MOListItem>
    <MOListItem>
      <span slot="label">Subject</span>
      <span slot="value">Data request</span>
    </MOListItem>
  </MOList>
);

Complex content

List items can have more than just text inside them. As they use slots for the content, users can freely elements into the label and value slots.

Name Data request

Status

Success

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<mo-list>
  <mo-list-item>
    <span slot="label">Name</span>
    <span slot="value">Data request</span>
  </mo-list-item>
  <mo-list-item>
    <span slot="label">Status</span>
    <span slot="value"><mo-badge variant="success">Success</mo-badge></span>
  </mo-list-item>

  <mo-list-item>
    <span slot="label">Summary</span>
    <span style="width: 100%;" slot="value"
      ><mo-details simple summary="See more">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </mo-details></span
    >
  </mo-list-item>
</mo-list>

import { MOList, MOListItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOList>
    <MOListItem>
      <span slot="label">Name</span>
      <span slot="value">Data request</span>
    </MOListItem>
    <MOListItem>
      <span slot="label">Status</span>
      <span slot="value">
        <mo-badge variant="success">Success</mo-badge>
      </span>
    </MOListItem>

    <MOListItem>
      <span slot="label">Summary</span>
      <span style={{ width: '100%' }} slot="value">
        <MODetails simple summary="See more">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </MODetails>
      </span>
    </MOListItem>
  </MOList>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

React

Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/list-item/list-item.js';

To import this component as a React component:

import MOListItem from '@metsooutotec/modes-web-components/dist/react/list-item/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/list-item/list-item.js"></script>

Slots

Name	Description
`label`	The label slot.
`value`	The value slot.

Learn more about using slots.

Parts

Name	Description
`base`	The component’s internal wrapper.