289 lines
16 KiB
HTML
289 lines
16 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>
|
||
|
||
</head>
|
||
<body>
|
||
<a title="StepperView Reference"></a>
|
||
<header>
|
||
<div class="content-wrapper">
|
||
<p><a href="index.html">StepperView 1.2.0 Docs</a> (65% documented)</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="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/PitStopLineOptions.html">PitStopLineOptions</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/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/NumberedCircleView.html">NumberedCircleView</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/PitStopSteps.html">PitStopSteps</a>
|
||
</li>
|
||
<li class="nav-group-task">
|
||
<a href="Structs/PitStopView.html">PitStopView</a>
|
||
</li>
|
||
<li class="nav-group-task">
|
||
<a href="Structs/SpacingKey.html">SpacingKey</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/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/v/StepperView.svg?style=flat" alt="Version"></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://swift.org/package-manager/"><img src="https://img.shields.io/badge/Swift%20Package%20Manager-compatible-orange" alt="Swift Package Manager compatible"></a></p>
|
||
|
||
<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='usecase' class='heading'>Usecase</h2>
|
||
|
||
<table align= "center">
|
||
<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>
|
||
</tr>
|
||
</table>
|
||
<h2 id='example' class='heading'>Example</h2>
|
||
|
||
<p>To run the example project, clone the repo, and run <code>pod install</code> from the Example directory first.</p>
|
||
<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='installation' class='heading'>Installation</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.2.0'</span>
|
||
</code></pre>
|
||
<h2 id='swift-package-manager' class='heading'>Swift Package Manager</h2>
|
||
|
||
<p>StepperView is available through Swift Package Manager. To install it, simply add the following dependency to your Package.swift</p>
|
||
<pre class="highlight ruby"><code><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.2.0"</span><span class="p">)</span>
|
||
</code></pre>
|
||
<h2 id='usage' class='heading'>Usage</h2>
|
||
<pre class="highlight plaintext"><code>import StepperView
|
||
|
||
let steps = [ Text("Cart").font(.caption),
|
||
Text("Delivery Address").font(.caption),
|
||
Text("Order Summary").font(.caption),
|
||
Text("Payment Method").font(.caption),
|
||
Text("Track").font(.caption)]
|
||
|
||
let alignments = [StepperAlignment.center,.center,.center, .center, .center]
|
||
|
||
let indicationTypes = [StepperIndicationType.custom(NumberedCircleView(text: "1")),
|
||
.custom(NumberedCircleView(text: "2")),
|
||
.custom(NumberedCircleView(text: "3")),
|
||
.custom(NumberedCircleView(text: "4")),
|
||
.custom(NumberedCircleView(text: "5"))]
|
||
|
||
var body: some View {
|
||
var body: some View {
|
||
StepperView()
|
||
.addSteps(self.set1)
|
||
.indicators(self.indicationTypes)
|
||
.stepIndicatorMode(StepperMode.horizontal)
|
||
.spacing(50)
|
||
.lineOptions(StepperLineOptions.custom(1, Colors.blue(.teal).rawValue))
|
||
}
|
||
}
|
||
</code></pre>
|
||
<h2 id='methods-view-modifiers' class='heading'>Methods ( 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="n">array</span> <span class="n">of</span> <span class="n">views</span> <span class="n">to</span> <span class="n">be</span> <span class="n">rendered</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="p">:</span> <span class="n">optional</span> <span class="n">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="n">sections</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="n">enum</span> <span class="n">provides</span> <span class="n">the</span> <span class="n">options</span> <span class="n">to</span> <span class="n">use</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="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="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">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="n">color</span><span class="p">,</span> <span class="n">thickness</span> <span class="n">line</span> <span class="n">customization</span><span class="p">.</span>
|
||
|
||
<span class="nf">.</span><span class="n">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="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">step</span> <span class="n">views</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="n">vertical</span><span class="p">,</span> <span class="n">horizontal</span> <span class="n">doisplay</span> <span class="n">modes</span><span class="o">.</span>
|
||
</code></pre>
|
||
|
||
<p>
|
||
<a href="https://github.com/badrinathvm/StepperView/tree/master/Example/StepperView">Refer Example for more details on usage of StepperView</a>
|
||
</p>
|
||
<h2 id='author' class='heading'>Author</h2>
|
||
|
||
<p>Badarinath Venkatnarayansetty</p>
|
||
<h2 id='contact' class='heading'>Contact</h2>
|
||
|
||
<p>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>. If you find an issue, just open a ticket. Pull requests are welcome.</p>
|
||
<h2 id='license' class='heading'>License</h2>
|
||
|
||
<p>StepperView is available under the MIT license. See the LICENSE file for more info.</p>
|
||
|
||
</section>
|
||
</section>
|
||
<section id="footer">
|
||
<p>© 2020 <a class="link" href="https://github.com/badrinathvm/StepperView" target="_blank" rel="external">badrinathvm</a>. All rights reserved. (Last updated: 2020-04-27)</p>
|
||
<p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.13.3</a>, a <a class="link" href="https://realm.io" target="_blank" rel="external">Realm</a> project.</p>
|
||
</section>
|
||
</article>
|
||
</div>
|
||
</body>
|
||
</div>
|
||
</html>
|