{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/navigation/tabs","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"244c4d77-c85e-52cd-b61f-0a36f5aa642a","title":"Tab","slug":"/contrast/angular/navigation/tabs"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Tab\",\n  \"metaTitle\": \"Tab Component for Contrast Bootstrap Angular\",\n  \"metaDescription\": \"Angular Bootstrap Tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tab\"), mdx(\"p\", null, \"Angular Bootstrap Tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time.\"), mdx(\"p\", null, \"Bootstrap tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time. Tabs available in CDB share general markup and styles, as well as the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".nav\"), \"ed element managing the active and disabled states.\"), mdx(\"i\", null), mdx(\"h2\", null, \"Default Tab\"), mdx(\"p\", null, \"Default Tab example.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/PR8nMiM.gif\",\n    \"alt\": null\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBNav [tab]=true class=\\\"mt-5\\\">\\n    <CDBTabLink link to=\\\"/tab\\\" [active]=\\\"content.activeTab === '1'\\\" (click)=\\\"content.setActiveTab('1')\\\">\\n        Label 1\\n    </CDBTabLink>\\n    <CDBTabLink link to=\\\"/tab\\\" [active]=\\\"content.activeTab === '2'\\\" (click)=\\\"content.setActiveTab('2')\\\">\\n        Label 2\\n    </CDBTabLink>\\n    <CDBTabLink link to=\\\"/tab\\\" [active]=\\\"content.activeTab === '3'\\\" (click)=\\\"content.setActiveTab('3')\\\">\\n        Label 3\\n    </CDBTabLink>\\n</CDBNav>\\n<CDBTabContent #content=\\\"cdbTabContent\\\" activeTab=\\\"1\\\">\\n    <CDBTabPane tabId=\\\"1\\\" [active]=\\\"content.activeTab === '1'\\\">\\n        <p class=\\\"mt-2\\\">\\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit.\\n            Nihil odit magnam minima, soluta doloribus reiciendis\\n            molestiae placeat unde eos molestias. Quisquam aperiam,\\n            pariatur. Tempora, placeat ratione porro voluptate odit\\n            minima.\\n        </p>\\n    </CDBTabPane>\\n    <CDBTabPane tabId=\\\"2\\\" [active]=\\\"content.activeTab === '2'\\\">\\n        <p class=\\\"mt-2\\\">\\n            Quisquam aperiam, pariatur. Tempora, placeat ratione porro\\n            voluptate odit minima. Lorem ipsum dolor sit amet,\\n            consectetur adipisicing elit. Nihil odit magnam minima,\\n            soluta doloribus reiciendis molestiae placeat unde eos\\n            molestias.\\n        </p>\\n        <p>\\n            Quisquam aperiam, pariatur. Tempora, placeat ratione porro\\n            voluptate odit minima. Lorem ipsum dolor sit amet,\\n            consectetur adipisicing elit. Nihil odit magnam minima,\\n            soluta doloribus reiciendis molestiae placeat unde eos\\n            molestias.\\n        </p>\\n    </CDBTabPane>\\n    <CDBTabPane tabId=\\\"3\\\" [active]=\\\"content.activeTab === '3'\\\">\\n        <p class=\\\"mt-2\\\">\\n            Quisquam aperiam, pariatur. Tempora, placeat ratione porro\\n            voluptate odit minima. Lorem ipsum dolor sit amet,\\n            consectetur adipisicing elit. Nihil odit magnam minima,\\n            soluta doloribus reiciendis molestiae placeat unde eos\\n            molestias.\\n        </p>\\n    </CDBTabPane>\\n</CDBTabContent>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Tab Justified\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/JNq6N3p.gif\",\n    \"alt\": null\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBNav [tab]=true [justified]=true class=\\\"mt-5\\\">\\n    <CDBTabLink link to=\\\"/tab\\\" [active]=\\\"content2.activeTab === '1'\\\" (click)=\\\"content2.setActiveTab('1')\\\">\\n        Label 1\\n    </CDBTabLink>\\n    <CDBTabLink link to=\\\"/tab\\\" [active]=\\\"content2.activeTab === '2'\\\" (click)=\\\"content2.setActiveTab('2')\\\">\\n        Label 2\\n    </CDBTabLink>\\n    <CDBTabLink link to=\\\"/tab\\\" [active]=\\\"content2.activeTab === '3'\\\" (click)=\\\"content2.setActiveTab('3')\\\">\\n        Label 3\\n    </CDBTabLink>\\n</CDBNav>\\n<CDBTabContent #content2=\\\"cdbTabContent\\\" activeTab=\\\"2\\\">\\n    <CDBTabPane tabId=\\\"1\\\" [active]=\\\"content2.activeTab === '1'\\\">\\n        <p class=\\\"mt-2\\\">\\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit.\\n            Nihil odit magnam minima, soluta doloribus reiciendis\\n            molestiae placeat unde eos molestias. Quisquam aperiam,\\n            pariatur. Tempora, placeat ratione porro voluptate odit\\n            minima.\\n        </p>\\n    </CDBTabPane>\\n    <CDBTabPane tabId=\\\"2\\\" [active]=\\\"content2.activeTab === '2'\\\">\\n        <p class=\\\"mt-2\\\">\\n            Quisquam aperiam, pariatur. Tempora, placeat ratione porro\\n            voluptate odit minima. Lorem ipsum dolor sit amet,\\n            consectetur adipisicing elit. Nihil odit magnam minima,\\n            soluta doloribus reiciendis molestiae placeat unde eos\\n            molestias.\\n        </p>\\n        <p>\\n            Quisquam aperiam, pariatur. Tempora, placeat ratione porro\\n            voluptate odit minima. Lorem ipsum dolor sit amet,\\n            consectetur adipisicing elit. Nihil odit magnam minima,\\n            soluta doloribus reiciendis molestiae placeat unde eos\\n            molestias.\\n        </p>\\n    </CDBTabPane>\\n    <CDBTabPane tabId=\\\"3\\\" [active]=\\\"content2.activeTab === '3'\\\">\\n        <p class=\\\"mt-2\\\">\\n            Quisquam aperiam, pariatur. Tempora, placeat ratione porro\\n            voluptate odit minima. Lorem ipsum dolor sit amet,\\n            consectetur adipisicing elit. Nihil odit magnam minima,\\n            soluta doloribus reiciendis molestiae placeat unde eos\\n            molestias.\\n        </p>\\n    </CDBTabPane>\\n</CDBTabContent>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Tab with Icons\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/VPYMDeL.gif\",\n    \"alt\": null\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBNav [tab]=true [justified]=true class=\\\"mt-5\\\">\\n    <CDBTabLink link to=\\\"/tab\\\" [active]=\\\"content3.activeTab === '1'\\\" (click)=\\\"content3.setActiveTab('1')\\\">\\n        <CDBIcon icon=\\\"bomb\\\" class=\\\"mr-2\\\"></CDBIcon>\\n        Label 1\\n    </CDBTabLink>\\n    <CDBTabLink link to=\\\"/tab\\\" [active]=\\\"content3.activeTab === '2'\\\" (click)=\\\"content3.setActiveTab('2')\\\">\\n        <CDBIcon icon=\\\"bomb\\\" class=\\\"mr-2\\\"></CDBIcon>\\n        Label 2\\n    </CDBTabLink>\\n    <CDBTabLink link to=\\\"/tab\\\" [active]=\\\"content3.activeTab === '3'\\\" (click)=\\\"content3.setActiveTab('3')\\\">\\n        <CDBIcon icon=\\\"bomb\\\" class=\\\"mr-2\\\"></CDBIcon>\\n        Label 3\\n    </CDBTabLink>\\n</CDBNav>\\n<CDBTabContent #content3=\\\"cdbTabContent\\\" activeTab=\\\"3\\\" class=\\\"mt-5\\\" style=\\\"margin-top: 30px\\\">\\n    <CDBTabPane tabId=\\\"1\\\" [active]=\\\"content3.activeTab === '1'\\\">\\n        <p class=\\\"mt-2\\\">\\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit.\\n            Nihil odit magnam minima, soluta doloribus reiciendis\\n            molestiae placeat unde eos molestias. Quisquam aperiam,\\n            pariatur. Tempora, placeat ratione porro voluptate odit\\n            minima.\\n        </p>\\n    </CDBTabPane>\\n    <CDBTabPane tabId=\\\"2\\\" [active]=\\\"content3.activeTab === '2'\\\">\\n        <p class=\\\"mt-2\\\">\\n            Quisquam aperiam, pariatur. Tempora, placeat ratione porro\\n            voluptate odit minima. Lorem ipsum dolor sit amet,\\n            consectetur adipisicing elit. Nihil odit magnam minima,\\n            soluta doloribus reiciendis molestiae placeat unde eos\\n            molestias.\\n        </p>\\n        <p>\\n            Quisquam aperiam, pariatur. Tempora, placeat ratione porro\\n            voluptate odit minima. Lorem ipsum dolor sit amet,\\n            consectetur adipisicing elit. Nihil odit magnam minima,\\n            soluta doloribus reiciendis molestiae placeat unde eos\\n            molestias.\\n        </p>\\n    </CDBTabPane>\\n    <CDBTabPane tabId=\\\"3\\\" [active]=\\\"content3.activeTab === '3'\\\">\\n        <p class=\\\"mt-2\\\">\\n            Quisquam aperiam, pariatur. Tempora, placeat ratione porro\\n            voluptate odit minima. Lorem ipsum dolor sit amet,\\n            consectetur adipisicing elit. Nihil odit magnam minima,\\n            soluta doloribus reiciendis molestiae placeat unde eos\\n            molestias.\\n        </p>\\n    </CDBTabPane>\\n</CDBTabContent>\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.\"), mdx(\"h2\", null, \"Contrast Tab Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {TabModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Tab Pane Bootstrap Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Tab Pane component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"class\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets custom classes, use class \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"card\"), \" to achieve card-like effect (you can use Card subcomponents inside)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"class=\\\"card\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"activeItem\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Any\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Active TabPane id - use this prop to control the component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"activeItem=\\\"activeTab\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tabId\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Any\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Indicates active pane\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"tabId=\\\"Tab1\\\"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tab","title":"Tab","items":[{"url":"#default-tab","title":"Default Tab","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#tab-justified","title":"Tab Justified","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#tab-with-icons","title":"Tab with Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-tab-bootstrap-modules-used","title":"Contrast Tab Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/navigation/tabs.md"},"frontmatter":{"metaTitle":"Tab Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap Tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"244c4d77-c85e-52cd-b61f-0a36f5aa642a"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}