Stepper

---

Usage

<div class='container-box'>
  <nile-stepper>
    <nile-stepper-item></nile-stepper-item>
    <nile-stepper-item></nile-stepper-item>
    <nile-stepper-item></nile-stepper-item>
  </nile-stepper>
</div>

<style
  .container-box {
    height: auto;
    width: 100%;
    background-color: #fff;
    border: 1px solid #e4e9ea;
    border-radius: 4px;
    padding: 20px 0;
  }
  .flex-vertical{
      display: flex;
      flex-direction: column;
      gap: 30px;
  }
  .flex{
    display: flex;
    justify-content:space-around;
  }
></style>

---

Default Variant (inline)

---

<nile-stepper>
    <nile-stepper-item title="Title 1" subtitle="Subtitle"></nile-stepper-item>
    <nile-stepper-item title="Title 2" subtitle="Subtitle"></nile-stepper-item>
    <nile-stepper-item title="Title 3" subtitle="Subtitle"></nile-stepper-item>
</nile-stepper>

---

Content Below Variant

---

<nile-stepper content-below>
    <nile-stepper-item title="Title 1" subtitle="Subtitle"></nile-stepper-item>
    <nile-stepper-item title="Title 2" subtitle="Subtitle"></nile-stepper-item>
    <nile-stepper-item title="Title 3" subtitle="Subtitle"></nile-stepper-item>
</nile-stepper>

---

Current Step

---

<nile-stepper content-below currentStep="3">
    <nile-stepper-item title="Title 1" subtitle="Subtitle"></nile-stepper-item>
    <nile-stepper-item title="Title 2" subtitle="Subtitle"></nile-stepper-item>
    <nile-stepper-item title="Title 3" subtitle="Subtitle"></nile-stepper-item>
    <nile-stepper-item title="Title 4" subtitle="Subtitle"></nile-stepper-item>
</nile-stepper>

---

Completed Step

---

<nile-stepper content-below completedStep="3" currentStep="2">
    <nile-stepper-item title="Title 1" subtitle="Subtitle"></nile-stepper-item>
    <nile-stepper-item title="Title 2" subtitle="Subtitle"></nile-stepper-item>
    <nile-stepper-item title="Title 3" subtitle="Subtitle"></nile-stepper-item>
    <nile-stepper-item title="Title 4" subtitle="Subtitle"></nile-stepper-item>
</nile-stepper>

---

Size Variants

<div class='container-box flex-vertical'>
  <nile-stepper size='sm'>
    <nile-stepper-item title="Title 1"></nile-stepper-item>
    <nile-stepper-item title="Title 2"></nile-stepper-item>
    <nile-stepper-item title="Title 3"></nile-stepper-item>
  </nile-stepper>
  <nile-stepper size='lg'>
    <nile-stepper-item title="Title 1"></nile-stepper-item>
    <nile-stepper-item title="Title 2"></nile-stepper-item>
    <nile-stepper-item title="Title 3"></nile-stepper-item>
  </nile-stepper>
</div>

---

Nile Vertical Stepper

---

<nile-stepper completedStep="3" vertical currentStep="2">
    <nile-vertical-stepper-item title="Title 1" subtitle="Subtitle"></nile-vertical-stepper-item>
    <nile-vertical-stepper-item title="Title 2" subtitle="Subtitle"></nile-vertical-stepper-item>
    <nile-vertical-stepper-item title="Title 3" subtitle="Subtitle"></nile-vertical-stepper-item>
    <nile-vertical-stepper-item title="Title 4" subtitle="Subtitle"></nile-vertical-stepper-item>
</nile-stepper>

---

Vertical stepper Size Variants

<div class='container-box flex'>
  <nile-stepper vertical size='sm'>
      <nile-vertical-stepper-item title="Title 1" subtitle="Subtitle"></nile-vertical-stepper-item>
      <nile-vertical-stepper-item title="Title 2" subtitle="Subtitle"></nile-vertical-stepper-item>
      <nile-vertical-stepper-item title="Title 3" subtitle="Subtitle"></nile-vertical-stepper-item>
      <nile-vertical-stepper-item title="Title 4" subtitle="Subtitle"></nile-vertical-stepper-item>
  </nile-stepper>
  <nile-stepper vertical size='lg'>
      <nile-vertical-stepper-item title="Title 1" subtitle="Subtitle"></nile-vertical-stepper-item>
      <nile-vertical-stepper-item title="Title 2" subtitle="Subtitle"></nile-vertical-stepper-item>
      <nile-vertical-stepper-item title="Title 3" subtitle="Subtitle"></nile-vertical-stepper-item>
      <nile-vertical-stepper-item title="Title 4" subtitle="Subtitle"></nile-vertical-stepper-item>
  </nile-stepper>
</div>
</div>

---

Properties

Name	Description	Type	Default
content-below (horizontal stepper)	Title and subtitle placement	boolean	false
size	The component's size.	'sm' | 'lg'	'lg'
currentStep	Current active step value. Defaults to 1 if value is not present or is out of range ot number of steps.	Number (0 < currentStep < number of steps)	1
completedStep	Denotes the step till where stepper is complete. Defaults to currentStep value if not present or is out of range ot number of steps.	Number (0 < completedStep < number of steps)	0
vertical	Determines the stepper is vertical or horizontal	boolean	false

---

Slots

Name	Description
(default)	Default slot in nile-stepper to allocate space to nile-stepper-item

---

Events

Name	Description	Event Detail
nile-current-change	Emitted when current step value changes.	new current step value
nile-completed-change	Emitted when completed step value changes	new completed step value

---

Dependencies

nile-icon nile-stepper-item