List Group

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the listGroup
var el = document.querySelector("#listGroup");
var listGroup = Components.listGroup({
    el: el,
    colWidth: 2,
    isTabs: true,
    items: [
        { tabName: "Tab 1", content: "This is the content for tab 1.", isActive: true },
        { tabName: "Tab 2", content: "This is the content for tab 2.", badge: { content: "10", type: 4 } },
        { tabName: "Tab 3", content: "This is the content for tab 3." },
        { tabName: "Tab 4", content: "This is the content for tab 4." },
        { tabName: "Tab 5", content: "This is the content for tab 5." }
    ]
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the listGroup
let el = document.querySelector("#listGroup");
let listGroup = Components.listGroup({
    el: el,
    colWidth: 2,
    isTabs: true,
    items: [
        { tabName: "Tab 1", content: "This is the content for tab 1.", isActive: true },
        { tabName: "Tab 2", content: "This is the content for tab 2.", badge: { content: "10", type: 4 } },
        { tabName: "Tab 3", content: "This is the content for tab 3." },
        { tabName: "Tab 4", content: "This is the content for tab 4." },
        { tabName: "Tab 5", content: "This is the content for tab 5." }
    ]
});

Web Component

// Return the list group properties return { items: [ { tabName: "Tab 1", content: "This is the content for tab 1.", isActive: true }, { tabName: "Tab 2", content: "This is the content for tab 2.", badge: { content: "10", type: 4 } }, { tabName: "Tab 3", content: "This is the content for tab 3." }, { tabName: "Tab 4", content: "This is the content for tab 4." }, { tabName: "Tab 5", content: "This is the content for tab 5." } ] };
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-list-group is-tabs="true" col-width="2">
    // Return the list group properties
    return {
        items: [
            { tabName: "Tab 1", content: "This is the content for tab 1.", isActive: true },
            { tabName: "Tab 2", content: "This is the content for tab 2.", badge: { content: "10", type: 4 } },
            { tabName: "Tab 3", content: "This is the content for tab 3." },
            { tabName: "Tab 4", content: "This is the content for tab 4." },
            { tabName: "Tab 5", content: "This is the content for tab 5." }
        ]
    };
</bs-list-group>

References

ListGroup(props:IListGroupProps):IListGroup

ListGroupItemTypes

Name Value
Danger 1
Dark 2
Info 3
Light 4
Primary 5
Secondary 6
Success 7
Warning 8

IListGroup

Name Returns Description
el Element The jquery element.

IListGroupItem

Name Returns Description
badge IBadgeProps The badge properties.
className string The class name to apply to the list group.
content string The item content.
href string Renders the item as an anchor.
isActive boolean Adds the ‘active” class name.
isDisabled boolean Adds the ‘disabled” class name.
tabName string The tab name.
type number The item type. Reference the ListGroupItemTypes

IListGroupProps

Name Type Description
className string The class name to apply to the input group.
colWidth number A value between 1-11, to render the tabs as columns.
el HTMLElement The element to render the input group to.
enableFade boolean Adds the ‘fade’ class name to the tab pane.
isFlush boolean Adds the ‘list-group-flush’ class name.
isTabs boolean True to render the list group as tabs.
items Array<IListGroupItem> An array of list group items.