Skip to main content

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#

AttributeTypeValueDefault ValueDescription
flushbooleantrue/falseundefinedRemove outer borders of list group
hoverbooleantrue/falseundefinedAdds hover background to entire list group
numberedbooleantrue/falseundefinedNumbers the list group items
rtlbooleantrue/falseundefinedSets entire list group to right-to-left (rtl)
tagstringe.g. ul/divSet outermost element to custom HTML element

List Group Item#

AttributeTypeValueDefault ValueDescription
activebooleantrue/falseundefinedSets a single list group item to active
flushbooleantrue/falseundefinedRemove outer borders of a single list group item
hoverbooleantrue/falseundefinedAdds hover background to a single list group item
rtlbooleantrue/falseundefinedSets a single list group item to right-to-left (rtl)
tagstringe.g. li/a/divSet outermost element to custom HTML element