<List> Component

<List> represents a series of content.

Here the demo:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item

Installing <List> Component

There are 2 ways to install <List> component into your react app project:

  • Install the Specific Package of <List> Component
  • Install the Whole Reusable-UI Component Pack, including the <List> Component

actionCtrl Property

Sets the default actionCtrl property on <List> level.

You can set the actionCtrl property individually for each <ListItem>.

The possible values are:

  • undefined
  • false
  • true

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item (clickable)
  • A second item
  • A third item (clickable)
  • A fourth item
  • A fifth item (clickable)
  • A sixth item (clickable)
  • A seventh item

Show code

Variant Properties

The alternative appearances of the <List> layout without changing the <List>'s functionality.

listStyle Property

Sets the alternative appearances of the <List>.

The possible values are:

  • undefined
  • 'regular'
  • 'flat'
  • 'flush'
  • 'joined'
  • 'content'
  • 'button'
  • 'tab'
  • 'breadcrumb'
  • 'bullet'
  • 'numbered'

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item

Show code

orientation Property

Sets the orientation of the <List>.

The possible values are:

  • undefined
  • 'inline'
  • 'block'

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A first item
  • A second item
  • A third item

Show code

size Property

Defines the alternative size of the <List>.

You can set the size individually for each <ListItem>.

The possible values are:

  • undefined
  • 'sm'
  • 'md'
  • 'lg'

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item

Show code

theme Property

Defines the contextual theme of the <List>.

You can set the theme individually for each <ListItem>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item

Show code

gradient Property

Activates a 3D mode of the <List>.

You can set the gradient individually for each <ListItem>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item (gradient)
  • A second item
  • A third item (gradient)
  • A fourth item
  • A fifth item (gradient)
  • A sixth item (gradient)
  • A seventh item

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <List>.

You can set the outlined individually for each <ListItem>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item (outlined)
  • A second item
  • A third item (outlined)
  • A fourth item
  • A fifth item (outlined)
  • A sixth item (outlined)
  • A seventh item

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <List>.

You can set the mild individually for each <ListItem>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item (not mild)
  • A second item
  • A third item (not mild)
  • A fourth item
  • A fifth item (not mild)
  • A sixth item (not mild)
  • A seventh item

Show code

State Properties

The conditions of the <List> behavior or functionality.

enabled Property

Defines the enabled/disabled state of the <List>.

You can set the enabled individually for each <ListItem>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item (disabled)
  • A second item
  • A third item (disabled)
  • A fourth item
  • A fifth item (disabled)
  • A sixth item (disabled)
  • A seventh item

Show code

inheritEnabled Property

Influences the <List>'s disabled state by <ancestor enabled={false}>.

You can set the inheritEnabled individually for each <ListItem>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item

Show code

active Property

Defines the current active state of the <List>.

You can set the active individually for each <ListItem>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item
  • A first item (active)
  • A second item
  • A third item (active)
  • A fourth item
  • A fifth item (active)
  • A sixth item (active)
  • A seventh item

Show code

inheritActive Property

Influences the <List>'s active state by <ancestor active={true}>.

You can set the inheritActive individually for each <ListItem>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
  • A first item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
  • A sixth item
  • A seventh item

Show code

Variables

There are several variables of <List> you can customize. Changing the variables affects all <List> instance and other components that depend on <List>.

Here the exposed variables:

  • Backgrounds, Foregrounds, Borders, & Rings
  • Animations
  • Buttons
  • Tabs
  • Breadcrumbs
  • Bullets
  • Numbered

The example of accessing, modifying, & adding variables:

Show code