Options
All
  • Public
  • Public/Protected
  • All
Menu

Module components/components

Index

References

Interfaces

Type aliases

Variables

Functions

References

DateTime

Re-exports DateTime

Field

Re-exports Field

IDateTime

Re-exports IDateTime

IDateTimeProps

Re-exports IDateTimeProps

IField

Re-exports IField

IFieldProps

Re-exports IFieldProps

IFieldValue

Re-exports IFieldValue

IFormControlPropsDateTime

Re-exports IFormControlPropsDateTime

IFormControlPropsPeoplePicker

Re-exports IFormControlPropsPeoplePicker

IListForm

Re-exports IListForm

IListFormAttachmentsProps

Re-exports IListFormAttachmentsProps

IListFormDialog

Re-exports IListFormDialog

IListFormDialogProps

Re-exports IListFormDialogProps

IListFormDisplay

Re-exports IListFormDisplay

IListFormDisplayProps

Re-exports IListFormDisplayProps

IListFormEdit

Re-exports IListFormEdit

IListFormEditProps

Re-exports IListFormEditProps

IPeoplePicker

Re-exports IPeoplePicker

IPeoplePickerProps

Re-exports IPeoplePickerProps

ListForm

Re-exports ListForm

ListFormDialog

Re-exports ListFormDialog

PeoplePicker

Re-exports PeoplePicker

Type aliases

IAlertTypes

IAlertTypes: { Danger: number; Dark: number; Info: number; Light: number; Primary: number; Secondary: number; Success: number; Warning: number }

Alert Types

Type declaration

  • Danger: number
  • Dark: number
  • Info: number
  • Light: number
  • Primary: number
  • Secondary: number
  • Success: number
  • Warning: number

IBadgeTypes

IBadgeTypes: { Danger: number; Dark: number; Info: number; Light: number; Primary: number; Secondary: number; Success: number; Warning: number }

Badge Types

Type declaration

  • Danger: number
  • Dark: number
  • Info: number
  • Light: number
  • Primary: number
  • Secondary: number
  • Success: number
  • Warning: number

IButtonTypes

IButtonTypes: { Danger: number; Dark: number; Info: number; Light: number; Link: number; OutlineDanger: number; OutlineDark: number; OutlineInfo: number; OutlineLight: number; OutlineLink: number; OutlinePrimary: number; OutlineSecondary: number; OutlineSuccess: number; OutlineWarning: number; Primary: number; Secondary: number; Success: number; Warning: number }

Button Types

Type declaration

  • Danger: number
  • Dark: number
  • Info: number
  • Light: number
  • Link: number
  • OutlineDanger: number
  • OutlineDark: number
  • OutlineInfo: number
  • OutlineLight: number
  • OutlineLink: number
  • OutlinePrimary: number
  • OutlineSecondary: number
  • OutlineSuccess: number
  • OutlineWarning: number
  • Primary: number
  • Secondary: number
  • Success: number
  • Warning: number

ICheckboxTypes

ICheckboxTypes: { Checkbox: number; Radio: number; Switch: number }

Checkbox Group Types

Type declaration

  • Checkbox: number
  • Radio: number
  • Switch: number

IFormValidationTypes

IFormValidationTypes: { Default: number; Tooltip: number }

Form Validation Types

Type declaration

  • Default: number
  • Tooltip: number

IInputGroupTypes

IInputGroupTypes: { ColorPicker: number; Email: number; File: number; Password: number; Range: number; Search: number; TextArea: number; TextField: number }

Input Group Types

Type declaration

  • ColorPicker: number
  • Email: number
  • File: number
  • Password: number
  • Range: number
  • Search: number
  • TextArea: number
  • TextField: number

IListGroupItemTypes

IListGroupItemTypes: { Danger: number; Dark: number; Info: number; Light: number; Primary: number; Secondary: number; Success: number; Warning: number }

List Group Item Types

Type declaration

  • Danger: number
  • Dark: number
  • Info: number
  • Light: number
  • Primary: number
  • Secondary: number
  • Success: number
  • Warning: number

IModalTypes

IModalTypes: { Full: number; FullLarge: number; FullMedium: number; FullSmall: number; FullXLarge: number; Large: number; Medium: number; Small: number; XLarge: number }

Checkbox Group Types

Type declaration

  • Full: number
  • FullLarge: number
  • FullMedium: number
  • FullSmall: number
  • FullXLarge: number
  • Large: number
  • Medium: number
  • Small: number
  • XLarge: number

