Lists and list groups

Flexible component for displaying a series of content.

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Lists

Default Unordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

<DataList ID="listUnordered" Ordered="False">
  <DataLayer ID="sdlUnordered" Type="Static">
    <StaticDataRow caption="..." />
  </DataLayer>
  <ListItem>
    <Label Caption="[at]Data.caption[tilde]" />
  </ListItem>
</DataList>

Default Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

<DataList ID="listOrdered" Ordered="True">
  <DataLayer ID="sdlOrdered" Type="Static">
    <StaticDataRow caption="..." />
  </DataLayer>
  <ListItem>
    <Label Caption="[at]Data.caption[tilde]" />
  </ListItem>
</DataList>

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

<DataList Class="list-unstyled" ID="listUnstyled" Ordered="False">
  <DataLayer ID="sdlUnstyled" Type="Static">
    <StaticDataRow caption="..." />
  </DataLayer>
  <ListItem>
    <Label Caption="[at]Data.caption[tilde]" />
  </ListItem>
</DataList>

Inline

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

<DataList Class="list-inline" ID="listInline" Ordered="False">
  <DataLayer ID="sdlInline" Type="Static">
    <StaticDataRow caption="..." />
  </DataLayer>
  <ListItem>
    <Label Caption="[at]Data.caption[tilde]" />
  </ListItem>
</DataList>

List Groups

Default List Groups

Display a styled list of items with custom content.

List Item One
List Item Two
List Item Three
List Item Four

<DataList Class="list-group" ID="listListGroup" Ordered="False">
  <DataLayer ID="sdlDefault" Type="Static">
    <StaticDataRow caption="..." />
  </DataLayer>
  <ListItem Class="list-group-item">
    <Label Caption="[at]Data.caption[tilde]" />
  </ListItem>
</DataList>

List Group Badges

1List Item One
2List Item Two
3List Item Three
4List Item Four

<DataList Class="list-group" ID="listGroupBadges" Ordered="False">
  <DataLayer ID="dlListGroupBadges" Type="Static">
    <StaticDataRow badgeLabel="1" caption="..." />
  </DataLayer>
  <ListItem Class="list-group-item">
    <Label Caption="[at]Data.badgeLabel[tilde]" Class="badge bg-secondary text-white mr-1" />
    <Label Caption="[at]Data.caption[tilde]" />
  </ListItem>
</DataList>

Active List Group

Add the badges component to any list group item and it will automatically be positioned on the right.

1List Item One
2List Item Two
3List Item Three
4List Item Four

<DataList Class="list-group" ID="listGroupBadgesActive" Ordered="False">
  <DataLayer ID="dlGroupBadgesActive" Type="Static">
    <StaticDataRow badgeLabel="1" caption="..." class="active" />
  </DataLayer>
  <ListItem Class="list-group-item [at]Data.class[tilde]">
    <Label Caption="[at]Data.badgeLabel[tilde]" Class="badge bg-secondary text-white mr-1" />
    <Label Caption="[at]Data.caption[tilde]" />
  </ListItem>
</DataList>

Division List Group

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

<Division Class="list-group" HtmlDiv="True">
  <Division Class="list-group-item list-group-item-action flex-column align-items-start active" HtmlDiv="True">
    <Division Class="d-flex w-100 justify-content-between" HtmlDiv="True">
      <Label HtmlTag="H5" Class="mb-1" Caption="..." />
      <Label HtmlTag="SMALL" Caption="..." />
    </Division>
    <Label Class="mb-1" HtmlTag="P" Caption="..." />
    <Label HtmlTag="SMALL" Caption="...." />
  </Division>
  <Division Class="list-group-item list-group-item-action flex-column align-items-start" HtmlDiv="True">
    <Division Class="d-flex w-100 justify-content-between" HtmlDiv="True">
      <Label HtmlTag="H5" Class="mb-1" Caption="..." />
      <Label HtmlTag="SMALL" Caption="..." />
    </Division>
    <Label Class="mb-1" HtmlTag="P" Caption="..." />
    <Label HtmlTag="SMALL" Caption="..." />
  </Division>
  <Division Class="list-group-item list-group-item-action flex-column align-items-start" HtmlDiv="True">
    <Division Class="d-flex w-100 justify-content-between" HtmlDiv="True">
      <Label HtmlTag="H5" Class="mb-1" Caption="..." />
      <Label HtmlTag="SMALL" Caption="..." />
    </Division>
    <Label Class="mb-1" HtmlTag="P" Caption="..." />
    <Label HtmlTag="SMALL" Caption="..." />
  </Division>
</Division>

Contextual

1List Item One
2List Item Two
3List Item Three
4List Item Four

<DataList Class="list-group" ID="lgContextual" Ordered="False">
  <DataLayer ID="dlLGContextual" Type="Static">
    <StaticDataRow badgeLabel="1" caption="..." class="list-group-item-success" />
    <StaticDataRow badgeLabel="2" caption="..." class="list-group-item-info" />
    <StaticDataRow badgeLabel="3" caption="..." class="list-group-item-warning" />
    <StaticDataRow badgeLabel="4" caption="..." class="list-group-item-danger" />
  </DataLayer>
  <ListItem Class="list-group-item [at]Data.class[tilde]">
    <Label Caption="[at]Data.badgeLabel[tilde]" Class="badge bg-secondary text-white mr-1" />
    <Label Caption="[at]Data.caption[tilde]" />
  </ListItem>
</DataList>