NAV
Swift

Introduction

Welcome to the SwiftUIJet!

We've gathered some components here from various projects that are getting reused in another project.

This project is heavily inspired by Antd, NativeBase and Bootstrap frameworks.

Getting Started

Requirements

Installation

pod 'SwiftUIJet'

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate SwiftUIJet into your Xcode project using CocoaPods, specify it in your Podfile:

Components

Accordion

struct ContentView: View {
    let data = [
        JetAccordionItem(title: "Header 1", content: "Lorem ipsum ..."),
        JetAccordionItem(title: "Header 2", content: "Lorem ipsum ...")
    ]
    @State var expandedViewIdx: Int? = 0
    var body: some View {
        VStack {
            JetAccordion(data: data)
            Spacer()
            HStack {
                Button(action: {
                    expandedViewIdx = 0
                }){
                    Text("Open 1st")
                }
                Button(action: {
                    expandedViewIdx = 1
                }){
                    Text("Open 2nd")
                }
                Button(action: {
                    expandedViewIdx = nil
                }, label: {
                    Text("Close")
                })
            }
        }
        .padding()
    }
}

Accordion is used to show and hide content. Collapsed element will animate the height from 0 to its original height.

API

JetAccordion

Property Description Type Default
data Array of items to display in accordion format [JetAccordionItem] -
expandedViewIdx (optional) Index of the expanded view, all items are collapsed when expandedViewIdx == nil Binding<Int?> nil
header (optional) View that will be displayed instead of default header. (item: JetAccordionItem, isExpanded: Bool) -> View EmptyView()
body (optional) View that will be displayed instead of default body. (item: JetAccordionItem, isExpanded: Bool) -> View EmptyView() 
let data = [
        JetAccordionItem(title: "Header 1", content: "Lorem ipsum ..."),
        JetAccordionItem(title: "Header 2", content: "Lorem ipsum ...")
]
JetAccordion(data: data)

JetAccordionItem

Property Description Type Default
title Text that will be displayed in JetAccordion header String -
content Text that will be displayed in JetAccordion body String -

Badge

VStack(spacing: 30) {
    JetBadge(backgroundColor: .blue) {
        Text("Custom content")
            .foregroundColor(.yellow)
            .padding()
    }
    JetBadge(text: "Just badge")
    JetBadge(text: "With padding", padding: 10)
    Text("Default / top trailing").badge(count: 5)
    Text("Top leading").badge(count: 5, alignment: .topLeading)
    Text("Bottom leading").badge(count: 5, alignment: .bottomLeading)
    Text("Bottom trailing").badge(count: 5, alignment: .bottomTrailing)
    Text("Center").badge(count: 5, alignment: .center)
    Text("TopCenter").badge(count: 5, alignment: .top)
    Text("BottomCenter").badge(count: 5, color: .blue, alignment: .bottom)
}

API

JetBadge

JetBadge(text: "Default badge")
JetBadge(text: "With padding", padding: 10)
Property Description Type Default
text Badge content String -
backgroundColor Badge background color Color Color.red
textColor Badge foreground color Color Color.white
padding Padding around text CGFloat 3
font Badge content font Font Font.footnote

JetBadge with custom content

JetBadge(backgroundColor: .blue) {
  Text("Custom content")
      .foregroundColor(.yellow)
}
Property Description Type Default
padding (optional) Padding around text CGFloat 3
backgroundColor (optional) Badge background color Color Color.red
content Custom content which will be placed inside badge View -

JetBadge modifier (.badge)

Text("Default")
  .badge(count: 5)
Text("Top leading")
  .badge(text: "Hello", alignment: .topLeading)

Puts badge on top of another view.

Property Description Type Default
text Badge content, can not be used when count is used String -
count Badge content, can not be used when text is used Int -
color Badge background color Color Color.white
alignment Where should the badge be positioned Alignment Alignment.topTrailing
Swift