INavbarTypes

INavbarTypes: { Dark: number; Light: number; Primary: number }

Navbar Types

Type declaration

  • Dark: number
  • Light: number
  • Primary: number

IOffcanvasTypes

IOffcanvasTypes: { Bottom: number; End: number; Start: number }

Offcanvas Types

Type declaration

  • Bottom: number
  • End: number
  • Start: number

IPaginationAlignment

IPaginationAlignment: { Centered: number; Left: number; Right: number }

Pagination Alignment

Type declaration

  • Centered: number
  • Left: number
  • Right: number

IPopoverPlacements

IPopoverPlacements: { Auto: number; AutoEnd: number; AutoStart: number; Bottom: number; BottomEnd: number; BottomStart: number; Left: number; LeftEnd: number; LeftStart: number; Right: number; RightEnd: number; RightStart: number; Top: number; TopEnd: number; TopStart: number }

Popover Placements

Type declaration

  • Auto: number
  • AutoEnd: number
  • AutoStart: number
  • Bottom: number
  • BottomEnd: number
  • BottomStart: number
  • Left: number
  • LeftEnd: number
  • LeftStart: number
  • Right: number
  • RightEnd: number
  • RightStart: number
  • Top: number
  • TopEnd: number
  • TopStart: number

IPopoverTypes

IPopoverTypes: { Danger: number; Dark: number; Info: number; Light: number; LightBorder: number; Material: number; Primary: number; Secondary: number; Success: number; Translucent: number; Warning: number }

Popover Types

Type declaration

  • Danger: number
  • Dark: number
  • Info: number
  • Light: number
  • LightBorder: number
  • Material: number
  • Primary: number
  • Secondary: number
  • Success: number
  • Translucent: number
  • Warning: number

ISpinnerTypes

ISpinnerTypes: { Danger: number; Dark: number; Info: number; Light: number; Primary: number; Secondary: number; Success: number; Warning: number }

Spinner Types

Type declaration

  • Danger: number
  • Dark: number
  • Info: number
  • Light: number
  • Primary: number
  • Secondary: number
  • Success: number
  • Warning: number

ITooltipPlacements

ITooltipPlacements: { Auto: number; AutoEnd: number; AutoStart: number; Bottom: number; BottomEnd: number; BottomStart: number; Left: number; LeftEnd: number; LeftStart: number; Right: number; RightEnd: number; RightStart: number; Top: number; TopEnd: number; TopStart: number }

Tooltip Placements

Type declaration

  • Auto: number
  • AutoEnd: number
  • AutoStart: number
  • Bottom: number
  • BottomEnd: number
  • BottomStart: number
  • Left: number
  • LeftEnd: number
  • LeftStart: number
  • Right: number
  • RightEnd: number
  • RightStart: number
  • Top: number
  • TopEnd: number
  • TopStart: number

ITooltipTypes

ITooltipTypes: { Danger: number; Dark: number; Info: number; Light: number; LightBorder: number; Material: number; Primary: number; Secondary: number; Success: number; Translucent: number; Warning: number }

Tooltip Types

Type declaration

  • Danger: number
  • Dark: number
  • Info: number
  • Light: number
  • LightBorder: number
  • Material: number
  • Primary: number
  • Secondary: number
  • Success: number
  • Translucent: number
  • Warning: number

Variables

AlertTypes

AlertTypes: IAlertTypes

Alert Types

BadgeTypes

BadgeTypes: IBadgeTypes

Badge Types

ButtonTypes

ButtonTypes: IButtonTypes

Button Types

CheckboxGroupTypes

CheckboxGroupTypes: ICheckboxTypes

Checkbox Group Types

CustomControls

CustomControls: { getByType: any; registerType: any }

Custom Controls

Type declaration

  • getByType:function
  • registerType:function
    • Registers a custom form control type.

      Parameters

      Returns void

DropdownTypes

DropdownTypes: IButtonTypes

Dropdown Types

FormControlTypes

FormControlTypes: IFormControlTypes

FormValidationTypes

FormValidationTypes: IFormValidationTypes

Form Validation Types

InputGroupTypes

InputGroupTypes: IInputGroupTypes

Input Group Types

ListGroupItemTypes

ListGroupItemTypes: IListGroupItemTypes

List Group Item Types

ModalTypes

ModalTypes: IModalTypes

Modal Types

NavbarTypes

NavbarTypes: INavbarTypes

Navbar Types

OffcanvasTypes

OffcanvasTypes: IOffcanvasTypes

