stanfordspezi/spezionboarding

Overview

The SpeziOnboarding module provides user interface components to onboard a user to an iOS application.

<table style="width: 80%"> <tr> <td align="center" width="33.33333%"> <img src="Sources/SpeziOnboarding/SpeziOnboarding.docc/Resources/OnboardingView.png#gh-light-mode-only" alt="Screenshot displaying the onboarding view" width="80%"/> <img src="Sources/SpeziOnboarding/SpeziOnboarding.docc/Resources/OnboardingView~dark.png#gh-dark-mode-only" alt="Screenshot displaying the onboarding view" width="80%"/> </td> <td align="center" width="33.33333%"> <img src="Sources/SpeziOnboarding/SpeziOnboarding.docc/Resources/SequentialOnboarding.png#gh-light-mode-only" alt="Screenshot displaying the sequential onboarding view" width="80%"/> <img src="Sources/SpeziOnboarding/SpeziOnboarding.docc/Resources/SequentialOnboarding~dark.png#gh-dark-mode-only" alt="Screenshot displaying the sequential onboarding view" width="80%"/> </td> <td align="center" width="33.33333%"> <img src="Sources/SpeziOnboarding/SpeziOnboarding.docc/Resources/Consent.png#gh-light-mode-only" alt="Screenshot displaying the onboarding view" width="80%"/> <img src="Sources/SpeziOnboarding/SpeziOnboarding.docc/Resources/Consent~dark.png#gh-dark-mode-only" alt="Screenshot displaying the onboarding view" width="80%"/> </td> </tr> <tr> <td align="center"> <a href="https://swiftpackageindex.com/stanfordspezi/spezionboarding/documentation/spezionboarding/onboardingview"> <code>OnboardingView</code> </a> </td> <td align="center"> <a href="https://swiftpackageindex.com/stanfordspezi/spezionboarding/documentation/spezionboarding/sequentialonboardingview"> <code>SequentialOnboardingView</code> </a> </td> <td align="center"> <a href="https://swiftpackageindex.com/stanfordspezi/speziconsent/documentation/speziconsent/onboardingconsentview"> <code>OnboardingConsentView</code> </a> </td> </tr> </table>

Setup

Add Spezi Onboarding as a Dependency

You need to add the Spezi Onboarding Swift package to your app in Xcode or Swift package.

Examples

Onboarding View

The OnboardingView allows you to separate information into areas on a screen, each with a title, description, and icon.

import SpeziOnboarding
import SwiftUI


struct OnboardingViewExample: View {
    var body: some View {
        OnboardingView(
            title: "Welcome",
            subtitle: "This is an example onboarding view",
            areas: [
                .init(
                    icon: Image(systemName: "tortoise.fill"), 
                    title: "Tortoise", 
                    description: "A Tortoise!"
                ),
                .init(
                    icon: {
                        Image(systemName: "lizard.fill")
                            .foregroundColor(.green)
                    },
                    title: "Lizard", 
                    description: "A Lizard!"
                ),
                .init(
                    icon: {
                        Circle().fill(.orange)
                    }, 
                    title: "Circle", 
                    description: "A Circle!"
                )
            ],
            actionText: "Learn More",
            action: {
                // Action to perform when the user taps the action button.
            }
        )
    }
}

Sequential Onboarding View

The SequentialOnboardingView allows you to display information step-by-step with each additional area appearing when the user taps the Continue button.

import SpeziOnboarding
import SwiftUI


struct SequentialOnboardingViewExample: View {
    var body: some View {
        SequentialOnboardingView(
            title: "Things to know",
            subtitle: "And you should pay close attention ...",
            steps: [
                .init(
                    title: "A thing to know", 
                    description: "This is a first thing that you should know; read carefully!"
                ),
                .init(
                    title: "Second thing to know", 
                    description: "This is a second thing that you should know; read carefully!"
                ),
                .init(
                    title: "Third thing to know", 
                    description: "This is a third thing that you should know; read carefully!"
                )
            ],
            actionText: "Continue"
        ) {
            // Action to perform when the user has viewed all the steps
        }
    }
}

The Spezi Template Application

The Spezi Template Application provides a great starting point and example using the SpeziOnboarding module.

Contributing

Contributions to this project are welcome. Please make sure to read the contribution guidelines and the contributor covenant code of conduct first.

License

This project is licensed under the MIT License. See Licenses for more information.

[Spezi Footer] [Spezi Footer]

Package Metadata

Repository: stanfordspezi/spezionboarding

Default branch: main

README: README.md