the-list v3.1.25

the-list

List of the-components

Installation

$ npm install the-list --save

Usage

Live Demo is hosted on GitHub Page

'use strict'

import React from 'react'
import { TheListGroup, TheList, TheListStyle } from 'the-list'
import { TheSpinStyle } from 'the-spin'
import { TheRouter } from 'the-router'

const IMAGE_URL = 'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/02.jpg'

class ExampleComponent extends React.PureComponent {
  render () {
    const {Item} = TheList
    return (
      <div>
        <TheRouter.Hash>
          <TheSpinStyle/>
          <TheListStyle/>
          <TheListGroup>
            <TheListGroup.Header>Normal List</TheListGroup.Header>
            <TheListGroup.Body>
              <TheList>
                <Item disclosure>Foo</Item>
                <Item>Bar</Item>
                <Item disclosure>This is a very very very very very very very very very very
                  very very very very very very very very very very very long
                  content!</Item>
                <Item to='/about' disclosure>about</Item>
                <Item thumbnail={IMAGE_URL} disclosure>With Image</Item>
                <Item icon='fas fa-car'
                      onThumbnail={() => console.log('Thumbnail clicked')}
                      thumbnail={IMAGE_URL} disclosure>With Icon</Item>

                <Item title='This is Title'
                      subTitle='This is Sub title'
                      appendix='This is appendix'
                />

                <Item title='This is Title'
                      subTitle='This is Sub title'
                >With sub content</Item>
              </TheList>
              <TheList alt={'This is empty list'}>
              </TheList>
            </TheListGroup.Body>

            <TheListGroup.Header>Horizontal List</TheListGroup.Header>
            <TheListGroup.Body>
              <TheList horizontal>
                <Item disclosure>Foo</Item>
                <Item>Bar</Item>
                <Item disclosure>This is a very very very very very very very very very very
                  very very very very very very very very very very very long
                  content!</Item>
                <Item to='/about' disclosure>about</Item>
                <Item thumbnail={IMAGE_URL} disclosure>With Image</Item>

                <Item title='This is Title'
                      subTitle='This is Sub title'
                />

                <Item title='This is Title'
                      subTitle='This is Sub title'
                >With sub content</Item>

                <Item title='This is Title'
                      subTitle='This is Sub title'
                      appendix={'This is appendix'}
                >With sub content</Item>
              </TheList>
            </TheListGroup.Body>
          </TheListGroup>
        </TheRouter.Hash>
      </div>

    )
  }
}

export default ExampleComponent

Components

TheList

List components

Props

TheListGroup

Group of list

Props

TheListItem

Item of list

Props

TheListStyle

Style for TheList

Props

License

This software is released under the MIT License.

Links

• THE Labo