Offcanvas Types

PaginationAlignment

PaginationAlignment: IPaginationAlignment

Pagination Alignment

PopoverPlacements

PopoverPlacements: IPopoverPlacements

Popover Placements

PopoverTypes

PopoverTypes: IPopoverTypes

Popover Types

SpinnerTypes

SpinnerTypes: ISpinnerTypes

Spinner Types

TooltipPlacements

TooltipPlacements: ITooltipPlacements

Tooltip Placements

TooltipTypes

TooltipTypes: ITooltipTypes

Tooltip Types

Functions

Const Accordion

  • 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."
    }
    ]
    });

    Parameters

    • props: IAccordionProps<Element>
    • Optional template: string
    • Optional itemTemplate: string

    Returns IAccordion

Const Alert

  • 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
    });

    Parameters

    Returns IAlert

Const Badge

  • 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
    });

    Parameters

    Returns IBadge

Const Breadcrumb

  • 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 }
    ]
    });

    Parameters

    Returns IBreadcrumb

Const Button

  • 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.");
    }
    });

    Parameters

    Returns IButton

Const ButtonGroup

  • 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."); } }
    ]
    });

    Parameters

    Returns IButtonGroup

Const Card

  • 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."); }
    }
    ]
    }
    ]
    });

    Parameters

    • props: ICardProps<Element>
    • Optional template: string

    Returns ICard

Const CardGroup

  • 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."
    }
    ]
    }
    ]
    });

    Parameters

    • props: ICardGroupProps
    • Optional template: string
    • Optional cardTemplate: string

    Returns ICardGroup

Const Carousel

  • 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"
    }
    ]
    });

    Parameters

    • props: ICarouselProps<Element>
    • Optional template: string
    • Optional slideTemplate: string

    Returns ICarousel

Const CheckboxGroup

  • 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" }
    ]
    });

    Parameters

    Returns ICheckboxGroup

Const Collapse

  • 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"
    });

    Parameters

    Returns ICollapse

Const Dropdown

  • 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);
    }
    });

    Parameters

    Returns IDropdown

Const Form

  • 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"
    }
    });

    Parameters

    Returns IForm

Const FormControl

Const InputGroup

  • 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"
    });

    Parameters

    Returns IInputGroup

Const Jumbotron

  • 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"
    });

    Parameters

    Returns IJumbotron

Const ListBox

  • 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" }
    ]
    });

    Parameters

    Returns IListBox

Const ListGroup

  • 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." }
    ]
    });

    Parameters

    • props: IListGroupProps<Element>
    • Optional template: string
    • Optional itemTemplate: string

    Returns IListGroup

Const Modal

  • 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
    });

    Parameters

    Returns IModal

Const Nav

  • Nav(props: INavProps<Element>, template?: string, itemTemplate?: string): INav
  • 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."; } }
    ]
    });

    Parameters

    • props: INavProps<Element>
    • Optional template: string
    • Optional itemTemplate: string

    Returns INav

Const Navbar

  • 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" }
    ]
    }
    ]
    });

    Parameters

    • props: INavbarProps<Element>
    • Optional template: string
    • Optional itemTemplate: string

    Returns INavbar

Const Offcanvas

  • 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
    });

    Parameters

    Returns IOffcanvas

Const Pagination

  • 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);
    }
    });

    Parameters

    Returns IPagination

Const Popover

  • 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"
    }
    });

    Parameters

    Returns IPopover

Const Progress

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

    // Create the progress
    let el = document.querySelector("#progress");
    let progress = Components.Progress({
    el: el,
    size: 25,
    label: "25%"
    });

    Parameters

    Returns IProgress

Const ProgressGroup

  • 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%"
    }
    ]
    });

    Parameters

    Returns IProgressGroup

Const Spinner

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

    // Create a spinner
    let el = document.querySelector("#spinner");
    Components.Spinner({
    el,
    text: "Loading...",
    type: Components.SpinnerTypes.Danger
    });

    Parameters

    Returns ISpinner

Const Table

  • 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" }
    ]
    });

    Parameters

    Returns ITable

Const Toast

  • 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 }
    });

    Parameters

    Returns IToast

Const Toolbar

  • 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" }] }
    ]
    });

    Parameters

    Returns IToolbar

Const Tooltip

  • 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
    }
    });

    Parameters

    Returns ITooltip

Const TooltipGroup

  • 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."); } }
    ]
    });

    Parameters

    Returns ITooltipGroup

Generated using TypeDoc