Badge Types
Button Types
Checkbox Group Types
Form Validation Types
Input Group Types
List Group Item Types
Checkbox Group Types
Navbar Types
Offcanvas Types
Pagination Alignment
Popover Placements
Popover Types
Spinner Types
Tooltip Placements
Tooltip Types
Alert Types
Badge Types
Button Types
Checkbox Group Types
Custom Controls
Registers a custom form control type.
Dropdown Types
Form Validation Types
Input Group Types
List Group Item Types
Modal Types
Navbar Types
Offcanvas Types
Pagination Alignment
Popover Placements
Popover Types
Spinner Types
Tooltip Placements
Tooltip Types
import { Components } from "gd-sprest-bs";
// Create the accordion
let el = document.querySelector("#accordion");
let accordion = Components.Accordion({
autoCollapse: true,
el: el,
id: "demoAccordion",
items: [
{
header: "Item 1",
content: "This is the content for item 1.",
showFl: true
},
{
header: "Item 2",
content: "This is the content for item 2."
},
{
header: "Item 3",
content: "This is the content for item 3."
}
]
});
import { Components } from "gd-sprest-bs";
// Create the alert
let el = document.querySelector("#alert");
let alert = Components.Alert({
el: el,
header: "Demo",
content: "This is an alert.",
isDismissible: true,
type: Components.AlertTypes.Success
});
import { Components } from "gd-sprest-bs";
// Create the badge
let el = document.querySelector("#badge");
let badge = Components.Badge({
el: el,
content: "Badge",
isPill: true,
type: Components.BadgeTypes.Success
});
import { Components } from "gd-sprest-bs";
// Create the breadcrumb
let el = document.querySelector("#breadcrumb");
let breadcrumb = Components.Breadcrumb({
el: el,
items: [
{ text: "Root", href: "/" },
{ text: "Web 1", href: "/web" },
{ text: "Web 1-1", href: "/web/1", isActive: true }
]
});
import { Components } from "gd-sprest-bs";
// Create the button
let el = document.querySelector("#btn");
let btn = Components.Button({
el: el,
type: Components.ButtonTypes.OutlineSuccess,
isLarge: true,
onClick: function(ev) {
alert("The button was clicked.");
}
});
import { Components } from "gd-sprest-bs";
// Create the buttonGroup
let el = document.querySelector("#buttonGroup");
let buttonGroup = Components.ButtonGroup({
el: el,
buttonType: $REST.Components.ButtonTypes.Primary,
buttons: [
{ text: "Left", onClick: function() { alert("Left button was clicked."); } },
{ text: "Middle", onClick: function() { alert("Middle button was clicked."); } },
{ text: "Right", onClick: function() { alert("Right button was clicked."); } }
]
});
import { Components } from "gd-sprest-bs";
// Create the card
let el = document.querySelector("#card");
let card = Components.Card({
el: el,
body: [
{
title: "Card Title",
text: "This is the card contents.",
actions: [
{
text: "Card Action",
buttonType: $REST.Components.ButtonTypes.Primary,
onClick: function(action, card) { alert(card.title + " was clicked."); }
}
]
}
]
});
import { Components } from "gd-sprest-bs";
// Create the cardGroup
let el = document.querySelector("#cardGroup");
let cardGroup = Components.CardGroup({
el: el,
cards: [
{
body: [
{
title: "Card 1",
subTitle: "SubTitle 1",
text: "This is the first card."
}
]
},
{
body: [
{
title: "Card 2",
subTitle: "SubTitle 2",
text: "This is the second card."
}
]
},
{
body: [
{
title: "Card 3",
subTitle: "SubTitle 3",
text: "This is the third card."
}
]
}
]
});
import { Components } from "gd-sprest-bs";
// Create the carousel
let el = document.querySelector("#carousel");
let carousel = Components.Carousel({
el: el,
enableControls: true,
enableIndicators: true,
id: "carouselDemo",
items: [
{
captions: "<h5>First Slide</h5>",
imageUrl: "https://via.placeholder.com/400x200",
imageAlt: "First Slide",
isActive: true
},
{
captions: "<h5>Second Slide</h5>",
imageUrl: "https://via.placeholder.com/400x200",
imageAlt: "Second Slide"
},
{
captions: "<h5>Third Slide</h5>",
imageUrl: "https://via.placeholder.com/400x200",
imageAlt: "Third Slide"
}
]
});
import { Components } from "gd-sprest-bs";
// Create the buttonGroup
let el = document.querySelector("#cbGroup");
let cbGroup = Components.CheckboxGroup({
el: el,
multi: false,
type: Components.CheckboxGroupTypes.Switch,
items: [
{ label: "Option 1" },
{ label: "Option 2", isSelected: true },
{ label: "Option 3" }
]
});
import { Components } from "gd-sprest-bs";
// Create the collapse
let el = document.querySelector("#collapse");
let collapse = Components.Collapse({
el: el,
id: "demoCollapse",
content: "This is the content to be collapsed.",
options: { toggle: true }
});
// Create the button to toggle the collapse
let btn = Components.Button({
el: document.querySelector("#btnCollapse"),
toggleObj: collapse,
text: "Collapse Demo"
});
import { Components } from "gd-sprest-bs";
// Create the dropdown
let el = document.querySelector("#dropdown");
let dropdown = Components.Dropdown({
el: el,
label: "Select a Choice",
items: [
{ text: "Choice 1", value: "1" },
{ text: "Choice 2", value: "2" },
{ text: "Choice 3", value: "3" },
{ text: "Choice 4", value: "4" },
{ text: "Choice 5", value: "5" }
],
onChange: (item, ev) => {
console.log("The selected value is: " + item.text);
}
});
import { Components } from "gd-sprest-bs";
// Create the form
let el = document.querySelector("#myForm");
let form = Components.Form({
el: el,
rows: [
{
control: {
label: "First Name:",
name: "FName",
type: Components.FormControlTypes.TextField
}
},
{
control: {
label: "Last Name:",
name: "LName",
type: Components.FormControlTypes.TextField
}
},
{
control: {
label: "Choices:",
name: "Choice",
type: Components.FormControlTypes.Dropdown,
items: [
{ text: "Choice 1", value: "1" },
{ text: "Choice 2", value: "2" },
{ text: "Choice 3", value: "3" },
{ text: "Choice 4", value: "4" },
{ text: "Choice 5", value: "5" }
]
}
}
],
value: {
FName: "Gunjan",
LName: "Datta",
Choice: "3"
}
});
import { Components } from "gd-sprest-bs";
// Create the inputGroup
let el = document.querySelector("#inputGroup");
let inputGroup = Components.InputGroup({
el: el,
label: "My Name:",
value: "First Last"
});
import { Components } from "gd-sprest-bs";
// Create the jumbotron
let el = document.querySelector("#jumbotron");
let jumbotron = Components.Jumbotron({
el: el,
title: "My Jumbotron",
lead: "This is a jumbotron"
});
List Box
import { Components } from "gd-sprest-bs";
// Create the list box
let el = document.querySelector("#list-box");
Components.Collapse({
el: el,
label: "Colors",
placeholder: "Search Colors",
items: [
{ text: "Red", value: "red" },
{ text: "Blue", value: "blue" },
{ text: "Green", value: "green" },
{ text: "Purple", value: "purple" },
{ text: "Brown", value: "brown" },
{ text: "Yellow", value: "yellow" },
{ text: "Orange", value: "orange" }
]
});
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." }
]
});
import { Components } from "gd-sprest-bs";
// Modal elements should be added to the body
var elModal = document.querySelector("#modal-demo");
if(elModal === null) {
elModal = document.createElement("div");
elModal.id = "modal-demo";
document.body.appendChild(elModal);
}
// Create the modal
let modal = Components.Modal({
el: el,
id: "modalDemo",
title: "Modal Demo",
type: Components.ModalTypes.Small,
body: "This is the body of the modal."
});
// Create the button
Components.Button({
el: document.querySelector("#modalDemo"),
text: "Show Modal",
toggleObj: modal,
type: Components.ButtonTypes.OutlinePrimary
});
import { Components } from "gd-sprest-bs";
// Create the navigation
let el = document.querySelector("#navigation");
let nav = Components.Nav({
el: el,
isJustified: true,
isPills: true,
isTabs: true,
items: [
{ title: "Nav 1", tabContent: "This is the content for tab 1.", isActive: true },
{ title: "Nav 2", tabContent: "This is the content for tab 2." },
{ title: "Nav 3", tabContent: "This is the content for tab 3." },
{ title: "Nav 4", tabContent: "This is the content for tab 4." },
{ title: "Nav 5", onRenderTab: function(el) { el.innerHTML = "This is the content for tab 5."; } }
]
});
import { Components } from "gd-sprest-bs";
// Create the navbar
let el = document.querySelector("#navbar");
let navbar = Components.Navbar({
el: el,
brand: "Navbar",
searchBox: {
onChange: (value) => {
// Log the value
console.log("The search value is: " + value);
},
onSearch: (value) => {
// Log the value
console.log("The search value is: " + value);
}
},
items: [
{
text: "Home",
isActive: true
},
{
text: "Link"
},
{
text: "Disabled Link",
isDisabled: true
},
{
text: "Dropdown Link",
items: [
{ text: "Link 1" },
{ text: "Link 2" },
{ text: "Link 3" },
{ text: "Link 4" },
{ text: "Link 5" }
]
}
]
});
Offcanvas
import { Components } from "gd-sprest-bs";
// Offcanvas elements should be added to the body
var elOffcanvas = document.querySelector("#offcanvas-demo");
if(elOffcanvas === null) {
elOffcanvas = document.createElement("div");
elOffcanvas.id = "offcanvas-demo";
document.body.appendChild(elOffcanvas);
}
// Create the offcanvas
let el = document.querySelector("#offcanvasDemo");
let offcanvas = Components.Offcanvas({
el: el,
id: "offcanvasDemo",
title: "Offcanvas Demo",
body: "This is the body of the offcanvas.",
type: Components.OffcanvasTypes.End
});
// Create the button
Components.Button({
el: document.querySelector("#offcanvasDemo"),
text: "Show Offcanvas",
toggleObj: offcanvas
});
import { Components } from "gd-sprest-bs";
// Create the pagination
let el = document.querySelector("#pagination");
let pagination = Components.Pagination({
el: el,
numberOfPages: 5,
onClick: (index, ev) => {
// Log the index
console.log("The page number selected is: " + index);
}
});
import { Components } from "gd-sprest-bs";
// Create the popover
let el = document.querySelector("#popover");
let popover = Components.Popover({
el: el,
className: "m-2",
text: "My Popover",
btnProps: {
text: "Popover Demo",
type: Components.ButtonTypes.OutlineDark
},
options: {
content: elContent,
trigger: "focus"
}
});
import { Components } from "gd-sprest-bs";
// Create the progress
let el = document.querySelector("#progress");
let progress = Components.Progress({
el: el,
size: 25,
label: "25%"
});
import { Components } from "gd-sprest-bs";
// Create the progress group
let el = document.querySelector("#progressGroup");
let progressGroup = Components.ProgressGroup({
el: el,
progressbars: [
{
size: 25,
isStriped: true,
label: "25%"
},
{
size: 50,
isAnimated: true,
isStriped: true,
label: "50%"
}
]
});
import { Components } from "gd-sprest-bs";
// Create a spinner
let el = document.querySelector("#spinner");
Components.Spinner({
el,
text: "Loading...",
type: Components.SpinnerTypes.Danger
});
import { Components } from "gd-sprest-bs";
// Create the table
let el = document.querySelector("#table");
let table = Components.Table({
el: el,
className: "table-sm is-striped",
columns: [
{ name: "a0", title: "Actions", isHidden: true },
{ name: "a1", title: "Col 1" },
{ name: "a2", title: "Col 2" },
{ name: "a3", title: "Col 3" }
],
rows: [
{ a0: "1", a1: "1.1", a2: "1.2", a3: "1.3" },
{ a0: "2", a1: "2.1", a2: "2.2", a3: "2.3" },
{ a0: "3", a1: "3.1", a2: "3.2", a3: "3.3" },
{ a0: "4", a1: "4.1", a2: "4.2", a3: "4.3" },
{ a0: "5", a1: "5.1", a2: "5.2", a3: "5.3" },
{ a0: "6", a1: "6.1", a2: "6.2", a3: "6.3" },
{ a0: "7", a1: "7.1", a2: "7.2", a3: "7.3" },
{ a0: "8", a1: "8.1", a2: "8.2", a3: "8.3" },
{ a0: "9", a1: "9.1", a2: "9.2", a3: "9.3" }
]
});
import { Components } from "gd-sprest-bs";
// Create a toast
let el = document.querySelector("#toast");
Components.Toast({
el,
headerText: "Header",
body: "This is the body of the toast.",
mutedText: "2 seconds ago",
options: { autohide: false }
});
import { Components } from "gd-sprest-bs";
// Create a toolbar
let el = document.querySelector("#toolbar");
Components.Toolbar({
el,
spacing: 3,
items: [
{ buttons: [{ text: "Button 1" }] },
{ buttons: [{ text: "Button 2" }] },
{ buttons: [{ text: "Button 3" }] },
{ buttons: [{ text: "Button 4" }] },
{ buttons: [{ text: "Button 5" }] }
]
});
import { Components } from "gd-sprest-bs";
// Create the tooltip
let el = document.querySelector("#tooltip");
let tooltip = Components.Tooltip({
el: el,
content: "This is the tooltip content.",
placement: Components.TooltipPlacements.Top,
theme: Components.TooltipTypes.LightBorder,
btnProps: {
text: "Tooltip",
type: Components.ButtonTypes.OutlineDark
}
});
import { Components } from "gd-sprest-bs";
// Create the group
let el = document.querySelector("#buttonGroup");
let tooltipGroup = Components.TooltipGroup({
el: el,
buttonType: $REST.Components.ButtonTypes.Primary,
buttons: [
{ text: "Left", onClick: function() { alert("Left button was clicked."); } },
{ text: "Middle", onClick: function() { alert("Middle button was clicked."); } },
{ text: "Right", onClick: function() { alert("Right button was clicked."); } }
]
});
Generated using TypeDoc
Alert Types