465 lines
33 KiB
HTML
465 lines
33 KiB
HTML
<!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.2 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/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 & 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">'~> 1.6.2'</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">2</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.2"</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='usage' class='heading'>Usage</h2>
|
||
<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">horizontal</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="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>
|
||
<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>
|
||
</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>© 2021 <a class="link" href="https://github.com/badrinathvm/StepperView" target="_blank" rel="external">badrinathvm</a>. All rights reserved. (Last updated: 2021-04-05)</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>
|