GitHub/StepperView
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Files
task/fix_Scrolling_pitstop
StepperView/docs/index.html
T
Badarinath Venkatnarayansetty 16307d38e5 Implementation of animated step indicators
2020-05-11 16:46:21 -07:00

356 lines
22 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>
</head>
<body>
<a title="StepperView Reference"></a>
<header>
<div class="content-wrapper">
<p><a href="index.html">StepperView 1.4.0 Docs</a> (100% 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="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/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/AnimatedCircle.html">AnimatedCircle</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/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/PitStopStep.html">PitStopStep</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/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/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://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>
<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='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>
</tr>
</table>
<h2 id='documentation' class='heading'>📚 Documentation</h2>
<p><strong><a href="https://badrinathvm.github.io/StepperView/">StepperView Reference</a></strong></p>
<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>
<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.4.0'</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">4</span><span class="o">.</span><span class="mi">0</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.4.0"</span><span class="p">)</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(steps)
.indicators(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="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="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="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="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">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">addPitStops</span><span class="p">(</span><span class="n">_</span> <span class="ss">steps: </span><span class="p">[</span><span class="no">PitStopStep</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">`</span><span class="no">PitStopStep</span><span class="sb">` - structure that provides option to provide `</span><span class="no">View</span><span class="sb">`, line customizations
</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>
<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></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 LICENSE file for more info.</p>
</section>
</section>
<section id="footer">
<p>&copy; 2020 <a class="link" href="https://github.com/badrinathvm/StepperView" target="_blank" rel="external">badrinathvm</a>. All rights reserved. (Last updated: 2020-05-11)</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>
Reference in New Issue View Git Blame Copy Permalink