Giter Club home page Giter Club logo

azuredark / bottomsheet-ios-component Goto Github PK

View Code? Open in Web Editor NEW

This project forked from coffee-it-development/bottomsheet-ios-component

1.0 0.0 0.0 521 KB

A customisable BottomSheet that can be used from iOS 13 and up. Also has an Android counterpart and a figma design to complete the circle. This GitHub repository is a mirror, the official repository is hosted privately by Coffee IT.

Home Page: https://coffeeit.nl

License: MIT License

Swift 100.00%

bottomsheet-ios-component's Introduction

Coffee IT - iOS Aroma BottomSheet Component

Swift Package Manager Swift {swift_version} iOS {ios_version} Mirror Repository License LinkedIn Facebook Instagram Twitter

A customizable BottomSheet that can be used from iOS 13 and up. Also has an Android counterpart.

โšก Installation

This component requires minimum iOS 13.

๐Ÿ”จ SwiftPM

To install the Swift Package, go to Project > Package Dependencies > + > Search or Enter Package URL > Fill in:

https://github.com/Coffee-IT-Development/BottomSheet-iOS-Component

๐Ÿ“– Usage

Import CITBottomSheet and add a CITBottomSheetManager StateObject to the root of your app. Then provide it to your root view as an environmentObject.

import CITBottomSheet
import SwiftUI

@main
struct CITBottomSheetExampleApp: App {
    @StateObject private var bottomSheetManager = CITBottomSheetManager()

    var body: some Scene {
        WindowGroup {
            CITBottomSheetExampleView()
                .environmentObject(bottomSheetManager)
        }
    }
}

In a view, retrieve your CITBottomSheetManager using @EnvironmentObject. Then, use the bottomSheet modifier on your view like you would when using a normal sheet. You can call bottomSheetManager.present() with your desired view content to make it appear.

import CITBottomSheet
import SwiftUI

struct CITBottomSheetExampleView: View {
    @EnvironmentObject private var bottomSheetManager: CITBottomSheetManager
    
    private var config = CITBottomSheetConfig(
        backgroundColor: Color.white,
        height: .fixed(height: 300),
        cornerStyle: .roundedTopCorners
    )
    
    var body: some View {
        Button("Open Bottom Sheet") {
            bottomSheetManager.present() {
                VStack {
                    Text("Item 1")
                    Text("Item 2")
                    Text("Item 3")
                    Text("Item 4")
                    Text("Item 5")
                    Text("Item 6")
                }
            }
        }
        .bottomSheet(isPresented: bottomSheetManager.isPresenting, config: config, onDimiss: nil) {
            bottomSheetManager.sheet?.content
        }
    }

}

โš™๏ธ Customization

/// Set background color
/// The app is responsible for setting the right background color for dark mode support
/// Required
/// No default value
let backgroundColor: Color

/// Heigth options:
/// - `auto` the bottom sheets calculates the height based on the view in it
/// - `fixed` the app sets the height
/// Required
/// No default value
let height: Height

/// Width options:
/// - `default` is full width of the view
/// - `fixed` the app sets the width
/// Optional
/// Default value: `default`
let width: Width

/// If set to true the bottom sheet is draggable to the top to expand the sheet
/// Optional
/// Default value = `false`
let isExpandable: Bool

/// If set to false the user cannot drag the sheet down to close it
/// Optional
/// Default value = `true`
let isDraggable: Bool

/// CornerStyle options:
/// - `roundedTopCorners` (only top corners, has default corner radius of 16)
/// - `roundedTopCornersCustom` (only top corners, set your own corner radius)
/// - `roundedAllCorners` (all corners, has default corner radius of 16)
/// - `roundedAllCornersCustom` (all corners, set your own corner radius)
/// - `square` (no corner radius)
/// Required
/// No default value
let cornerStyle: CornerStyle

/// Accessory options:
/// - `grabber`
/// - `closeButton` (which you need to give a `backgroundStyle` either `.dark` or `.light`)
/// Optional
/// Default value = `nil`
let accessory: Accessory?

/// OverlayStyle options:
/// - `default` black (60% opacity) overlay
/// - `custom` set your own overlay by specifying `color` and `opacity`
/// Optional
/// Default value = `default`
/// Could be set to `nil` for no overlay
let overlayStyle: OverlayStyle?

/// You set the `bottomPadding` to create a floating bottom sheet.
/// Optional
/// Default value = `.zero`
let bottomPadding: CGFloat

๐Ÿ”— Related publications

Look at our other repositories on our GitHub account.

โœ๏ธ Changelog

All notable changes to this project will be documented in the Changelog. CITBottomSheet adheres to Semantic Versioning.

๐Ÿ“ง Contact

Do you have questions, ideas or need help? Send us an email at [email protected].

CoffeeIT logo

โš ๏ธ License

Distributed under the MIT License. See LICENSE for more information.

bottomsheet-ios-component's People

Contributors

brouwers-at-coffeeit avatar 7bluexy avatar

Stargazers

 avatar

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.