List Group

Implementation

import { ListGroup, ListGroupItem } from "slipstream-ui";

const Example = () => (

<ListGroup>

<ListGroupItem>List Group Item One</ListGroupItem>

<ListGroupItem>List Group Item Two</ListGroupItem>

<ListGroupItem>List Group Item Three</ListGroupItem>

</ListGroup>

);

Default

Example

• List Group Item One
• List Group Item Two
• List Group Item Three

Active

Example

• List Group Item One
• List Group Item Two
• List Group Item Three

<ListGroup>

<ListGroupItem active>...</ListGroupItem>

...

</ListGroup>

Hover

Example

• List Group Item One
• List Group Item Two
• List Group Item Three

<ListGroup hover>...</ListGroup>

Flush

Example

• List Group Item One
• List Group Item Two
• List Group Item Three

<ListGroup flush>...</ListGroup>

Numbered

Example

• List Group Item One
• List Group Item Two
• List Group Item Three

<ListGroup numbered>...</ListGroup>

Disabled

Example

• List Group Item One
• List Group Item Two
• List Group Item Three

<ListGroup>

<ListGroupItem disabled>...</ListGroupItem>

...

</ListGroup>

Right-To-Left (rtl)

Example

• List Group Item One
• List Group Item Two
• List Group Item Three

<ListGroup rtl>...</ListGroup>

Props

List Group

Attribute	Type	Value	Default Value	Description
flush	boolean	true/false	undefined	Remove outer borders of list group
hover	boolean	true/false	undefined	Adds hover background to entire list group
numbered	boolean	true/false	undefined	Numbers the list group items
rtl	boolean	true/false	undefined	Sets entire list group to right-to-left (rtl)
tag	string	e.g. ul/div		Set outermost element to custom HTML element

List Group Item

Attribute	Type	Value	Default Value	Description
active	boolean	true/false	undefined	Sets a single list group item to active
flush	boolean	true/false	undefined	Remove outer borders of a single list group item
hover	boolean	true/false	undefined	Adds hover background to a single list group item
rtl	boolean	true/false	undefined	Sets a single list group item to right-to-left (rtl)
tag	string	e.g. li/a/div		Set outermost element to custom HTML element