{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/collapse","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"6d3245b8-e510-50ca-8bb4-731dfa6e780d","title":"Collapse","slug":"/contrast/react/components/collapse"},"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\": \"Collapse\",\n \"metaTitle\": \"Collapse Component for Contrast Bootstrap React\",\n \"metaDescription\": \"Building a Collapse 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, \"Collapse\"), mdx(\"p\", null, \"Collapse is a component which toggles content. Useful for grouping great amount of texts and/or graphics into expanding and collapsing items.\"), mdx(\"p\", null, \"Collapse is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"height\"), \" from its current value to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"0\"), \".\"), mdx(\"h2\", null, \"Example\"), mdx(\"p\", null, \"Default Collapse example.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://i.imgur.com/PqwJe4o.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 { CDBBtn, CDBCollapse, CDBContainer } from \\\"cdbreact\\\";\\n\\nclass Collapse extends Component {\\n state = {\\n collapseID: \\\"\\\",\\n };\\n\\n toggleCollapse = (collapseID) => () => {\\n this.setState((prevState) => ({\\n collapseID: prevState.collapseID !== collapseID ? collapseID : \\\"\\\",\\n }));\\n };\\n\\n render() {\\n return (\\n \\n \\n \\n COLLAPSE BUTTON\\n \\n \\n

\\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\\n sunt in culpa qui officia deserunt mollit anim id est laborum\\n

\\n \\n \\n \\n );\\n }\\n}\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Collapse 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 Collapse Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast Collapse component first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import { CDBCollapse } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Collapse Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCollapse 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 }), \"Adds custom classes\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"delay\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Number or Object\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"{show: 350, hide: 350}\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Defines how many milliseconds the open/close event are delayed\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"disable\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Disables Collapse component\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"navbar\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Adds \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"navbar-collapse\"), \" bootstrap class to class name property\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"isOpen\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String or Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Defines if accordion is opened or closed\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"onOpened\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"function\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Defines the function which fires when Accordion has opened\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"onClosed\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"function\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Defines the function which fires when Accordion has closed\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#collapse","title":"Collapse","items":[{"url":"#example","title":"Example"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-collapse-import-statement","title":"Contrast Collapse Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/collapse.mdx"},"frontmatter":{"metaTitle":"Collapse Component for Contrast Bootstrap React","metaDescription":"Building a Collapse 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":"6d3245b8-e510-50ca-8bb4-731dfa6e780d"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}