List Group

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.