Giter Site home page Giter Site logo

chicio / tabbaruiaction Goto Github PK

View Code? Open in Web Editor NEW
23.0 2.0 5.0 29.41 MB

๐Ÿ“š๐Ÿ“ฑ A SwiftUI custom TabBar view with action button for modal content display. Fully compatible with Mac Catalyst. ๐Ÿ“š๐Ÿ“ฑ

Home Page: https://tabbaruiaction.fabrizioduroni.it

License: MIT License

Swift 97.06% Objective-C 0.44% Shell 0.82% Ruby 1.67%
swiftui swift catalyst apple library ios ipados macos tabbar tabbaritem

tabbaruiaction's Introduction

TabBarUIAction

Build iOS Build iPadOS Build macOS SwiftLint codecov Supported platform CocoaPods Version codebeat badge GitHub license

๐Ÿ“š๐Ÿ“ฑ A SwiftUI custom TabBar view with action button for modal content display. Fully compatible with Mac Catalyst. ๐Ÿ“š๐Ÿ“ฑ

tabbaruiaction logo


Installation

There are four ways to install TabBarUIAction in your project: manual installation, as a standalone framework, cocoapods or the Swift Package Manager.

Manual installation

To manually install TabBarUIAction simply drag and drop all the file contained in the Source folder inside your project.

Framework

TabBarUIAction is available also as a framework. To install it follow the standard installation procedure for a cocoa touch framework:

  • drag the TabBarUIAction.xcodeproj inside your project
  • add it to the Embedded Binaries/Linked Frameworks and Libraries section of your project.

See the TabBarUIAction demo project/target for an example of the setup of the framework.

CocoaPods

TabBarUIAction is also available as a pod on CocoaPods. Add the dependency to your Podfile similar to the following:

target 'MyApp' do
    pod 'TabBarUIAction', '~> 0.8'
end

and then run pod install (or pod update).

Swift Package Manager (SPM)

TabBarUIAction is also available as a SPM package. Add it from the project configuration using the Github repository url. Choose main branch or a tag. See the DemoSPM project for an example of the setup with the Swiftp Package Manager.

spm


Usage

To use TabBarUIAction in your app you have to:

  • import TabBarUIAction in your SwiftUI view
  • define two @State variables:
    • a currentTab state variable of type TabPosition
    • a showModal state variable of type Bool
  • configure it with colors and screens content

Below you can find two examples of tab bar:

  • one with 3 screens: 2 standard tabs screen and a modal.
  • one with 5 screens: 4 standard tabs screen and a modal.
import SwiftUI
import TabBarUIAction

struct YourView: View {
    @State private var currentTab: TabPosition = .tab1
    @State private var showModal: Bool = false
    //... other state of your views

    var body: some View {
        VStack {
            TabBarUIAction(
                currentTab: $currentTab,
                showModal: $showModal,
                colors: Colors(
                    tabBarBackgroundColor: Color(.white),
                    tabItemsColors: TabItemsColors(
                        tabItemColor: Color(.black),
                        tabItemSelectionColor: Color(.blue)
                    )
                )
            ) {
                TabScreen(
                    tabItem: TabItemContent(
                        systemImageName: "folder.badge.plus",
                        text: "Tab Item 1",
                        font: Font.system(size: 16)
                    )
                ) {
                    /**
                        Your first tab screen. Could be any SwiftUI view.
                        For example...
                    */
                    VStack {
                        ///...other content
                    }
                }
                TabModal {
                    /**
                        Define an element to be used as tab bar modal item.
                        Here you can find an exampl: an image used as button.
                     */   
                    Image(systemName: "plus.circle.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 55, height: 55, alignment: .center)
                        .foregroundColor(Color(.systemBlue))
                        .background(Color(.white))
                        .cornerRadius(55/2)
                        .overlay(RoundedRectangle(cornerRadius: 55/2).stroke(Color(.blue), lineWidth: 2))
                        .accessibility(identifier: "TabBarModalButton")
                } content: {
                    /**
                        Your modal screen. Could be any SwiftUI view.
                        For example...
                    */
                    VStack {
                        ///...other content
                    }
                }
                TabScreen(
                    tabItem: TabItemContent(systemImageName: "gear", text: "Tab Item 2", font: Font.system(size: 16))
                ) {
                    /**
                        Your second tab screen. Could be any SwiftUI view.
                        For example...
                    */
                    VStack {
                        ///...other content
                    }
                }
            }
        }
    }
}
import SwiftUI
import TabBarUIAction

struct YourView: View {
    @State private var currentTab: TabPosition = .tab1
    @State private var showModal: Bool = false

    var body: some View {
        VStack {
            TabBarUIAction(
                currentTab: $currentTab,
                showModal: $showModal,
                colors: Colors(
                    tabBarBackgroundColor: Color(.systemGray5),
                    tabItemsColors: TabItemsColors(
                        tabItemColor: Color(.systemPurple),
                        tabItemSelectionColor: Color(.systemIndigo)
                    )
                )
            ) {
                TabScreen(
                    tabItem: TabItemContent(
                        systemImageName: "tray.fill",
                        text: "Tab Item 1",
                        font: Font.system(size: 12)
                    )
                ) { 
                    /**
                        Your first tab screen. Could be any SwiftUI view.
                        For example...
                    */
                    VStack {
                        ///...other content
                    }
                }
                TabScreen(
                    tabItem: TabItemContent(
                        systemImageName: "gamecontroller.fill",
                        text: "Tab Item 2",
                        font: Font.system(size: 12)
                    )
                ) { 
                    /**
                        Your first tab screen. Could be any SwiftUI view.
                        For example...
                    */
                    VStack {
                        ///...other content
                    }
                }
                TabModal {
                    /**
                        Define an element to be used as tab bar modal item.
                        Here you can find an exampl: an image used as button.
                     */   
                    Image(systemName: "plus")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 30, height: 30, alignment: .center)
                        .foregroundColor(Color(.white))
                        .padding(10)
                        .background(Color(.systemRed))
                        .cornerRadius(10)
                        .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color(.systemRed), lineWidth: 2))
                        .accessibility(identifier: "TabBarModalButton")
                } content: {
                    /**
                        Your modal screen. Could be any SwiftUI view.
                        For example...
                    */
                    VStack {
                        ///...other content
                    }
                }
                TabScreen(
                    tabItem: TabItemContent(
                        systemImageName: "dpad.fill",
                        text: "Tab Item 3",
                        font: Font.system(size: 12)
                    )
                ) { 
                    /**
                        Your first tab screen. Could be any SwiftUI view.
                        For example...
                    */
                    VStack {
                        ///...other content
                    }
                }
                TabScreen(
                    tabItem: TabItemContent(
                        systemImageName: "l1.rectangle.roundedbottom.fill",
                        text: "Tab Item 4",
                        font: Font.system(size: 12)
                    )
                ) { 
                    /**
                        Your first tab screen. Could be any SwiftUI view.
                        For example...
                    */
                    VStack {
                        ///...other content
                    }
                }
            }
        }
    }
}

Documentation

You can find the complete api documentation on fabrizioduroni.it.


Examples

In the following screenshots you can find some TabBarUIAction usage examples. You can find these examples in the demo catalyst app project.

iphone screens ipad screens macos screens

tabbaruiaction's People

Contributors

chicio avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

tabbaruiaction's Issues

Documentation ๐Ÿ’ก

  • create documentation in README
  • add documentation comments
  • add generate docs script
  • create custom domain + activate GitHub pages

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.