{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/stepper","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"ff43b432-2690-5ba6-8a7e-9db2a455868b","title":"Stepper","slug":"/contrast/angular/components/stepper"},"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\": \"Stepper\",\n \"metaTitle\": \"Stepper Component for Contrast Bootstrap Angular\",\n \"metaDescription\": \"Angular Bootstrap Stepper is a component that displays content as a process with defined by user milestones. Following steps are separated and connected by buttons\"\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, \"Stepper\"), mdx(\"p\", null, \"Angular Bootstrap Stepper is a component that displays content as a process with defined by user milestones. Following steps are separated and connected by buttons.\"), mdx(\"p\", null, \"This is a great solution for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.\"), mdx(\"p\", null, \"Contrast Angular Bootstrap Stepper can be aligned vertically as well as horizontally.\"), mdx(\"p\", null, \"Examples of Angular Bootstrap steps use:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Registration form\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Payment gateway\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tutorial with steps\")), mdx(\"p\", null, \"See the following Bootstrap Angular stepper examples:\"), mdx(\"i\", null), mdx(\"h2\", null, \"Basic Vertical Stepper\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://i.imgur.com/khiy8Dd.gif\",\n \"alt\": null\n }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n
\\n
\\n

\\n Your Information\\n

\\n \\n \\n \\n \\n \\n Next\\n \\n
\\n
\\n

\\n Personal Data\\n

\\n \\n \\n \\n \\n \\n Previous\\n \\n \\n Next\\n \\n
\\n
\\n

\\n Terms and conditions\\n

\\n \\n \\n \\n Previous\\n \\n \\n Next\\n \\n
\\n
\\n

\\n Finish\\n

\\n

\\n Registration completed!\\n

\\n \\n Previous\\n \\n \\n submit\\n \\n
\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-typescript\"\n }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n selector: 'app-stepper',\\n templateUrl: './stepper.component.html',\\n styleUrls: ['./stepper.component.scss'],\\n})\\nexport class StepperComponent implements OnInit {\\n active = 1;\\n active2 = 1;\\n\\n handleNextPrevClick(stepper, a) {\\n if (stepper === 1) {\\n this.active = a;\\n } else if (stepper === 2) {\\n this.active2 = a;\\n }\\n }\\n\\n handleSubmission = () => {\\n alert('Form submitted!');\\n };\\n\\n constructor() {}\\n\\n ngOnInit(): void {}\\n}\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Basic Horizontal Stepper\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://i.imgur.com/eQMikuS.gif\",\n \"alt\": null\n }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n
\\n
\\n

\\n Your Information\\n

\\n \\n \\n \\n \\n \\n Next\\n \\n
\\n
\\n

\\n Personal Data\\n

\\n \\n \\n \\n \\n \\n Previous\\n \\n \\n Next\\n \\n
\\n
\\n

\\n Terms and conditions\\n

\\n \\n \\n \\n Previous\\n \\n \\n Next\\n \\n
\\n
\\n

\\n Finish\\n

\\n

\\n Registration completed!\\n

\\n \\n Previous\\n \\n \\n submit\\n \\n
\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-typescript\"\n }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n selector: 'app-stepper',\\n templateUrl: './stepper.component.html',\\n styleUrls: ['./stepper.component.scss'],\\n})\\nexport class StepperComponent implements OnInit {\\n active = 1;\\n active2 = 1;\\n\\n handleNextPrevClick(stepper, a) {\\n if (stepper === 1) {\\n this.active = a;\\n } else if (stepper === 2) {\\n this.active2 = a;\\n }\\n }\\n\\n handleSubmission = () => {\\n alert('Form submitted!');\\n };\\n\\n constructor() {}\\n\\n ngOnInit(): void {}\\n}\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Stepper Without Icons\"), mdx(\"p\", null, mdx(\"span\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }), \"\\n \", mdx(\"a\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/4d54798069f721c433bf6a2ba19486b2/3a5d5/stepper.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"\\n \", mdx(\"span\", _extends({\n parentName: \"a\"\n }, {\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"7.722007722007722%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAUklEQVQI12WLsQoAIQxD/ez+nYN7P8Gpi1s3S6nmuMKBeIFAyEtKROD0KyJCrTWzu//4GAOqmvn+FzPD5zlnjlprEJEc3HzvDWZG7x1rrexO/gBJF5kW17U1PwAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n })), \"\\n \", mdx(\"img\", _extends({\n parentName: \"a\"\n }, {\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"image info\",\n \"title\": \"image info\",\n \"src\": \"/static/4d54798069f721c433bf6a2ba19486b2/e3189/stepper.png\",\n \"srcSet\": [\"/static/4d54798069f721c433bf6a2ba19486b2/a2ead/stepper.png 259w\", \"/static/4d54798069f721c433bf6a2ba19486b2/6b9fd/stepper.png 518w\", \"/static/4d54798069f721c433bf6a2ba19486b2/e3189/stepper.png 1035w\", \"/static/4d54798069f721c433bf6a2ba19486b2/44d59/stepper.png 1553w\", \"/static/4d54798069f721c433bf6a2ba19486b2/3a5d5/stepper.png 1807w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n })), \"\\n \"), \"\\n \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"\\n \\n \\n \\n \\n\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-typescript\"\n }), \"import { Component, OnInit } from '@angular/core';\\n\\n@Component({\\n selector: 'app-stepper',\\n templateUrl: './stepper.component.html',\\n styleUrls: ['./stepper.component.scss'],\\n})\\nexport class StepperComponent implements OnInit {\\n active = 1;\\n active2 = 1;\\n\\n handleNextPrevClick(stepper, a) {\\n if (stepper === 1) {\\n this.active = a;\\n } else if (stepper === 2) {\\n this.active2 = a;\\n }\\n }\\n\\n handleSubmission = () => {\\n alert('Form submitted!');\\n };\\n\\n constructor() {}\\n\\n ngOnInit(): void {}\\n}\\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 Stepper Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-typescript\"\n }), \"import {StepperModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Stepper Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Stepper 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 }), \"direction\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"horizontal\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"Required!\"), \" Controls the orientation of generated stepper. Can be either \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"vertical\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"horizontal\")), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"direction=\\\"vertical\\\"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#stepper","title":"Stepper","items":[{"url":"#basic-vertical-stepper","title":"Basic Vertical Stepper","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"},{"url":"#typescript","title":"typescript"}]}]}]}]},{"url":"#basic-horizontal-stepper","title":"Basic Horizontal Stepper","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"},{"url":"#typescript-1","title":"typescript"}]}]}]}]},{"url":"#stepper-without-icons","title":"Stepper Without Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"},{"url":"#typescript-2","title":"typescript"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-stepper-bootstrap-modules-used","title":"Contrast Stepper Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/components/stepper.md"},"frontmatter":{"metaTitle":"Stepper Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap Stepper is a component that displays content as a process with defined by user milestones. Following steps are separated and connected by buttons"}},"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":"ff43b432-2690-5ba6-8a7e-9db2a455868b"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}