List Group
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
#
Examples#
Basic example- Web Component
- React
- Angular
<uxf-list-group> <uxf-list-group-item>An item</uxf-list-group-item> <uxf-list-group-item>A second item</uxf-list-group-item> <uxf-list-group-item>A third item</uxf-list-group-item> <uxf-list-group-item>A fourth item</uxf-list-group-item> <uxf-list-group-item>And a fifth one</uxf-list-group-item> </uxf-list-group>
<UxfListGroup> <UxfListGroupItem>An item</UxfListGroupItem> <UxfListGroupItem>A second item</UxfListGroupItem> <UxfListGroupItem>A third item</UxfListGroupItem> <UxfListGroupItem>A fourth item</UxfListGroupItem> <UxfListGroupItem>And a fifth one</UxfListGroupItem> </UxfListGroup>
<uxf-list-group> <uxf-list-group-item>An item</uxf-list-group-item> <uxf-list-group-item>A second item</uxf-list-group-item> <uxf-list-group-item>A third item</uxf-list-group-item> <uxf-list-group-item>A fourth item</uxf-list-group-item> <uxf-list-group-item>And a fifth one</uxf-list-group-item> </uxf-list-group>
#
Active itemsAdd active
to a list-group-item
to indicate the current active selection.
- Web Component
- React
- Angular
<uxf-list-group> <uxf-list-group-item active aria-current="true">An active item</uxf-list-group-item> <uxf-list-group-item>A second item</uxf-list-group-item> <uxf-list-group-item>A third item</uxf-list-group-item> <uxf-list-group-item>A fourth item</uxf-list-group-item> <uxf-list-group-item>And a fith one</uxf-list-group-item> </uxf-list-group>
<UxfListGroup> <UxfListGroupItem active aria-current="true">An active item</UxfListGroupItem> <UxfListGroupItem>A second item</UxfListGroupItem> <UxfListGroupItem>A third item</UxfListGroupItem> <UxfListGroupItem disabled>A fourth item</UxfListGroupItem> <UxfListGroupItem>And a fifth one</UxfListGroupItem></UxfListGroup>
<uxf-list-group> <uxf-list-group-item active aria-current="true">An active item</uxf-list-group-item> <uxf-list-group-item>A second item</uxf-list-group-item> <uxf-list-group-item>A third item</uxf-list-group-item> <uxf-list-group-item>A fourth item</uxf-list-group-item> <uxf-list-group-item>And a fith one</uxf-list-group-item> </uxf-list-group>
#
Disabled itemsAdd disabled
to a list-group-item
to appear disabled.
- Web Component
- React
- Angular
<uxf-list-group> <uxf-list-group-item disabled aria-current="true">An active item</uxf-list-group-item> <uxf-list-group-item>A second item</uxf-list-group-item> <uxf-list-group-item>A third item</uxf-list-group-item> <uxf-list-group-item>A fourth item</uxf-list-group-item> <uxf-list-group-item>And a fith one</uxf-list-group-item> </uxf-list-group>
<UxfListGroup> <UxfListGroupItem disabled aria-current="true">An active item</UxfListGroupItem> <UxfListGroupItem>A second item</UxfListGroupItem> <UxfListGroupItem>A third item</UxfListGroupItem> <UxfListGroupItem>A fourth item</UxfListGroupItem> <UxfListGroupItem>And a fifth one</UxfListGroupItem></UxfListGroup>
<uxf-list-group> <uxf-list-group-item disabled aria-current="true">An active item</uxf-list-group-item> <uxf-list-group-item>A second item</uxf-list-group-item> <uxf-list-group-item>A third item</uxf-list-group-item> <uxf-list-group-item>A fourth item</uxf-list-group-item> <uxf-list-group-item>And a fith one</uxf-list-group-item> </uxf-list-group>
#
FlushAdd flush
to a list-group-item
to remove some borders and rounded corners to the rendered list group items edge-to-edge in parent container (e.g. cards).
- Web Component
- React
- Angular
<uxf-list-group flush> <uxf-list-group-item>An active item</uxf-list-group-item> <uxf-list-group-item>A second item</uxf-list-group-item> <uxf-list-group-item>A third item</uxf-list-group-item> <uxf-list-group-item>A fourth item</uxf-list-group-item> <uxf-list-group-item>And a fith one</uxf-list-group-item> </uxf-list-group>
<UxfListGroup flush> <UxfListGroupItem>An active item</UxfListGroupItem> <UxfListGroupItem>A second item</UxfListGroupItem> <UxfListGroupItem>A third item</UxfListGroupItem> <UxfListGroupItem disabled>A fourth item</UxfListGroupItem> <UxfListGroupItem>And a fifth one</UxfListGroupItem></UxfListGroup>
<uxf-list-group flush> <uxf-list-group-item>An active item</uxf-list-group-item> <uxf-list-group-item>A second item</uxf-list-group-item> <uxf-list-group-item>A third item</uxf-list-group-item> <uxf-list-group-item>A fourth item</uxf-list-group-item> <uxf-list-group-item>And a fith one</uxf-list-group-item> </uxf-list-group>