Files
Badarinath Venkatnarayansetty c701255d79 Task/provide option for custom padding (#88)
* Providing option for custom spacing

* Updating Jazzy docs

Co-authored-by: Badarinath Venkatnarayansetty <Badarinath_Venkatnarayansetty@intuit.com>
2021-08-26 11:49:35 -07:00

558 lines
53 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<title>StepperView Reference</title>
<link rel="stylesheet" type="text/css" href="css/jazzy.css" />
<link rel="stylesheet" type="text/css" href="css/highlight.css" />
<meta charset='utf-8'>
<script src="js/jquery.min.js" defer></script>
<script src="js/jazzy.js" defer></script>
<script src="js/lunr.min.js" defer></script>
<script src="js/typeahead.jquery.js" defer></script>
<script src="js/jazzy.search.js" defer></script>
</head>
<body>
<a title="StepperView Reference"></a>
<header>
<div class="content-wrapper">
<p><a href="index.html">StepperView 1.6.6 Docs</a> (100% documented)</p>
<p class="header-right">
<form role="search" action="search.json">
<input type="text" placeholder="Search documentation" data-typeahead>
</form>
</p>
</div>
</header>
<div class="content-wrapper">
<p id="breadcrumbs">
<a href="index.html">StepperView Reference</a>
<img id="carat" src="img/carat.png" />
StepperView Reference
</p>
</div>
<div class="content-wrapper">
<nav class="sidebar">
<ul class="nav-groups">
<li class="nav-group-name">
<a href="Classes.html">Classes</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="Classes/LoadingTimer.html">LoadingTimer</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="Enums.html">Enumerations</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="Enums/Colors.html">Colors</a>
</li>
<li class="nav-group-task">
<a href="Enums/Colors/GraySubType.html"> GraySubType</a>
</li>
<li class="nav-group-task">
<a href="Enums/Colors/GreenSubType.html"> GreenSubType</a>
</li>
<li class="nav-group-task">
<a href="Enums/Colors/BlueSubType.html"> BlueSubType</a>
</li>
<li class="nav-group-task">
<a href="Enums/Colors/YellowSubType.html"> YellowSubType</a>
</li>
<li class="nav-group-task">
<a href="Enums/Colors/RedSubType.html"> RedSubType</a>
</li>
<li class="nav-group-task">
<a href="Enums/StepLifeCycle.html">StepLifeCycle</a>
</li>
<li class="nav-group-task">
<a href="Enums/StepperAlignment.html">StepperAlignment</a>
</li>
<li class="nav-group-task">
<a href="Enums/StepperIndicationType.html">StepperIndicationType</a>
</li>
<li class="nav-group-task">
<a href="Enums/StepperLineOptions.html">StepperLineOptions</a>
</li>
<li class="nav-group-task">
<a href="Enums/StepperMode.html">StepperMode</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="Extensions.html">Extensions</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="Extensions/EnvironmentValues.html">EnvironmentValues</a>
</li>
<li class="nav-group-task">
<a href="Extensions/VerticalAlignment.html">VerticalAlignment</a>
</li>
<li class="nav-group-task">
<a href="Extensions/View.html">View</a>
</li>
</ul>
</li>
<li class="nav-group-name">
<a href="Structs.html">Structures</a>
<ul class="nav-group-tasks">
<li class="nav-group-task">
<a href="Structs/AlignmentKey.html">AlignmentKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/AnimatedCircle.html">AnimatedCircle</a>
</li>
<li class="nav-group-task">
<a href="Structs/AutoSpacingKey.html">AutoSpacingKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/BoundsPreferenceKey.html">BoundsPreferenceKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/CGRectData.html">CGRectData</a>
</li>
<li class="nav-group-task">
<a href="Structs/CGRectPreferenceKey.html">CGRectPreferenceKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/CircledIconView.html">CircledIconView</a>
</li>
<li class="nav-group-task">
<a href="Structs/HeightKey.html">HeightKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/HeightPreference.html">HeightPreference</a>
</li>
<li class="nav-group-task">
<a href="Structs/HorizontalLineView.html">HorizontalLineView</a>
</li>
<li class="nav-group-task">
<a href="Structs/IndicatorKey.html">IndicatorKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/IndicatorView.html">IndicatorView</a>
</li>
<li class="nav-group-task">
<a href="Structs/LineOptionsKey.html">LineOptionsKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/LoadAnimationOptionsKey.html">LoadAnimationOptionsKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/NumberedCircleView.html">NumberedCircleView</a>
</li>
<li class="nav-group-task">
<a href="Structs/PitStopLineOptionsKey.html">PitStopLineOptionsKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/PitStopLineView.html">PitStopLineView</a>
</li>
<li class="nav-group-task">
<a href="Structs/PitStopOptionsKey.html">PitStopOptionsKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/PitStopView.html">PitStopView</a>
</li>
<li class="nav-group-task">
<a href="Structs/PitstopHeightPreference.html">PitstopHeightPreference</a>
</li>
<li class="nav-group-task">
<a href="Structs/SpacingKey.html">SpacingKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/StepAnimationOptionsKey.html">StepAnimationOptionsKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/StepIndicatorHorizontalView.html">StepIndicatorHorizontalView</a>
</li>
<li class="nav-group-task">
<a href="Structs/StepIndicatorModeKey.html">StepIndicatorModeKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/StepIndicatorVerticalView.html">StepIndicatorVerticalView</a>
</li>
<li class="nav-group-task">
<a href="Structs/StepLifeCycleKey.html">StepLifeCycleKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/StepperEdgeInsetsKey.html">StepperEdgeInsetsKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/StepperView.html">StepperView</a>
</li>
<li class="nav-group-task">
<a href="Structs/StepsKey.html">StepsKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/TextView.html">TextView</a>
</li>
<li class="nav-group-task">
<a href="Structs/Utils.html">Utils</a>
</li>
<li class="nav-group-task">
<a href="Structs/VerticalHeightPreference.html">VerticalHeightPreference</a>
</li>
<li class="nav-group-task">
<a href="Structs/VerticalLineView.html">VerticalLineView</a>
</li>
<li class="nav-group-task">
<a href="Structs/WidthKey.html">WidthKey</a>
</li>
<li class="nav-group-task">
<a href="Structs/WidthPreference.html">WidthPreference</a>
</li>
</ul>
</li>
</ul>
</nav>
<article class="main-content">
<section>
<section class="section">
<h1 id='stepperview' class='heading'>StepperView</h1>
<h4 id='swiftui-ios-component-for-step-indications' class='heading'>SwiftUI iOS component for Step Indications</h4>
<p><a href="https://travis-ci.org/badrinathvm/StepperView"><img src="https://img.shields.io/travis/badrinathvm/StepperView.svg?style=flat" alt="CI Status"></a>
<a href="https://cocoapods.org/pods/StepperView"><img src="https://img.shields.io/cocoapods/l/StepperView.svg?style=flat" alt="License"></a>
<a href="https://cocoapods.org/pods/StepperView"><img src="https://img.shields.io/badge/platform-ios-orange" alt="Platform"></a>
<a href="https://cocoapods.org/pods/StepperView"><img src="https://img.shields.io/cocoapods/v/StepperView.svg?style=flat" alt="Version"></a>
<a href="https://swift.org/package-manager/"><img src="https://img.shields.io/badge/Swift%20Package%20Manager-compatible-orange" alt="Swift Package Manager compatible"></a>
<a href="https://github.com/Carthage/Carthage"><img src="https://img.shields.io/badge/Carthage-compatible-orange" alt="Carthage compatible"></a>
<a href="https://badrinathvm.github.io/StepperView/"><img src="https://img.shields.io/badge/documentation-100%25-normalgreen" alt="documentation"></a>
<a href="https://twitter.com/intent/tweet?text=SwiftUI%20iOS%20library%20for%20StepIndications%20is%20awesome:&url=https%3A%2F%2Fgithub.com%2Fbadrinathvm%2FStepperView"><img src="https://img.shields.io/twitter/url/https/github.com/Juanpe/About-SwiftUI.svg?style=social" alt="Twitter"></a></p>
<p><br/></p>
<p align="center">
<img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/structure.png" height="450" alt="StepperView"/>
</p>
<p><br/></p>
<p align="center">
<img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/StepperViewLineLifeCycle.png" alt="StepperViewLineLifeCycle"/>
</p>
<h1 id='table-of-contents' class='heading'>Table of Contents</h1>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#documentation">Documentation</a></li>
<li><a href="#installation">Installation</a>
<ul>
<li><a href="#cocoapods">CocoaPods</a></li>
<li><a href="#carthage">Carthage</a></li>
<li><a href="#swift-package-manager">Swift Package Manager</a></li>
</ul></li>
<li><a href="#requirements">Requirements</a></li>
<li><a href="#usecase">Usecase</a>
<ul>
<li><a href="#iphone">iPhone</a></li>
<li><a href="#apple-watch-support">Apple Watch</a></li>
<li><a href="#more-examples">More Examples</a></li>
</ul></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#view-modifiers">View Modifiers</a></li>
<li><a href="#custom-step-indicators">Custom Step Indicators</a>
<ul>
<li><a href="#numberedcircleview">NumberedCircleView</a></li>
<li><a href="#circlediconview">CircledIconView</a></li>
</ul></li>
<li><a href="#mentions">Mentions</a></li>
<li><a href="#contribution">Contribution</a></li>
<li><a href="#license">License</a></li>
</ul>
<h2 id='features' class='heading'>Features</h2>
<ul>
<li>Support for Vertical and Horizontal Alignments.</li>
<li>iOS and WatchOS capabilities</li>
<li>Support for Circle, Image, Custom View, Animated Step Indicators</li>
<li>Customizable line,spacing &amp; animation options.</li>
<li>Pitstop feature to add intermediate stages between Step Indicators</li>
<li>Support for updating the life cycle status for each of the steps</li>
</ul>
<h2 id='documentation' class='heading'>Documentation</h2>
<p><strong><a href="https://badrinathvm.github.io/StepperView/">StepperView Reference</a></strong></p>
<h2 id='installation' class='heading'>Installation</h2>
<p>To run the example project, clone the repo, and run <code>pod install</code> from the Example directory first.</p>
<h2 id='cocoapods' class='heading'>CocoaPods</h2>
<p>StepperView is available through <a href="https://cocoapods.org">CocoaPods</a>. To install
it, simply add the following line to your Podfile.</p>
<pre class="highlight ruby"><code><span class="n">pod</span> <span class="s1">'StepperView'</span><span class="p">,</span><span class="s1">'~&gt; 1.6.7'</span>
</code></pre>
<h2 id='carthage' class='heading'>Carthage</h2>
<p><a href="https://github.com/Carthage/Carthage">Carthage</a> is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks. To integrate StepperView into your Xcode project using Carthage, specify it in your Cartfile:</p>
<pre class="highlight ruby"><code><span class="n">github</span> <span class="s2">"badrinathvm/stepperView"</span> <span class="o">==</span> <span class="mi">1</span><span class="o">.</span><span class="mi">6</span><span class="o">.</span><span class="mi">7</span>
</code></pre>
<h2 id='swift-package-manager' class='heading'>Swift Package Manager</h2>
<p>StepperView is available through <a href="https://swift.org/package-manager/">Swift Package Manager</a>. To install it, simply add it to the <code>dependencies</code> of your <code>Package.swift</code></p>
<pre class="highlight ruby"><code><span class="ss">dependencies: </span><span class="p">[</span>
<span class="p">.</span><span class="nf">package</span><span class="p">(</span><span class="ss">url: </span><span class="s2">"https://github.com/badrinathvm/StepperView.git"</span><span class="p">,</span> <span class="ss">from: </span><span class="s2">"1.6.7"</span><span class="p">)</span>
<span class="p">]</span>
</code></pre>
<h2 id='requirements' class='heading'>Requirements</h2>
<ul>
<li>iOS 13.0+</li>
<li>Xcode 11.2+</li>
<li>Swift 5.0+</li>
<li>CocoaPods 1.6.1+</li>
</ul>
<h2 id='usecase' class='heading'>Usecase</h2>
<table>
<tr>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/example1.png" width="250" alt="example1" align="center"/></td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/example2.png" width="250" alt="example2" align="center"/></td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/example3.png" width="250" alt="example2" align="center"/></td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/Indicator_Animation.gif" width="250" alt="example2" align="center"/></td>
</tr>
</table>
<table>
<tr>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/lifecycle1.png" alt="lifecycle1" align="center"/></td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/lifecycle2.png" alt="lifecycle2" align="center"/></td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/lifecycle3.png" alt="lifecycle3" align="center"/></td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/lifecycle4.png" alt="lifecycle3" align="center"/></td>
</tr>
</table>
<h2 id='iphone' class='heading'>iPhone</h2>
<table>
<tr>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/stepperView_with_usecases.gif" width="250" alt="StepperView" align="left"/> </td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/stepperView_pitStops.gif" width="250" alt="StepperViewWithPitStops" align = "center"/> </td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/stepperView_multiple_options.gif" width="250" alt="StepperViewWithMultipleOptions" align = "center"/> </td>
</tr>
</table>
<h2 id='apple-watch-support' class='heading'>Apple Watch Support</h2>
<table>
<tr>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/Watch_StepperView_1.png" width="250" alt="Watch_StepperView_Vertical" align="center"/></td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/Watch_StepperView_2.png" width="250" alt="Watch_StepperView_Icon" align="center"/></td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/Watch_StepperView_3.png" width="250" alt="Watch_StepperView_Horizontal" align="center"/></td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/Watch_StepperView_4.png" width="250" alt="Watch_StepperView_Pitstop" align="center"/></td>
</tr>
</table>
<h2 id='view-modifiers' class='heading'>View Modifiers</h2>
<pre class="highlight ruby"><code><span class="p">.</span><span class="nf">addSteps</span><span class="p">(</span><span class="n">_</span> <span class="ss">steps: </span><span class="p">[</span><span class="no">View</span><span class="p">])</span> <span class="p">:</span>
<span class="mi">1</span><span class="p">.</span> <span class="nf">list</span> <span class="n">of</span> <span class="n">views</span> <span class="n">to</span> <span class="n">be</span> <span class="n">closer</span> <span class="n">to</span> <span class="n">indicator</span>
<span class="p">.</span><span class="nf">alignments</span><span class="p">(</span><span class="n">_</span> <span class="ss">alignments: </span><span class="p">[</span><span class="no">StepperAlignment</span><span class="p">])</span>
<span class="mi">1</span><span class="p">.</span> <span class="nf">optional</span> <span class="n">modifier</span>
<span class="mi">2</span><span class="p">.</span> <span class="nf">defaults</span> <span class="n">to</span> <span class="p">.</span><span class="nf">center</span><span class="p">,</span> <span class="n">available</span> <span class="n">with</span> <span class="n">custom</span> <span class="n">options</span> <span class="n">either</span> <span class="p">.</span><span class="nf">top</span><span class="p">,</span> <span class="p">.</span><span class="nf">center</span><span class="p">,</span> <span class="p">.</span><span class="nf">bottom</span>
<span class="p">.</span><span class="nf">indicatorTypes</span><span class="p">(</span><span class="n">_</span> <span class="n">indicators</span><span class="p">:[</span><span class="no">StepperIndicationType</span><span class="p">]):</span>
<span class="mi">1</span><span class="p">.</span> <span class="nf">modifier</span> <span class="n">to</span> <span class="n">customize</span> <span class="n">the</span> <span class="n">step</span> <span class="n">indications</span>
<span class="mi">2</span><span class="p">.</span> <span class="nf">provides</span> <span class="n">enum</span> <span class="n">with</span> <span class="n">cases</span> <span class="p">.</span><span class="nf">circle</span><span class="p">(</span><span class="n">color</span><span class="p">,</span> <span class="n">width</span><span class="p">),</span> <span class="p">.</span><span class="nf">image</span><span class="p">(</span><span class="no">Image</span><span class="p">,</span> <span class="n">width</span><span class="p">),</span> <span class="p">.</span><span class="nf">custom</span><span class="p">(</span><span class="no">AnyView</span><span class="p">),</span> <span class="p">.</span><span class="nf">animation</span><span class="p">(</span><span class="no">AnyView</span><span class="p">)</span>
<span class="p">.</span><span class="nf">lineOptions</span><span class="p">(</span><span class="n">_</span> <span class="ss">options: </span><span class="no">StepperLineOptions</span><span class="p">):</span>
<span class="mi">1</span><span class="p">.</span> <span class="nf">line</span> <span class="n">customization</span> <span class="sb">`color`</span> <span class="p">,</span> <span class="sb">`width`</span> <span class="p">,</span> <span class="sb">`corner radius`</span>
<span class="mi">2</span><span class="o">.</span> <span class="no">Has</span> <span class="n">option</span> <span class="n">of</span> <span class="sb">`defaults`</span><span class="p">,</span> <span class="sb">`custom`</span> <span class="p">,</span> <span class="sb">`rounded`</span>
<span class="p">.</span><span class="nf">spacing</span><span class="p">(</span><span class="n">_</span> <span class="ss">value: </span><span class="no">CGFloat</span><span class="p">):</span>
<span class="mi">1</span><span class="p">.</span> <span class="nf">spacing</span> <span class="n">between</span> <span class="n">each</span> <span class="n">of</span> <span class="n">the</span> <span class="n">step</span> <span class="n">views</span> <span class="n">either</span> <span class="n">vertically</span> <span class="n">horizontally</span>
<span class="p">.</span><span class="nf">autoSpacing</span><span class="p">(</span><span class="n">_</span> <span class="ss">value: </span><span class="no">Bool</span><span class="p">):</span>
<span class="mi">1</span><span class="p">.</span> <span class="nf">if</span> <span class="n">set</span> <span class="n">to</span> <span class="sb">`true`</span> <span class="o">-</span> <span class="no">Dynamically</span> <span class="n">calculates</span> <span class="n">the</span> <span class="n">spacing</span> <span class="n">between</span> <span class="n">each</span> <span class="n">of</span> <span class="n">the</span> <span class="n">steps</span><span class="p">.</span>
<span class="nf">.</span><span class="n">stepIndicatorMode</span><span class="p">(</span><span class="n">_</span> <span class="ss">mode: </span><span class="no">StepperMode</span><span class="p">):</span>
<span class="mi">1</span><span class="o">.</span> <span class="no">Step</span> <span class="no">Indicator</span> <span class="nb">display</span> <span class="n">modes</span> <span class="n">either</span> <span class="n">vertical</span><span class="p">,</span> <span class="n">horizontal</span>
<span class="p">.</span><span class="nf">loadingAnimationTime</span><span class="p">(</span><span class="n">_</span> <span class="ss">time: </span><span class="no">Double</span><span class="p">):</span>
<span class="mi">1</span><span class="p">.</span> <span class="nf">controls</span> <span class="n">the</span> <span class="n">speed</span> <span class="n">of</span> <span class="n">the</span> <span class="n">animation</span> <span class="k">for</span> <span class="n">step</span> <span class="no">Indicator</span>
<span class="p">.</span><span class="nf">stepLifeCycles</span><span class="p">(</span><span class="n">_</span> <span class="ss">lifecycle: </span><span class="p">[</span><span class="no">StepLifeCycle</span><span class="p">]):</span>
<span class="mi">1</span><span class="o">.</span> <span class="no">Can</span> <span class="n">set</span> <span class="n">the</span> <span class="n">life</span> <span class="n">cycle</span> <span class="n">status</span> <span class="k">for</span> <span class="n">each</span> <span class="n">of</span> <span class="n">the</span> <span class="n">step</span> <span class="n">as</span> <span class="sb">`completed`</span><span class="p">,</span> <span class="sb">`pending`</span>
<span class="p">.</span><span class="nf">addPitStops</span><span class="p">(</span><span class="n">_</span> <span class="ss">steps: </span><span class="p">[</span><span class="no">View</span><span class="p">]):</span>
<span class="mi">1</span><span class="p">.</span> <span class="nf">optional</span> <span class="n">modifier</span>
<span class="mi">2</span><span class="p">.</span> <span class="nf">list</span> <span class="n">of</span> <span class="n">views</span> <span class="n">which</span> <span class="n">will</span> <span class="n">be</span> <span class="n">displayed</span> <span class="n">below</span> <span class="n">the</span> <span class="n">step</span> <span class="n">text</span>
<span class="p">.</span><span class="nf">pitStopLineOptions</span><span class="p">(</span><span class="n">_</span> <span class="ss">options: </span><span class="p">[</span><span class="no">StepperLineOptions</span><span class="p">])</span>
<span class="mi">1</span><span class="p">.</span> <span class="nf">line</span> <span class="n">customization</span> <span class="sb">`color`</span> <span class="p">,</span> <span class="sb">`width`</span> <span class="p">,</span> <span class="sb">`corner radius`</span>
<span class="p">.</span><span class="nf">stepperEdgeInsets</span><span class="p">(</span><span class="n">_</span> <span class="ss">value: </span><span class="no">EdgeInsets</span><span class="p">)</span>
<span class="mi">1</span><span class="o">.</span> <span class="no">Provides</span> <span class="n">custiom</span> <span class="sb">`leading`</span><span class="p">,</span> <span class="sb">`trailing`</span><span class="p">,</span> <span class="sb">`top`</span> <span class="o">&amp;</span> <span class="sb">`bottom`</span> <span class="n">spacing</span><span class="o">.</span>
</code></pre>
<h2 id='usage' class='heading'>Usage</h2>
<p align="center">
<img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/StepperView_1.png" height="250" alt="Vertical Stepper View" align="center"/>
</p>
<pre class="highlight swift"><code><span class="kd">import</span> <span class="kt">StepperView</span>
<span class="k">let</span> <span class="nv">steps</span> <span class="o">=</span> <span class="p">[</span> <span class="kt">Text</span><span class="p">(</span><span class="s">"Cart"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">caption</span><span class="p">),</span>
<span class="kt">Text</span><span class="p">(</span><span class="s">"Delivery Address"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">caption</span><span class="p">),</span>
<span class="kt">Text</span><span class="p">(</span><span class="s">"Order Summary"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">caption</span><span class="p">),</span>
<span class="kt">Text</span><span class="p">(</span><span class="s">"Payment Method"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">caption</span><span class="p">),</span>
<span class="kt">Text</span><span class="p">(</span><span class="s">"Track"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">caption</span><span class="p">)]</span>
<span class="k">let</span> <span class="nv">indicationTypes</span> <span class="o">=</span> <span class="p">[</span><span class="kt">StepperIndicationType</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">NumberedCircleView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span> <span class="s">"1"</span><span class="p">)),</span>
<span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">NumberedCircleView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span> <span class="s">"2"</span><span class="p">)),</span>
<span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">NumberedCircleView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span> <span class="s">"3"</span><span class="p">)),</span>
<span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">NumberedCircleView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span> <span class="s">"4"</span><span class="p">)),</span>
<span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">NumberedCircleView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span> <span class="s">"5"</span><span class="p">))]</span>
<span class="k">var</span> <span class="nv">body</span><span class="p">:</span> <span class="n">some</span> <span class="kt">View</span> <span class="p">{</span>
<span class="kt">StepperView</span><span class="p">()</span>
<span class="o">.</span><span class="nf">addSteps</span><span class="p">(</span><span class="n">steps</span><span class="p">)</span>
<span class="o">.</span><span class="nf">indicators</span><span class="p">(</span><span class="n">indicationTypes</span><span class="p">)</span>
<span class="o">.</span><span class="nf">stepIndicatorMode</span><span class="p">(</span><span class="kt">StepperMode</span><span class="o">.</span><span class="n">vertical</span><span class="p">)</span>
<span class="o">.</span><span class="nf">spacing</span><span class="p">(</span><span class="mi">30</span><span class="p">)</span>
<span class="o">.</span><span class="nf">lineOptions</span><span class="p">(</span><span class="kt">StepperLineOptions</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kt">Colors</span><span class="o">.</span><span class="nf">blue</span><span class="p">(</span><span class="o">.</span><span class="n">teal</span><span class="p">)</span><span class="o">.</span><span class="n">rawValue</span><span class="p">))</span>
<span class="p">}</span>
</code></pre>
<p align="center">
<img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/StepperView_2.png" height="250" alt="Horizontal Stepper View" align="center"/>
</p>
<pre class="highlight swift"><code><span class="kd">import</span> <span class="kt">StepperView</span>
<span class="k">let</span> <span class="nv">steps</span> <span class="o">=</span> <span class="p">[</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span> <span class="s">"Card details"</span><span class="p">,</span> <span class="nv">font</span><span class="p">:</span> <span class="kt">Font</span><span class="o">.</span><span class="nf">system</span><span class="p">(</span><span class="nv">size</span><span class="p">:</span> <span class="mi">12</span><span class="p">,</span> <span class="nv">weight</span><span class="p">:</span> <span class="kt">Font</span><span class="o">.</span><span class="kt">Weight</span><span class="o">.</span><span class="n">regular</span><span class="p">)),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span> <span class="s">"Application review"</span><span class="p">,</span> <span class="nv">font</span><span class="p">:</span> <span class="kt">Font</span><span class="o">.</span><span class="nf">system</span><span class="p">(</span><span class="nv">size</span><span class="p">:</span> <span class="mi">12</span><span class="p">,</span> <span class="nv">weight</span><span class="p">:</span> <span class="kt">Font</span><span class="o">.</span><span class="kt">Weight</span><span class="o">.</span><span class="n">regular</span><span class="p">)),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span> <span class="s">"Authenticate OTP"</span><span class="p">,</span> <span class="nv">font</span><span class="p">:</span> <span class="kt">Font</span><span class="o">.</span><span class="nf">system</span><span class="p">(</span><span class="nv">size</span><span class="p">:</span> <span class="mi">12</span><span class="p">,</span> <span class="nv">weight</span><span class="p">:</span> <span class="kt">Font</span><span class="o">.</span><span class="kt">Weight</span><span class="o">.</span><span class="n">regular</span><span class="p">)),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span> <span class="s">"Create password"</span><span class="p">,</span> <span class="nv">font</span><span class="p">:</span> <span class="kt">Font</span><span class="o">.</span><span class="nf">system</span><span class="p">(</span><span class="nv">size</span><span class="p">:</span> <span class="mi">12</span><span class="p">,</span> <span class="nv">weight</span><span class="p">:</span> <span class="kt">Font</span><span class="o">.</span><span class="kt">Weight</span><span class="o">.</span><span class="n">regular</span><span class="p">))</span>
<span class="p">]</span>
<span class="k">let</span> <span class="nv">indicators</span> <span class="o">=</span> <span class="p">[</span>
<span class="kt">StepperIndicationType</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">Image</span><span class="p">(</span><span class="nv">systemName</span><span class="p">:</span><span class="s">"1.circle.fill"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">largeTitle</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">()),</span>
<span class="kt">StepperIndicationType</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">Image</span><span class="p">(</span><span class="nv">systemName</span><span class="p">:</span><span class="s">"2.circle.fill"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">largeTitle</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">()),</span>
<span class="kt">StepperIndicationType</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">Image</span><span class="p">(</span><span class="nv">systemName</span><span class="p">:</span><span class="s">"3.circle.fill"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">largeTitle</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">()),</span>
<span class="kt">StepperIndicationType</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">Image</span><span class="p">(</span><span class="nv">systemName</span><span class="p">:</span><span class="s">"4.circle.fill"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">largeTitle</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">())</span>
<span class="p">]</span>
<span class="k">var</span> <span class="nv">body</span><span class="p">:</span> <span class="n">some</span> <span class="kt">View</span> <span class="p">{</span>
<span class="kt">StepperView</span><span class="p">()</span>
<span class="o">.</span><span class="nf">addSteps</span><span class="p">(</span><span class="n">steps</span><span class="p">)</span>
<span class="o">.</span><span class="nf">indicators</span><span class="p">(</span><span class="n">indicators</span><span class="p">)</span>
<span class="o">.</span><span class="nf">stepIndicatorMode</span><span class="p">(</span><span class="kt">StepperMode</span><span class="o">.</span><span class="n">horizontal</span><span class="p">)</span>
<span class="o">.</span><span class="nf">lineOptions</span><span class="p">(</span><span class="kt">StepperLineOptions</span><span class="o">.</span><span class="nf">rounded</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="kt">Color</span><span class="o">.</span><span class="n">black</span><span class="p">))</span>
<span class="o">.</span><span class="nf">stepLifeCycles</span><span class="p">([</span><span class="kt">StepLifeCycle</span><span class="o">.</span><span class="n">completed</span><span class="p">,</span> <span class="o">.</span><span class="n">completed</span><span class="p">,</span> <span class="o">.</span><span class="n">completed</span><span class="p">,</span> <span class="o">.</span><span class="n">pending</span><span class="p">])</span>
<span class="o">.</span><span class="nf">spacing</span><span class="p">(</span><span class="mi">50</span><span class="p">)</span>
<span class="p">}</span>
</code></pre>
<p align="center">
<img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/StepperView_3.png" height="250" alt="Pitstop Stepper View" align="center"/>
</p>
<pre class="highlight swift"><code>
<span class="k">let</span> <span class="nv">steps</span> <span class="o">=</span> <span class="p">[</span><span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span><span class="s">"Manage Tasks"</span><span class="p">,</span> <span class="nv">font</span><span class="p">:</span> <span class="o">.</span><span class="nf">system</span><span class="p">(</span><span class="nv">size</span><span class="p">:</span> <span class="mi">14</span><span class="p">,</span> <span class="nv">weight</span><span class="p">:</span> <span class="o">.</span><span class="n">semibold</span><span class="p">)),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span><span class="s">"Branch"</span><span class="p">,</span> <span class="nv">font</span><span class="p">:</span> <span class="o">.</span><span class="nf">system</span><span class="p">(</span><span class="nv">size</span><span class="p">:</span> <span class="mi">14</span><span class="p">,</span> <span class="nv">weight</span><span class="p">:</span> <span class="o">.</span><span class="n">semibold</span><span class="p">)),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span><span class="s">"Commit"</span><span class="p">,</span> <span class="nv">font</span><span class="p">:</span> <span class="o">.</span><span class="nf">system</span><span class="p">(</span><span class="nv">size</span><span class="p">:</span> <span class="mi">14</span><span class="p">,</span> <span class="nv">weight</span><span class="p">:</span> <span class="o">.</span><span class="n">semibold</span><span class="p">)),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span><span class="s">"Code review"</span><span class="p">,</span> <span class="nv">font</span><span class="p">:</span> <span class="o">.</span><span class="nf">system</span><span class="p">(</span><span class="nv">size</span><span class="p">:</span> <span class="mi">14</span><span class="p">,</span> <span class="nv">weight</span><span class="p">:</span> <span class="o">.</span><span class="n">semibold</span><span class="p">)),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span><span class="s">"Merge and release"</span><span class="p">,</span> <span class="nv">font</span><span class="p">:</span> <span class="o">.</span><span class="nf">system</span><span class="p">(</span><span class="nv">size</span><span class="p">:</span> <span class="mi">14</span><span class="p">,</span> <span class="nv">weight</span><span class="p">:</span> <span class="o">.</span><span class="n">semibold</span><span class="p">))]</span>
<span class="k">let</span> <span class="nv">indicators</span> <span class="o">=</span> <span class="p">[</span>
<span class="kt">StepperIndicationType</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">Image</span><span class="p">(</span><span class="nv">systemName</span><span class="p">:</span><span class="s">"1.circle.fill"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">largeTitle</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">()),</span>
<span class="kt">StepperIndicationType</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">Image</span><span class="p">(</span><span class="nv">systemName</span><span class="p">:</span><span class="s">"2.circle.fill"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">largeTitle</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">()),</span>
<span class="kt">StepperIndicationType</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">Image</span><span class="p">(</span><span class="nv">systemName</span><span class="p">:</span><span class="s">"3.circle.fill"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">largeTitle</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">()),</span>
<span class="kt">StepperIndicationType</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">Image</span><span class="p">(</span><span class="nv">systemName</span><span class="p">:</span><span class="s">"4.circle.fill"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">largeTitle</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">()),</span>
<span class="kt">StepperIndicationType</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="kt">Image</span><span class="p">(</span><span class="nv">systemName</span><span class="p">:</span><span class="s">"5.circle.fill"</span><span class="p">)</span><span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">largeTitle</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">())</span>
<span class="p">]</span>
<span class="k">let</span> <span class="nv">pitStopLineOptions</span> <span class="o">=</span> <span class="p">[</span>
<span class="kt">StepperLineOptions</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kt">Color</span><span class="o">.</span><span class="n">black</span><span class="p">),</span>
<span class="kt">StepperLineOptions</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kt">Color</span><span class="o">.</span><span class="n">black</span><span class="p">),</span>
<span class="kt">StepperLineOptions</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kt">Color</span><span class="o">.</span><span class="n">black</span><span class="p">),</span>
<span class="kt">StepperLineOptions</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kt">Color</span><span class="o">.</span><span class="n">black</span><span class="p">),</span>
<span class="kt">StepperLineOptions</span><span class="o">.</span><span class="nf">custom</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kt">Color</span><span class="o">.</span><span class="n">black</span><span class="p">)</span>
<span class="p">]</span>
<span class="k">let</span> <span class="nv">pitStops</span> <span class="o">=</span> <span class="p">[</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span><span class="kt">GithubPitstops</span><span class="o">.</span><span class="n">p1</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">(),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span><span class="kt">GithubPitstops</span><span class="o">.</span><span class="n">p2</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">(),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span><span class="kt">GithubPitstops</span><span class="o">.</span><span class="n">p3</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">(),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span><span class="kt">GithubPitstops</span><span class="o">.</span><span class="n">p4</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">(),</span>
<span class="kt">TextView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span><span class="kt">GithubPitstops</span><span class="o">.</span><span class="n">p5</span><span class="p">)</span><span class="o">.</span><span class="nf">eraseToAnyView</span><span class="p">()</span>
<span class="p">]</span>
<span class="k">var</span> <span class="nv">body</span><span class="p">:</span> <span class="n">some</span> <span class="kt">View</span> <span class="p">{</span>
<span class="kt">StepperView</span><span class="p">()</span>
<span class="o">.</span><span class="nf">addSteps</span><span class="p">(</span><span class="n">steps</span><span class="p">)</span>
<span class="o">.</span><span class="nf">indicators</span><span class="p">(</span><span class="n">indicators</span><span class="p">)</span>
<span class="o">.</span><span class="nf">addPitStops</span><span class="p">(</span><span class="n">pitStops</span><span class="p">)</span>
<span class="o">.</span><span class="nf">pitStopLineOptions</span><span class="p">(</span><span class="n">pitStopLineOptions</span><span class="p">)</span>
<span class="o">.</span><span class="nf">spacing</span><span class="p">(</span><span class="mi">80</span><span class="p">)</span> <span class="c1">// auto calculates spacing between steps based on the content.</span>
<span class="o">.</span><span class="nf">padding</span><span class="p">()</span>
<span class="p">}</span>
<span class="kd">struct</span> <span class="kt">GithubPitstops</span> <span class="p">{</span>
<span class="kd">static</span> <span class="k">var</span> <span class="nv">p1</span> <span class="o">=</span> <span class="s">"Triage Notifications</span><span class="se">\n</span><span class="s">Browse Repos</span><span class="se">\n</span><span class="s">Create an issue"</span>
<span class="kd">static</span> <span class="k">var</span> <span class="nv">p2</span> <span class="o">=</span> <span class="s">"Fork or Clone repo</span><span class="se">\n</span><span class="s">git checkout -b branch</span><span class="se">\n</span><span class="s">git stash"</span>
<span class="kd">static</span> <span class="k">var</span> <span class="nv">p3</span> <span class="o">=</span> <span class="s">"git add -p</span><span class="se">\n</span><span class="s">git diff .</span><span class="se">\n</span><span class="s">git commit -m</span><span class="se">\n</span><span class="s">git push origin branch"</span>
<span class="kd">static</span> <span class="k">var</span> <span class="nv">p4</span> <span class="o">=</span> <span class="s">"Open pull request</span><span class="se">\n</span><span class="s">git checkout pr-branch</span><span class="se">\n</span><span class="s">Review and comment"</span>
<span class="kd">static</span> <span class="k">var</span> <span class="nv">p5</span> <span class="o">=</span> <span class="s">"View checks</span><span class="se">\n</span><span class="s">git rebase</span><span class="se">\n</span><span class="s">git merge</span><span class="se">\n</span><span class="s">git tag"</span>
<span class="p">}</span>
</code></pre>
<h2 id='custom-step-indicators' class='heading'>Custom Step Indicators</h2>
<h2 id='numberedcircleview' class='heading'>NumberedCircleView</h2>
<p>This view places the number or any text inside the circle.</p>
<pre class="highlight swift"><code><span class="kt">NumberedCircleView</span><span class="p">(</span><span class="nv">text</span><span class="p">:</span> <span class="s">"1"</span><span class="p">,</span> <span class="nv">width</span><span class="p">:</span> <span class="mi">40</span><span class="p">)</span>
</code></pre>
<h2 id='circlediconview' class='heading'>CircledIconView</h2>
<p>This view embeds a icon or image inside the circle.</p>
<pre class="highlight swift"><code><span class="kt">CircledIconView</span><span class="p">(</span><span class="nv">image</span><span class="p">:</span> <span class="kt">Image</span><span class="p">(</span><span class="s">"flag"</span><span class="p">),</span> <span class="nv">width</span><span class="p">:</span> <span class="mi">40</span><span class="p">,</span> <span class="nv">strokeColor</span><span class="p">:</span> <span class="kt">Color</span><span class="o">.</span><span class="n">red</span><span class="p">)</span>
</code></pre>
<h2 id='more-examples' class='heading'>More Examples</h2>
<p><a href="https://github.com/badrinathvm/StepperView/tree/master/Example/StepperView">iOS Usecases</a><br>
<a href="https://github.com/badrinathvm/StepperView/tree/master/Example/StepperView_Watch%20Extension/Views">watchOS Usecases</a></p>
<p><table>
<tr>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/pitstop.png" width="250" alt="StepperView_pistops" align="center"/> </td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/github_workflow.png" width="300" alt="StepperView_github_workflow" align = "center"/> </td>
<td><img src="https://raw.githubusercontent.com/badrinathvm/StepperView/master/images/github_workflow_right.png" width="250" alt="StepperView_github_workflow" align = "center"/> </td>
</tr>
</table></p>
<h2 id='mentions' class='heading'>Mentions</h2>
<p><a href="http://weekly.swiftwithmajid.com/issues/swiftui-weekly-issue-5-238795">SwiftUI Weekly #5</a><br>
<a href="https://ios-goodies.com/post/617487329928626176/week-333">iOS Goodies #333</a><br>
<a href="https://digest.mbltdev.ru/digests/302">MBLT DEV DIGEST #302</a><br>
<a href="https://ios.libhunt.com/newsletter/201">Awesome iOS Newsletter #201</a><br>
<a href="https://juanpe.github.io/About-SwiftUI/">About-SwiftUI Articles</a><br>
<a href="https://medium.com/better-programming/6-amazing-swiftui-libraries-to-use-in-your-next-project-part-2-df5fb94680bc">Better Programming - 6 Amazing SwiftUI Libraries</a><br>
<a href="https://betterprogramming.pub/10-swiftui-libraries-to-use-in-2021-d21c0384e619">10 SwiftUI Libraries in 2021</a></p>
<h2 id='apps-using-stepperview' class='heading'>Apps Using StepperView</h2>
<p><a href="https://www.watchto5k.com/">WatchTo5K</a></p>
<h2 id='author' class='heading'>Author</h2>
<p>Badarinath Venkatnarayansetty.Follow and contact me on <a href="https://twitter.com/badrivm">Twitter</a> or <a href="https://www.linkedin.com/in/badarinath-venkatnarayansetty-abb79146/">LinkedIn</a></p>
<p><a href="https://www.buymeacoffee.com/badrinathvm" target="_blank"><img src="https://camo.githubusercontent.com/031fc5a134cdca5ae3460822aba371e63f794233/68747470733a2f2f7777772e6275796d6561636f666665652e636f6d2f6173736574732f696d672f637573746f6d5f696d616765732f6f72616e67655f696d672e706e67" alt="Buy Me A Coffee" style="height: 51px !important;width: 200px !important;" ></a></p>
<h2 id='contribution' class='heading'>Contribution</h2>
<p>Feature requests, bug reports, and pull requests are all welcome. Refer <a href="https://github.com/badrinathvm/StepperView/blob/master/CONTRIBUTING.md">Contributing Guidelines</a> for more details.</p>
<h2 id='license' class='heading'>License</h2>
<p>StepperView is available under the MIT license. See the <a href="https://github.com/badrinathvm/StepperView/blob/master/LICENSE">LICENSE</a> file for more info.</p>
</section>
</section>
<section id="footer">
<p>&copy; 2021 <a class="link" href="https://github.com/badrinathvm/StepperView" target="_blank" rel="external">badrinathvm</a>. All rights reserved. (Last updated: 2021-08-26)</p>
<p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.13.6</a>, a <a class="link" href="https://realm.io" target="_blank" rel="external">Realm</a> project.</p>
</section>
</article>
</div>
</body>
</div>
</html>