List Group

less than 1 minute read

References

TypeScript

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

// Create the listGroup
let el = document.querySelector("#listGroup");
let listGroup = Components.listGroup({
    el: el,
    colWidth: 4,
    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." }
    ]
});

React

import * as React from "react";
import { Components, ListGroup } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <ListGroup
                colWidth={4}
                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: Components.BadgeTypes.Primary } },
                    { 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." }
                ]}
            />
        );
    }
}

VueJS

<template>
    <ListGroup colWidth="4" isTabs="true" v-bind:items="listItems" />
</template>

<script>
import { ListGroup } from "gd-sprest-bs-vue";
export default {
    components: { ListGroup },
    data() {
        return {
            listItems: [
                { 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: Components.BadgeTypes.Primary } },
                { 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>

Code Playground