{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/stepper","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"23d37f74-3390-5fdd-8b41-1d8fce327a6a","title":"Stepper","slug":"/contrast/react/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 React\",\n  \"metaDescription\": \"Building a Stepper Component using the Contrast Bootstrap React Package\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar CDBContainer = makeShortcode(\"CDBContainer\");\nvar CDBStepper = makeShortcode(\"CDBStepper\");\nvar CDBStep = makeShortcode(\"CDBStep\");\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, \"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, \"Stepper can be aligned vertically as well as horizontally.\"), mdx(\"p\", null, \"Examples of React 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 React stepper examples:\"), mdx(\"i\", null), mdx(\"h2\", null, \"Basic Vertical Stepper\"), 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://i.imgur.com/khiy8Dd.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 { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Stepper = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBContainer style={{ height: \\\"500px\\\", width: \\\"150px\\\" }}>\\n              <CDBStepper direction=\\\"vertical\\\">\\n                <CDBStep\\n                  id={1}\\n                  far\\n                  icon=\\\"folder-open\\\"\\n                  name=\\\"Basic Information\\\"\\n                  handleClick={() => this.handleNextPrevClick(1)}\\n                  active={this.state.active}\\n                />\\n                <CDBStep\\n                  id={2}\\n                  icon=\\\"pencil-alt\\\"\\n                  name=\\\"Personal Data\\\"\\n                  handleClick={() => this.handleNextPrevClick(2)}\\n                  active={this.state.active}\\n                />\\n                <CDBStep\\n                  id={3}\\n                  icon=\\\"dragon\\\"\\n                  name=\\\"Terms and Conditions\\\"\\n                  handleClick={() => this.handleNextPrevClick(3)}\\n                  active={this.state.active}\\n                />\\n                <CDBStep\\n                  id={4}\\n                  icon=\\\"check\\\"\\n                  name=\\\"Finish\\\"\\n                  handleClick={() => this.handleNextPrevClick(4)}\\n                  active={this.state.active}\\n                />\\n              </CDBStepper>\\n            </CDBContainer>\\n            <CDBContainer\\n              style={{\\n                height: \\\"500px\\\",\\n                width: \\\"100%\\\",\\n                display: \\\"flex\\\",\\n                alignItems: \\\"center\\\",\\n              }}\\n            >\\n              {this.state.active === 1 && (\\n                <CDBContainer md=\\\"12\\\">\\n                  <h3\\n                    className=\\\"font-weight-bold pl-0 my-4 \\\"\\n                    style={{\\n                      width: \\\"100%\\\",\\n                      fontSize: \\\"30px\\\",\\n                      textAlign: \\\"center\\\",\\n                    }}\\n                  >\\n                    Your Information\\n                  </h3>\\n                  <CDBInput label=\\\"Email\\\" className=\\\"mt-4\\\" />\\n                  <CDBInput label=\\\"username\\\" className=\\\"mt-4\\\" />\\n                  <CDBInput label=\\\"Password\\\" className=\\\"mt-4\\\" />\\n                  <CDBInput label=\\\"Repeat Password\\\" className=\\\"mt-4\\\" />\\n                  <CDBBtn\\n                    color=\\\"dark\\\"\\n                    block\\n                    flat\\n                    className=\\\"float-right\\\"\\n                    onClick={() => this.handleNextPrevClick(2)}\\n                  >\\n                    Next\\n                  </CDBBtn>\\n                </CDBContainer>\\n              )}\\n              {this.state.active === 2 && (\\n                <CDBContainer md=\\\"12\\\">\\n                  <h3\\n                    className=\\\"font-weight-bold pl-0 my-4\\\"\\n                    style={{\\n                      width: \\\"100%\\\",\\n                      fontSize: \\\"30px\\\",\\n                      textAlign: \\\"center\\\",\\n                    }}\\n                  >\\n                    Personal Data\\n                  </h3>\\n                  <CDBInput label=\\\"First Name\\\" className=\\\"mt-3\\\" />\\n                  <CDBInput label=\\\"Second Name\\\" className=\\\"mt-3\\\" />\\n                  <CDBInput label=\\\"Surname\\\" className=\\\"mt-3\\\" />\\n                  <CDBInput label=\\\"Address\\\" type=\\\"textarea\\\" rows=\\\"2\\\" />\\n                  <CDBBtn\\n                    color=\\\"light\\\"\\n                    flat\\n                    className=\\\"float-left\\\"\\n                    onClick={() => this.handleNextPrevClick(1)}\\n                  >\\n                    Previous\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"dark\\\"\\n                    flat\\n                    className=\\\"float-right\\\"\\n                    onClick={() => this.handleNextPrevClick(3)}\\n                  >\\n                    Next\\n                  </CDBBtn>\\n                </CDBContainer>\\n              )}\\n              {this.state.active === 3 && (\\n                <CDBContainer md=\\\"12\\\">\\n                  <h3\\n                    className=\\\"font-weight-bold pl-0 my-4\\\"\\n                    style={{\\n                      width: \\\"100%\\\",\\n                      fontSize: \\\"30px\\\",\\n                      textAlign: \\\"center\\\",\\n                    }}\\n                  >\\n                    Terms and conditions\\n                  </h3>\\n                  <CDBInput\\n                    label=\\\"I agreee to the terms and conditions\\\"\\n                    type=\\\"checkbox\\\"\\n                    id=\\\"checkbox3\\\"\\n                  />\\n                  <CDBInput\\n                    label=\\\"I want to receive newsletter\\\"\\n                    type=\\\"checkbox\\\"\\n                    id=\\\"checkbox4\\\"\\n                  />\\n                  <CDBBtn\\n                    color=\\\"light\\\"\\n                    className=\\\"float-left\\\"\\n                    flat\\n                    onClick={() => this.handleNextPrevClick(2)}\\n                  >\\n                    Previous\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"dark\\\"\\n                    className=\\\"float-right\\\"\\n                    flat\\n                    onClick={() => this.handleNextPrevClick(4)}\\n                  >\\n                    Next\\n                  </CDBBtn>\\n                </CDBContainer>\\n              )}\\n              {this.state.active === 4 && (\\n                <CDBContainer md=\\\"12\\\">\\n                  <h3\\n                    className=\\\"font-weight-bold pl-0 my-4\\\"\\n                    style={{\\n                      width: \\\"100%\\\",\\n                      fontSize: \\\"30px\\\",\\n                      textAlign: \\\"center\\\",\\n                    }}\\n                  >\\n                    Finish\\n                  </h3>\\n                  <h2 className=\\\"text-center font-weight-bold my-4\\\">\\n                    Registration completed!\\n                  </h2>\\n                  <CDBBtn\\n                    color=\\\"light\\\"\\n                    flat\\n                    className=\\\"float-left\\\"\\n                    onClick={() => this.handleNextPrevClick(3)}\\n                  >\\n                    Previous\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"success\\\"\\n                    flat\\n                    className=\\\"float-right\\\"\\n                    onClick={this.handleSubmission}\\n                  >\\n                    submit\\n                  </CDBBtn>\\n                </CDBContainer>\\n              )}\\n            </CDBContainer>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Basic Horizontal Stepper\"), 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://i.imgur.com/eQMikuS.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 { CDBstepper, CDBstep, CDBinput, CDBbtn, CDBcontainer } from \\\"cdbreact\\\";\\n\\nexport const stepper = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBContainer style={{ width: \\\"100%\\\" }}>\\n              <CDBStepper direction=\\\"horizontal\\\">\\n                <CDBStep\\n                  id={1}\\n                  far\\n                  icon=\\\"folder-open\\\"\\n                  name=\\\"Basic Information\\\"\\n                  handleClick={() => this.handleNextPrevClick(1)}\\n                  active={this.state.active}\\n                />\\n                <CDBStep\\n                  id={2}\\n                  icon=\\\"pencil-alt\\\"\\n                  name=\\\"Personal Data\\\"\\n                  handleClick={() => this.handleNextPrevClick(2)}\\n                  active={this.state.active}\\n                />\\n                <CDBStep\\n                  id={3}\\n                  icon=\\\"dragon\\\"\\n                  name=\\\"Terms and Conditions\\\"\\n                  handleClick={() => this.handleNextPrevClick(3)}\\n                  active={this.state.active}\\n                />\\n                <CDBStep\\n                  id={4}\\n                  icon=\\\"check\\\"\\n                  name=\\\"Finish\\\"\\n                  handleClick={() => this.handleNextPrevClick(4)}\\n                  active={this.state.active}\\n                />\\n              </CDBStepper>\\n            </CDBContainer>\\n            <CDBContainer\\n              style={{\\n                height: \\\"500px\\\",\\n                width: \\\"100%\\\",\\n                display: \\\"flex\\\",\\n                alignItems: \\\"center\\\",\\n              }}\\n            >\\n              {this.state.active === 1 && (\\n                <CDBContainer md=\\\"12\\\">\\n                  <h3\\n                    className=\\\"font-weight-bold pl-0 my-4 d-flex justify-content-center\\\"\\n                    style={{\\n                      width: \\\"100%\\\",\\n                      fontSize: \\\"30px\\\",\\n                      textAlign: \\\"center\\\",\\n                    }}\\n                  >\\n                    Your Information\\n                  </h3>\\n                  <CDBInput label=\\\"Email\\\" className=\\\"mt-4\\\" />\\n                  <CDBInput label=\\\"username\\\" className=\\\"mt-4\\\" />\\n                  <CDBInput label=\\\"Password\\\" className=\\\"mt-4\\\" />\\n                  <CDBInput label=\\\"Repeat Password\\\" className=\\\"mt-4\\\" />\\n                  <CDBBtn\\n                    color=\\\"dark\\\"\\n                    block\\n                    flat\\n                    className=\\\"float-right\\\"\\n                    onClick={() => this.handleNextPrevClick(2)}\\n                  >\\n                    Next\\n                  </CDBBtn>\\n                </CDBContainer>\\n              )}\\n              {this.state.active === 2 && (\\n                <CDBContainer md=\\\"12\\\">\\n                  <h3\\n                    className=\\\"font-weight-bold pl-0 my-4\\\"\\n                    style={{\\n                      width: \\\"100%\\\",\\n                      fontSize: \\\"30px\\\",\\n                      textAlign: \\\"center\\\",\\n                    }}\\n                  >\\n                    Personal Data\\n                  </h3>\\n                  <CDBInput label=\\\"First Name\\\" className=\\\"mt-3\\\" />\\n                  <CDBInput label=\\\"Second Name\\\" className=\\\"mt-3\\\" />\\n                  <CDBInput label=\\\"Surname\\\" className=\\\"mt-3\\\" />\\n                  <CDBInput label=\\\"Address\\\" type=\\\"textarea\\\" rows=\\\"2\\\" />\\n                  <CDBBtn\\n                    color=\\\"light\\\"\\n                    flat\\n                    className=\\\"float-left\\\"\\n                    onClick={() => this.handleNextPrevClick(1)}\\n                  >\\n                    Previous\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"dark\\\"\\n                    flat\\n                    className=\\\"float-right\\\"\\n                    onClick={() => this.handleNextPrevClick(3)}\\n                  >\\n                    Next\\n                  </CDBBtn>\\n                </CDBContainer>\\n              )}\\n              {this.state.active === 3 && (\\n                <CDBContainer md=\\\"12\\\">\\n                  <h3\\n                    className=\\\"font-weight-bold pl-0 my-4\\\"\\n                    style={{\\n                      width: \\\"100%\\\",\\n                      fontSize: \\\"30px\\\",\\n                      textAlign: \\\"center\\\",\\n                    }}\\n                  >\\n                    Terms and conditions\\n                  </h3>\\n                  <CDBInput\\n                    label=\\\"I agreee to the terms and conditions\\\"\\n                    type=\\\"checkbox\\\"\\n                    id=\\\"checkbox3\\\"\\n                  />\\n                  <CDBInput\\n                    label=\\\"I want to receive newsletter\\\"\\n                    type=\\\"checkbox\\\"\\n                    id=\\\"checkbox4\\\"\\n                  />\\n                  <CDBBtn\\n                    color=\\\"light\\\"\\n                    className=\\\"float-left\\\"\\n                    flat\\n                    onClick={() => this.handleNextPrevClick(2)}\\n                  >\\n                    Previous\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"dark\\\"\\n                    className=\\\"float-right\\\"\\n                    flat\\n                    onClick={() => this.handleNextPrevClick(4)}\\n                  >\\n                    Next\\n                  </CDBBtn>\\n                </CDBContainer>\\n              )}\\n              {this.state.active === 4 && (\\n                <CDBContainer md=\\\"12\\\">\\n                  <h3\\n                    className=\\\"font-weight-bold pl-0 my-4\\\"\\n                    style={{\\n                      width: \\\"100%\\\",\\n                      fontSize: \\\"30px\\\",\\n                      textAlign: \\\"center\\\",\\n                    }}\\n                  >\\n                    Finish\\n                  </h3>\\n                  <h2 className=\\\"text-center font-weight-bold my-4\\\">\\n                    Registration completed!\\n                  </h2>\\n                  <CDBBtn\\n                    color=\\\"light\\\"\\n                    flat\\n                    className=\\\"float-left\\\"\\n                    onClick={() => this.handleNextPrevClick(3)}\\n                  >\\n                    Previous\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"success\\\"\\n                    flat\\n                    className=\\\"float-right\\\"\\n                    onClick={this.handleSubmission}\\n                  >\\n                    submit\\n                  </CDBBtn>\\n                </CDBContainer>\\n              )}\\n            </CDBContainer>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Stepper Without 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(CDBContainer, {\n    mdxType: \"CDBContainer\"\n  }, mdx(CDBStepper, {\n    direction: \"horizontal\",\n    mdxType: \"CDBStepper\"\n  }, mdx(CDBStep, {\n    name: \"Label 1\",\n    id: 1,\n    mdxType: \"CDBStep\"\n  }), mdx(CDBStep, {\n    name: \"Label 2\",\n    id: 2,\n    mdxType: \"CDBStep\"\n  }), mdx(CDBStep, {\n    name: \"Label 3\",\n    id: 3,\n    mdxType: \"CDBStep\"\n  }), mdx(CDBStep, {\n    name: \"Label 4\",\n    id: 4,\n    mdxType: \"CDBStep\"\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBStepper, CDBStep, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Stepper = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBStepper direction=\\\"horizontal\\\">\\n              <CDBStep name=\\\"Label 1\\\" id={1}/>\\n              <CDBStep name=\\\"Label 2\\\" id={2}/>\\n              <CDBStep name=\\\"Label 3\\\" id={3}/>\\n              <CDBStep name=\\\"Label 4\\\" id={4}/>\\n            </CDBStepper>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Stepper 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 Stepper Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast Stepper component first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Step Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBStep 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  }), \"<CDBStep className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"id\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Number\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Provides an ID for the step\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBStep id={1} ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"far, fab, fas\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Defines Font Awesome style. Recommend to use with icon props\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBStep fas .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"name\"), 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  }), \"Specifies the text content within CDBStep's tooltip which is visible on hover event\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBStep name=\\\"label\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"icon\"), 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  }), \"Defines icon used within CDBStep\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBStep icon=\\\"folder-open\\\" ... />\")))), mdx(\"p\", null, \"API Reference: Contrast Stepper Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBStepper 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  }), \"<CDBStepper direction=\\\"vertical\\\" ... />\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#stepper","title":"Stepper","items":[{"url":"#basic-vertical-stepper","title":"Basic Vertical Stepper"},{"url":"#basic-horizontal-stepper","title":"Basic Horizontal Stepper"},{"url":"#stepper-without-icons","title":"Stepper Without Icons"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-stepper-import-statement","title":"Contrast Stepper Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/stepper.mdx"},"frontmatter":{"metaTitle":"Stepper Component for Contrast Bootstrap React","metaDescription":"Building a Stepper 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":"23d37f74-3390-5fdd-8b41-1d8fce327a6a"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}