{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/navigation/tabs","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"e12ea7d8-03b4-5187-8875-ade6a0af5d40","title":"Tab","slug":"/contrast/react/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 React\",\n  \"metaDescription\": \"Building a Tab Component using the Contrast Bootstrap React Package\"\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, \"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(\"p\", null, \"CDB Tabs are compatible with ReactRouter, meaning that \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavLink>\"), \" components inside can be used both for one-page tabs and general routing solution for main navigation. Make sure to include the wrapping \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<BrowserRouter>\"), \".\"), mdx(\"p\", null, \"If you are using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"navs\"), \" to provide a navigation bar, be sure to add an appropriate role attributes to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavLinks>\"), \" (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"role=\\\"tab\\\"\"), \").\"), mdx(\"i\", null), mdx(\"h2\", null, \"Default Tab\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), 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(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Tab = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBContainer>\\n              <CDBNav className=\\\"nav-tabs mt-5\\\">\\n                <CDBTabLink\\n                  link\\n                  to=\\\"#\\\"\\n                  active={this.state.activeItem === \\\"1\\\"}\\n                  onClick={this.toggle(\\\"1\\\")}\\n                  role=\\\"tab\\\"\\n                >\\n                  Label 1\\n                </CDBTabLink>\\n\\n                <CDBTabLink\\n                  link\\n                  to=\\\"#\\\"\\n                  active={this.state.activeItem === \\\"2\\\"}\\n                  onClick={this.toggle(\\\"2\\\")}\\n                  role=\\\"tab\\\"\\n                >\\n                  Label 2\\n                </CDBTabLink>\\n                <CDBTabLink\\n                  link\\n                  to=\\\"#\\\"\\n                  active={this.state.activeItem === \\\"3\\\"}\\n                  onClick={this.toggle(\\\"3\\\")}\\n                  role=\\\"tab\\\"\\n                >\\n                  Label 3\\n                </CDBTabLink>\\n              </CDBNav>\\n              <CDBTabContent activeItem={this.state.activeItem}>\\n                <CDBTabPane tabId=\\\"1\\\" role=\\\"tabpanel\\\">\\n                  <p className=\\\"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\\\" role=\\\"tabpanel\\\">\\n                  <p className=\\\"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\\\" role=\\\"tabpanel\\\">\\n                  <p className=\\\"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            </CDBContainer>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Tab Justified\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/JNq6N3p.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Tab = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBContainer>\\n              <CDBNav className=\\\"nav-tabs mt-5 nav-justified\\\">\\n                <CDBTabLink\\n                  link\\n                  to=\\\"#\\\"\\n                  active={this.state.activeItem2 === \\\"4\\\"}\\n                  onClick={this.toggle2(\\\"4\\\")}\\n                  role=\\\"tab\\\"\\n                >\\n                  Label 1\\n                </CDBTabLink>\\n\\n                <CDBTabLink\\n                  link\\n                  to=\\\"#\\\"\\n                  active={this.state.activeItem2 === \\\"5\\\"}\\n                  onClick={this.toggle2(\\\"5\\\")}\\n                  role=\\\"tab\\\"\\n                >\\n                  Label 2\\n                </CDBTabLink>\\n                <CDBTabLink\\n                  link\\n                  to=\\\"#\\\"\\n                  active={this.state.activeItem2 === \\\"6\\\"}\\n                  onClick={this.toggle2(\\\"6\\\")}\\n                  role=\\\"tab\\\"\\n                >\\n                  Label 3\\n                </CDBTabLink>\\n              </CDBNav>\\n              <CDBTabContent activeItem={this.state.activeItem2}>\\n                <CDBTabPane tabId=\\\"4\\\" role=\\\"tabpanel\\\">\\n                  <p className=\\\"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=\\\"5\\\" role=\\\"tabpanel\\\">\\n                  <p className=\\\"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=\\\"6\\\" role=\\\"tabpanel\\\">\\n                  <p className=\\\"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            </CDBContainer>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Tab with Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/VPYMDeL.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Tab = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBContainer>\\n              <CDBNav className=\\\"nav-tabs mt-5 nav-justified\\\">\\n                <CDBTabLink\\n                  link\\n                  to=\\\"#\\\"\\n                  active={this.state.activeItem3 === \\\"7\\\"}\\n                  onClick={this.toggle3(\\\"7\\\")}\\n                  role=\\\"tab\\\"\\n                >\\n                  <CDBIcon icon=\\\"bomb\\\" className=\\\"mr-2\\\" />\\n                  Label 1\\n                </CDBTabLink>\\n\\n                <CDBTabLink\\n                  link\\n                  to=\\\"#\\\"\\n                  active={this.state.activeItem3 === \\\"8\\\"}\\n                  onClick={this.toggle3(\\\"8\\\")}\\n                  role=\\\"tab\\\"\\n                >\\n                  <CDBIcon icon=\\\"bomb\\\" className=\\\"mr-2\\\" />\\n                  Label 2\\n                </CDBTabLink>\\n                <CDBTabLink\\n                  link\\n                  to=\\\"#\\\"\\n                  active={this.state.activeItem3 === \\\"9\\\"}\\n                  onClick={this.toggle3(\\\"9\\\")}\\n                  role=\\\"tab\\\"\\n                >\\n                  <CDBIcon icon=\\\"bomb\\\" className=\\\"mr-2\\\" />\\n                  Label 3\\n                </CDBTabLink>\\n              </CDBNav>\\n              <CDBTabContent\\n                activeItem={this.state.activeItem3}\\n                className=\\\"mt-5\\\"\\n                style={{ marginTop: \\\"30px\\\" }}\\n              >\\n                <CDBTabPane tabId=\\\"7\\\" role=\\\"tabpanel\\\">\\n                  <p className=\\\"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=\\\"8\\\" role=\\\"tabpanel\\\">\\n                  <p className=\\\"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=\\\"9\\\" role=\\\"tabpanel\\\">\\n                  <p className=\\\"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            </CDBContainer>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Tab component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast Tab Import Statement\"), mdx(\"p\", null, \"You need to import the proper components first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Tab Content Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBTabContent 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  }), \"className\"), 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  }), \"<CDBTabContent className=\\\"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  }), \"<CDBTabContent activeItem=\\\"activeTab\\\" ... />\")))), mdx(\"p\", null, \"API Reference: Contrast Tab Pane Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBTabPane 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  }), \"className\"), 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\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBTabPane className=\\\"customClass\\\" ... />\")), 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  }), \"<CDBTabPane tabId=\\\"Tab1\\\" ... />\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tab","title":"Tab","items":[{"url":"#default-tab","title":"Default Tab"},{"url":"#tab-justified","title":"Tab Justified"},{"url":"#tab-with-icons","title":"Tab with Icons"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-tab-import-statement","title":"Contrast Tab Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/navigation/tabs.mdx"},"frontmatter":{"metaTitle":"Tab Component for Contrast Bootstrap React","metaDescription":"Building a Tab Component using the Contrast Bootstrap React Package"}},"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":"e12ea7d8-03b4-5187-8875-ade6a0af5d40"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}