Lite UI | List

import { List } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <List>
      <List.Ul>
        <List.Li>Lorem ipsum dolor</List.Li>
        <List.Li>sit amet consectetur</List.Li>
        <List.Li>adipisicing elit Possimus</List.Li>
        <List.Ul>
          <List.Li>repellat nemo beatae</List.Li>
          <List.Li>fugiat illo minus</List.Li>
          <List.Li>labore ipsum repellendus</List.Li>
          <List.Ul>
            <List.Li>aut ullam quisquam</List.Li>
            <List.Li>consequatur dolore hic</List.Li>
            <List.Li>magni explicabo cupiditate</List.Li>
          </List.Ul>
        </List.Ul>
      </List.Ul>
    </List>
  );
};

export default App;

Tab width

Lorem ipsum dolor
sit amet consectetur
adipisicing elit Possimus

repellat nemo beatae
fugiat illo minus
labore ipsum repellendus

aut ullam quisquam
consequatur dolore hic
magni explicabo cupiditate

import { List } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <List tabWidth={64}>
      <List.Ul>
        <List.Li>Lorem ipsum dolor</List.Li>
        <List.Li>sit amet consectetur</List.Li>
        <List.Li>adipisicing elit Possimus</List.Li>
        <List.Ul>
          <List.Li>repellat nemo beatae</List.Li>
          <List.Li>fugiat illo minus</List.Li>
          <List.Li>labore ipsum repellendus</List.Li>
          <List.Ul>
            <List.Li>aut ullam quisquam</List.Li>
            <List.Li>consequatur dolore hic</List.Li>
            <List.Li>magni explicabo cupiditate</List.Li>
          </List.Ul>
        </List.Ul>
      </List.Ul>
    </List>
  );
};

export default App;

Gap

Lorem ipsum dolor
sit amet consectetur
adipisicing elit Possimus

repellat nemo beatae
fugiat illo minus
labore ipsum repellendus

aut ullam quisquam
consequatur dolore hic
magni explicabo cupiditate

import { List } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <List gap={32}>
      <List.Ul>
        <List.Li>Lorem ipsum dolor</List.Li>
        <List.Li>sit amet consectetur</List.Li>
        <List.Li>adipisicing elit Possimus</List.Li>
        <List.Ul>
          <List.Li>repellat nemo beatae</List.Li>
          <List.Li>fugiat illo minus</List.Li>
          <List.Li>labore ipsum repellendus</List.Li>
          <List.Ul>
            <List.Li>aut ullam quisquam</List.Li>
            <List.Li>consequatur dolore hic</List.Li>
            <List.Li>magni explicabo cupiditate</List.Li>
          </List.Ul>
        </List.Ul>
      </List.Ul>
    </List>
  );
};

export default App;

API

List props

Property	Type	Description	Default
tabWidth	number	Tab size.	-
gap	number	Spacing between list item.	-
children	ReactNode	List content.	-

Default props

Property	Type	Description	Default
key	string	Unique key that identifies repeated elements.	-
className	string	Attribute used to add classes to HTML elements.	-
style	CSSProperties	Attribute used to apply CSS styles directly to HTML elements.	-

Made by ma9pie

Deployed on