gd-bs

<html> <head> <script src="dist/gd-bs.js"></script>   <style> .carousel { max-width: 400px; } .carousel-item { min-height: 200px; min-width: 400px; } form>*>* { margin-top: 10px; margin-bottom: 10px; } </style> </head> <body> <h1>Library</h1> <h5>Accordion</h5> <bs-accordion auto-collapse="true" id="my-accordion"> <item header="My Header" show-fl="true"> <b>Pure HTML</b> <br /> <p> This was created using pure html. This is kinda cool. </p> </item> <item header="My Opinion"> <b>Really Cool</b> <br /> <p> This is a really cool idea. I hope this is easy to develop. </p> </item> <item header="JavaScript" on-render-body="MyLib.renderItem"></item> </bs-accordion> <h5>Alert</h5> <bs-alert header="Alert Header" type="GD.Components.AlertTypes.Success">This is an alert.</bs-alert> <bs-alert is-dismissible="true" header="Alert Header" type="GD.Components.AlertTypes.Danger" on-close="MyLib.alertClick">This is a dissmissable alert.</bs-alert> <h5>Badge</h5> <bs-badge is-pill="true" data='{ "title": "My Custom Data" }' on-click="MyLib.badgeClick">My Badge</bs-badge> <h5>Breadcrumb</h5> <bs-breadcrumb> <item name="root" href="/">Root</item> <item name="web1" href="/web1">Web 1</item> <item name="web1-1" href="/web1/web1">Web 1-1</item> </bs-breadcrumb> <style> bs-breadcrumb .breadcrumb-item, bs-breadcrumb .breadcrumb-item>a { color: black !important; } </style> <h5>Collapse</h5> <bs-button toggle-obj="collapseDemo">Collapse Demo</bs-button> <bs-collapse id="collapseDemo" assign-to="MyLib.collapseInit" options='{ "toggle": false }'> <p> This is content to be collapsed... </p> </bs-collapse> <h5>Button Group</h5> <bs-button-group is-vertical="true"> <bs-button url="#btn1" on-click="MyLib.fileClicked">File 1.docx</bs-button> <bs-button url="#btn2" on-click="MyLib.fileClicked">File 2.docx</bs-button> <bs-button url="#btn3" on-click="MyLib.fileClicked">File 3.docx</bs-button> <bs-button url="#btn4" on-click="MyLib.fileClicked">File 4.docx</bs-button> <bs-button url="#btn5" on-click="MyLib.fileClicked">File 5.docx</bs-button> </bs-button-group> <h5>Card</h5> <bs-card on-render="MyLib.cardRender"> <card-body title="Card Title" button-type="GD.Components.ButtonTypes.OutlinePrimary" on-click="MyLib.cardBodyRender"> <i>This is the card contents...</i> </card-body> </bs-card> <h5>Card Group</h5> <bs-card-group class-name="g-4" col="4" on-render="MyLib.cardGroupRender"> <bs-card> <card-body title="Card Title 1"> <p>This is the first card's contents.</p> <card-action button-type="GD.Components.ButtonTypes.OutlinePrimary" on-click="MyLib.cardGroupClick">Card Action</card-action> </card-body> </bs-card> <bs-card> <card-body title="Card Title 2"> <p>This is the second card's contents.</p> <card-action button-type="GD.Components.ButtonTypes.OutlinePrimary" on-click="MyLib.cardGroupClick">Card Action</card-action> </card-body> </bs-card> <bs-card> <card-body title="Card Title 3"> <p>This is the third card's contents.</p> <card-action button-type="GD.Components.ButtonTypes.OutlinePrimary" on-click="MyLib.cardGroupClick">Card Action</card-action> </card-body> </bs-card> <bs-card> <card-body title="Card Title 4"> <p>This is the fourth card's contents.</p> <card-action button-type="GD.Components.ButtonTypes.OutlinePrimary" on-click="MyLib.cardGroupClick">Card Action</card-action> </card-body> </bs-card> <bs-card> <card-body title="Card Title 5"> <p>This is the fifth card's contents.</p> <card-action button-type="GD.Components.ButtonTypes.OutlinePrimary" on-click="MyLib.cardGroupClick">Card Action</card-action> </card-body> </bs-card> <bs-card> <card-body title="Card Title 6"> <p>This is the sixth card's contents.</p> <card-action button-type="GD.Components.ButtonTypes.OutlinePrimary" on-click="MyLib.cardGroupClick">Card Action</card-action> </card-body> </bs-card> </bs-card-group> <h5>Carousel</h5> <div style="height:250px"> <bs-carousel enable-controls="true" enable-indicators="true" id="demoCarousel" options='{ "interval": 2500 }'> <item captions='<ht>First Slide</h5>' image-url="data:image/jpeg;base64,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" image-alt="Flide Sirst" is-active="true"></item> <item captions='<ht>Second Slide</h5>' image-url="https://th.bing.com/th/id/OIP.GapT2rsw3IDqlfRmt9dCqQAAAA?w=322&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" image-alt="SSlidd econe"></item> <item captions='<ht>Third Slide</h5>' image-url="https://th.bing.com/th/id/OIP.VR_5B2pHyhaq9YKGLJlqRwHaEG?w=320&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" image-alt="Tlide Shird"></item> <item captions='<ht>Fourth Slide</h5>' image-alt="Fourth Slide"> <p> This is html content... </p> </item> </bs-carousel> </div> <h5>Checkbox Group</h5> <bs-checkbox-group label="Label:" is-inline="true" type="GD.Components.CHeckboxGroupTypes.Switch"> <item name="cb1">Checkbox 1</item> <item name="cb2">Checkbox 2</item> <item name="cb3">Checkbox 3</item> <item name="cb4">Checkbox 4</item> <item name="cb5">Checkbox 5</item> </bs-checkbox-group> <h5>Dropdown</h5> <bs-dropdown auto-select="true" is-split="false" label="My Dropdown:" search="true" on-change="MyLib.ddlChange"> <item is-header="true">Header 1</item> <item is-divider="true"></item> <item value="1">Item 1</item> <item value="2">Item 2</item> <item value="3">Item 3</item> <item value="4">Item 4</item> <item value="5">Item 5</item> <item is-header="true">Header 2</item> <item is-divider="true"></item> <item value="6">Item 6</item> <item value="7">Item 7</item> <item value="8">Item 8</item> <item value="9">Item 9</item> <item value="10">Item 10</item> <item value="11">Item 11</item> <item value="12">Item 12</item> <item value="13">Item 13</item> <item value="14">Item 14</item> <item value="15">Item 15</item> <item value="16">Item 16</item> <item value="17">Item 17</item> <item value="18">Item 18</item> <item value="19">Item 19</item> <item value="20">Item 20</item> </bs-dropdown> <h5>Form (Rows)</h5> <bs-form row-class-name="class1 class2"> <row> <bs-form-control class-name="col-header d-none" id="ddl-ro" label="Shouldn't See Me" title="This is a hidden dropdown" type="GD.Components.FormControlTypes.Dropdown" description="This is a test for rendering a hidden dropdown."></bs-form-control> </row> <row> <bs-form-control class-name="custom-control" id="custom-control" on-control-rendered="MyLib.formCustomControl"></bs-form-control> </row> <row> <bs-form-control label="First Name:" type="GD.Components.FormControlTypes.TextField"></bs-form-control> <bs-form-control label="Middle Name:" type="GD.Components.FormControlTypes.TextField"></bs-form-control> <bs-form-control label="Last Name:" type="GD.Components.FormControlTypes.TextField"></bs-form-control> </row> <row> <bs-form-control label="Items:" type="GD.Components.FormControlTypes.Dropdown" value="4"> <item value="1">Item 1</item> <item value="2">Item 2</item> <item value="3">Item 3</item> <item value="4">Item 4</item> <item value="5">Item 5</item> <item value="6">Item 6</item> <item value="7">Item 7</item> <item value="8">Item 8</item> <item value="9">Item 9</item> <item value="10">Item 10</item> <item value="11">Item 11</item> <item value="12">Item 12</item> <item value="13">Item 13</item> <item value="14">Item 14</item> <item value="15">Item 15</item> <item value="16">Item 16</item> <item value="17">Item 17</item> <item value="18">Item 18</item> <item value="19">Item 19</item> <item value="20">Item 20</item> </bs-form-control> </row> <div> <h3>Custom Header</h3> <h5>You can add your own html</h5> </div> <row> <bs-form-control label="First Response:" type="GD.Components.FormControlTypes.TextField"></bs-form-control> </row> <row> <bs-form-control label="Second Response:" type="GD.Components.FormControlTypes.TextField"></bs-form-control> </row> <row> <bs-form-control label="Third Response:" type="GD.Components.FormControlTypes.TextField"></bs-form-control> </row> </bs-form> <h5>Form (Controls)</h5> <bs-form> <bs-form-control label="First Response:" type="GD.Components.FormControlTypes.TextField"></bs-form-control> <bs-form-control label="Second Response:" type="GD.Components.FormControlTypes.TextField"></bs-form-control> <bs-form-control label="Third Response:" type="GD.Components.FormControlTypes.TextField"></bs-form-control> </bs-form> <h5>Icon Link</h5> <b>This isn't working. The icon is a function, which needs to be looked at.</b> <br /> <bs-icon-link type="GD.Components.IconLinkTypes.AfterText">Icon Link</bs-icon-link> <h5>Loading Button</h5> <b>This isn't working. The icon is a function, which needs to be looked at.</b> <br /> <bs-button class-name="btn-loading" icon-type="GD.IconTypes.Badge3d" on-click="MyLib.btnLoadingClick" icon-type="GD.IconTypes.Badge3d"> <bs-spinner class-name="me-2" is-small="true" type="GD.Components.SpinnerTypes.Light"></bs-spinner> Loading... </bs-button> <h5>Listbox</h5> <bs-list-box label="List Box Example:"> <item>Value 1</item> <item>Value 2</item> <item>Value 3</item> <item>Value 4</item> <item>Value 5</item> </bs-list-box> <h5>List Group</h5> <bs-list-group> <item>This is the content for item 1</item> <item> <bs-badge content="10" type="GD.Components.BadgeTypes.Primary"></bs-badge> This is the content for item 2 </item> <item>This is the content for item 3</item> <item>This is the content for item 4</item> <item>This is the content for item 5</item> </bs-list-group> <h5>Modal</h5> <bs-button toggle-obj="#modalDemo" on-click="MyLib.modalShow">Modal Demo</bs-button> <bs-modal id="modalDemo" type="GD.Components.ModalTypes.Large" assign-to="MyLib.modalRef"> <bs-modal-title><b>Demo: </b>Modal Header</bs-modal-title> <bs-modal-body>This is the modal body</bs-modal-body> <bs-modal-footer> <bs-button-group> <bs-button on-click="MyLib.modalSubmit">Submit</bs-button> <bs-button on-click="MyLib.modalClose">Close</bs-button> </bs-button-group> </bs-modal-footer> </bs-modal> <h5>Multi-Textbox</h5> <bs-input-group id="multi-textbox" appended-label="Optional" label="Address:" rows="6" type="GD.Components.InputGroupTypes.TextArea"> This is a long value. It's supposed to go in a text area. Hopefully this will be on a new line... </bs-input-group> <h5>Nav (Tabs)</h5> <bs-nav is-underline="true"> <nav-item title="NavTab 1" is-active="true"> This is the content for tab 1 </nav-item> <nav-item title="NavTab 2"> This is the content for tab 2 </nav-item> <nav-item title="NavTab 3"> This is the content for tab 3 </nav-item> <nav-item title="NavTab 4"> This is the content for tab 4 </nav-item> <nav-item title="NavTab 5" on-render-tab="MyLib.tabRender"></nav-item> </bs-nav> <h5>Navbar</h5> <bs-navbar brand="Test"> <navbar-search-box on-change="MyLib.navbarSearchChange" on-search="MyLib.navbarSearch"> Default Value </navbar-search-box> <navbar-item text="Home" is-active="true" icon-type="" on-click="MyLib.navbarClick"></navbar-item> <navbar-item text="Link" is-disabled="true" on-click="MyLib.navbarClick"></navbar-item> <navbar-item text="Dropdown Link" is-button="true" class-name="btn-outline-dark"> <navbar-item href="#" on-click="MyLib.navbarClick">Link 1</navbar-item> <navbar-item href="#" on-click="MyLib.navbarClick">Link 2</navbar-item> <navbar-item href="#" on-click="MyLib.navbarClick">Link 3</navbar-item> <navbar-item href="#" on-click="MyLib.navbarClick">Link 4</navbar-item> <navbar-item href="#" on-click="MyLib.navbarClick">Link 5</navbar-item> </navbar-item> <navbar-item-end is-active="true">Support</navbar-item-end> <navbar-item-end is-button="true" class-name="btn-outline-dark me-2">Help</navbar-item-end> </bs-navbar> <h5>Offcanvas</h5> <bs-button on-click="MyLib.offcanvasShow">Offcanvas Demo</bs-button> <bs-offcanvas id="offcanvas-demo" title="Offcanvas Demo" options='{ "autoClose": false, "backdrop": true }' size="GD.Components.OffcanvasTypes.End" type="GD.OffcanvasSize.Medium" assign-to="MyLib.offcanvasRef"> <h5>Demo Offcanvas</h5> <p> This was done w/ pure html, so it's easy to customize this. </p> </bs-offcanvas> <h5>Paging</h5> <bs-paging number-of-pages="85" on-click="MyLib.pagingOnClick"></bs-paging> <h5>Popover</h5> <div class="bs"> <div class="d-flex justify-content-between"> <bs-popover title="My Popover" placement="GD.Components.PopoverPlacements.BottomEnd" options='{ "trigger": "click" }'> <btn-props>Popover Demo</btn-props> This is the content for the popover. </bs-popover> <bs-popover title="My Popover" placement="GD.Components.PopoverPlacements.Bottom" options='{ "trigger": "click" }'> <btn-props>Popover Demo</btn-props> This is the content for the popover. </bs-popover> <bs-popover title="My Popover" placement="GD.Components.PopoverPlacements.TopStart" options='{ "trigger": "click" }'> <btn-props>Popover Demo</btn-props> This is the content for the popover. </bs-popover> </div> </div> <h5>Progress</h5> <bs-progress size="25" type="GD.Components.ProgressBarTypes.Primary">25%</bs-progress> <h5>Progress Group</h5> <bs-progress-group> <bs-progress size="25" is-striped="true" type="GD.Components.ProgressBarTypes.Danger">25%</bs-progress> <bs-progress size="25" is-animated="true" is-striped="true" type="GD.Components.ProgressBarTypes.Dark">50%</bs-progress> </bs-progress-group> <h5>Spinner</h5> <bs-spinner type="GD.Components.SpinnerTypes.Danger">Loading...</bs-spinner> <h5>Table</h5> <bs-table class-name="is-striped"> <bs-col name="title" enable-sort="true">Title</bs-col> <bs-col name="name" enable-sort="true">Country</bs-col> <bs-rows> [ { "name": "Berglunds snabbkop", "title": "Sweden" }, { "name": "North/South", "title": "UK" }, { "name": "Alfreds Futterkiste", "title": "Germany" }, { "name": "Koniglich Essen", "title": "Germany" }, { "name": "Magazzini Alimentari Riuniti", "title": "Italy" }, { "name": "Paris specialites", "title": "France" }, { "name": "Island Trading", "title": "UK" }, { "name": "Laughing Bacchus Winecellars", "title": "Canada" } ] </bs-rows> </bs-table> <h5>Tabs</h5> <bs-list-group col-width="4" fade-tabs="true" is-tabs="true"> <item tab-name="Tab 1" is-active="true"> This is the content for tab 1. </item> <item tab-name="Tab 2" badge='{ "content": "10", "type": 2 }'> This is the content for tab 2. </item> <item tab-name="Tab 3"> This is the content for tab 3. </item> <item tab-name="Tab 4"> This is the content for tab 4. </item> <item tab-name="Tab 5"> This is the content for tab 5. </item> <item tab-name="Tab 6"> <a href="#">This is a link.</a> </item> </bs-list-group> <h5>Textbox</h5> <bs-input-group value="0" on-change="MyLib.inputGrouponChange"> <prepended-button>Run</prepended-button> <prepended-label>First Name</prepended-label> <appended-button>Run</appended-button> </bs-input-group> <h5>Tooltip</h5> <div class="bs"> <div class="d-flex justify-content-between"> <bs-tooltip placement="GD.Components.TooltipPlacements.Right" type="GD.Components.TooltipTypes.Dark" options='{ "trigger": "click" }'> <btn-props type="GD.Components.ButtonTypes.OutlineDanger">Test Tooltip</btn-props> This is a tooltip. It was easy to make. </bs-tooltip> <bs-tooltip placement="GD.Components.TooltipPlacements.BottomRight" type="GD.Components.TooltipTypes.LightBorder" options='{ "trigger": "click" }'> <btn-props type="GD.Components.ButtonTypes.OutlineDanger">Test Tooltip</btn-props> This is a tooltip. It was easy to make. </bs-tooltip> <bs-tooltip placement="GD.Components.TooltipPlacements.BottomLeft" type="GD.Components.TooltipTypes.Dark" options='{ "trigger": "click" }'> <btn-props type="GD.Components.ButtonTypes.OutlineDanger">Test Tooltip</btn-props> This is a tooltip. It was easy to make. </bs-tooltip> <bs-tooltip placement="GD.Components.TooltipPlacements.Bottom" type="GD.Components.TooltipTypes.Dark" options='{ "trigger": "click" }'> <btn-props type="GD.Components.ButtonTypes.OutlineDanger">Test Tooltip</btn-props> This is a tooltip. It was easy to make. </bs-tooltip> </div> </div> <h5>Toast</h5> <bs-toast id="toast" header-text="Header Text" muted-text="2 seconds ago" options='{ "autohide": false }'> This is the body of the toast. </bs-toast> <h5>Toolbar</h5> <bs-toolbar spacing="3"> <toolbar-item> <bs-button>Button 1</bs-button> </toolbar-item> <toolbar-item> <bs-button>Button 2</bs-button> </toolbar-item> <toolbar-item> <bs-button>Button 3</bs-button> </toolbar-item> <toolbar-item> <bs-button>Button 4</bs-button> </toolbar-item> <toolbar-item> <bs-button>Button 5</bs-button> </toolbar-item> <toolbar-item> <bs-button>Button 6</bs-button> </toolbar-item> <toolbar-item> <bs-button>Button 7</bs-button> </toolbar-item> <toolbar-item> <bs-button>Button 8</bs-button> </toolbar-item> <toolbar-item> <bs-button>Button 9</bs-button> </toolbar-item> <toolbar-item> <bs-button>Button 10</bs-button> </toolbar-item> <toolbar-item> <bs-button>Button 1</bs-button> <bs-button>Button 2</bs-button> <bs-button>Button 3</bs-button> <bs-button>Button 4</bs-button> <bs-button>Button 5</bs-button> <bs-button>Button 6</bs-button> <bs-button>Button 7</bs-button> <bs-button>Button 8</bs-button> <bs-button>Button 9</bs-button> <bs-button>Button 10</bs-button> </toolbar-item> </bs-toolbar> <script type="text/javascript" showFl="false"> window["MyRefs"] = {}; window["MyLib"] = { alertClick: (props) => { alert("The alert was closed.", props.header); }, badgeClick: (badge) => { alert("Badge clicked: " + badge.data.title); }, btnLoadingClick: (props) => { alert("The loading button was clicked..."); }, cardGroupClick: (action, card) => { alert(card.title + " was clicked."); }, cardGroupRender: (el) => { console.log("Card Group Render: ", el); }, cardRender: (el) => { console.log("Card Render: ", el); }, cardBodyRender: (el) => { console.log("Card Body Render: ", el); }, collapseInit: obj => { window["collapseDemo"] = obj; }, ddlChange: (item) => { alert("Selected Item: " + (item ? item.text : "No Selection")); }, fileClicked: (btn) => { alert(btn.text + " clicked."); }, formCustomControl: (ctrl) => { ctrl.el.innerHTML = "<h3>Custom Control</h3>"; }, inputGrouponChange: (val) => { console.log("Value changed to: " + val); }, modalClose: () => { MyRefs.modal.hide(); }, modalShow: () => { MyRefs.modal.show(); }, modalSubmit: () => { alert("Form Submitted"); MyRefs.modal.hide(); }, modalRef: (obj) => { MyRefs.modal = obj; }, offcanvasRef: (obj) => { MyRefs.offcanvas = obj; }, offcanvasShow: () => { MyRefs.offcanvas.show(); }, pagingOnClick: (pageNumber) => { alert(pageNumber + " was clicked."); }, navbarClick: (item) => { alert("Nav Item Clicked: " + item.text); }, navbarOnChange: (item) => { alert("Nav DDL Item Clicked: " + item.text); }, navbarSearchChange: (val) => { console.log("Searching value: " + val); }, navbarSearch: (val) => { alert("Searching for: " + val); }, renderItem: (el, item) => { // Render content for the accordion el.innerHTML = `<b>${item.header}</b><p>was used to create this content.</p>`; }, tabRender: (el) => { el.innerHTML = "This content was rendered from JavaScript."; } } </script> </body> </html>