Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/exyte/FloatingButton
Easily customizable floating button menu created with SwiftUI
https://github.com/exyte/FloatingButton
swiftui swiftui-animations swiftui-components
Last synced: 4 days ago
JSON representation
Easily customizable floating button menu created with SwiftUI
- Host: GitHub
- URL: https://github.com/exyte/FloatingButton
- Owner: exyte
- License: mit
- Created: 2019-12-26T07:30:45.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-10T06:29:46.000Z (5 months ago)
- Last Synced: 2024-12-05T11:04:56.658Z (8 days ago)
- Topics: swiftui, swiftui-animations, swiftui-components
- Language: Swift
- Homepage:
- Size: 2.21 MB
- Stars: 1,150
- Watchers: 19
- Forks: 75
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ios - FloatingButton - Easily customizable floating button menu created with SwiftUI. (UI / Button)
- awesome-swift - FloatingButton - Easily customizable floating button menu created with SwiftUI. (Libs / UI)
- awesome-cocoa - FloatingButton
- awesome-swiftui-libraries - FloatingButton - Easily customizable floating button menu created with SwiftUI (Button / Content)
- awesome-swift - FloatingButton - Easily customizable floating button menu created with SwiftUI. (Libs / UI)
- awesome-swiftui - FloatingButton - Easily customizable floating button menu created with SwiftUI (UI / Button)
- awesome-ios-star - FloatingButton - Easily customizable floating button menu created with SwiftUI. (UI / Button)
- awesome-starts - exyte/FloatingButton - Easily customizable floating button menu created with SwiftUI (Swift)
- fucking-awesome-swift - FloatingButton - Easily customizable floating button menu created with SwiftUI. (Libs / UI)
- awesome-swift - FloatingButton - Easily customizable floating button menu created with SwiftUI ` 📝 9 months ago` (UI [🔝](#readme))
README
FloatingButton
Easily customizable floating button menu created with SwiftUI
[![](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fexyte%2FFloatingButton%2Fbadge%3Ftype%3Dswift-versions)](https://swiftpackageindex.com/exyte/FloatingButton)
[![](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fexyte%2FFloatingButton%2Fbadge%3Ftype%3Dplatforms)](https://swiftpackageindex.com/exyte/FloatingButton)
[![SPM Compatible](https://img.shields.io/badge/SwiftPM-Compatible-brightgreen.svg)](https://swiftpackageindex.com/exyte/FloatingButton)
[![Cocoapods Compatible](https://img.shields.io/badge/cocoapods-Compatible-brightgreen.svg)](https://cocoapods.org/pods/FloatingButton)
[![Carthage Compatible](https://img.shields.io/badge/Carthage-compatible-brightgreen.svg?style=flat)](https://github.com/Carthage/Carthage)
[![License: MIT](https://img.shields.io/badge/License-MIT-black.svg)](https://opensource.org/licenses/MIT)# Usage
1. Create main button view and a number of submenu buttons — both should be cast to `AnyView` type.
2. Pass both to `FloatingButton` constructor:```swift
FloatingButton(mainButtonView: mainButton, buttons: buttons)
```
3. You may also pass a binding which will determine if the menu is currently open. You may use this to close the menu on any submenu button tap for example.
```swift
FloatingButton(mainButtonView: mainButton, buttons: buttons, isOpen: $isOpen)
```
4. Chain `.straight()` or `.circle()` to specify desired menu type.
5. Chain whatever you like afterwards. For example:
```swift
FloatingButton(mainButtonView: mainButton, buttons: textButtons)
.straight()
.direction(.top)
.alignment(.left)
.spacing(10)
.initialOffset(x: -1000)
.animation(.spring())FloatingButton(mainButtonView: mainButton2, buttons: buttonsImage.dropLast())
.circle()
.startAngle(3/2 * .pi)
.endAngle(2 * .pi)
.radius(70)
.layoutDirection(.counterClockwise)
```### Universal options
`spacing` - space between submenu buttons
`initialScaling` - size multiplyer for submenu buttons when the menu is closed
`initialOffset` - offset for submenu buttons when the menu is closed
`initialOpacity` - opacity for submenu buttons when the menu is closed
`animation` - custom SwiftUI animation like `Animation.easeInOut()` or `Animation.spring()`
`delays` - delay for each submenu button's animation start
- you can pass array of delays - one for each element
- or you can pass `delayDelta` - then this same delay will be used for each element
`mainZStackAlignment` - main button and submenu buttons are contained in one ZStack (not an overlay so the menu has a correct size), you can change this ZStack's alignment with this parameter
`inverseZIndex` - inverse zIndex of mainButton and the children. Use, for example, if you have a negative spacing and want to change the order
`wholeMenuSize` - pass CGSize binding to get updates of menu's size. Menu's size includes main button frame and all of elements' frames
`menuButtonsSize` - pass CGSize binding to get updates of combined menu elements' size### Straight menu only options
`direction` - position of submenu buttons relative to main menu button
`alignment` - alignment of submenu buttons relative to main menu button### Circle only options
`startAngle`
`endAngle`
`radius` - distance between center of main button and centers of submenu buttons
`layoutDirection` - changes the button layout direction from the startAngle to the endAngle## Examples
To try out the FloatingButton examples:
1. Clone the repo `git clone [email protected]:exyte/FloatingButton.git`.
2. Open `/Example`.
3. Run `Example.xcodeproj` - framework is imported as a local SPM package.
4. Try it!## Installation
### Swift Package Manager
```swift
dependencies: [
.package(url: "https://github.com/exyte/FloatingButton.git")
]
```### CocoaPods
```ruby
pod 'FloatingButton'
```### Carthage
```ogdl
github "Exyte/FloatingButton"
```## Requirements
* iOS 14.0+ / macOS 11.0+ / watchOS 7.0+
* Xcode 12+## Our other open source SwiftUI libraries
[PopupView](https://github.com/exyte/PopupView) - Toasts and popups library
[Grid](https://github.com/exyte/Grid) - The most powerful Grid container
[ScalingHeaderScrollView](https://github.com/exyte/ScalingHeaderScrollView) - A scroll view with a sticky header which shrinks as you scroll
[AnimatedTabBar](https://github.com/exyte/AnimatedTabBar) - A tabbar with a number of preset animations
[MediaPicker](https://github.com/exyte/mediapicker) - Customizable media picker
[Chat](https://github.com/exyte/chat) - Chat UI framework with fully customizable message cells, input view, and a built-in media picker
[OpenAI](https://github.com/exyte/OpenAI) Wrapper lib for [OpenAI REST API](https://platform.openai.com/docs/api-reference/introduction)
[AnimatedGradient](https://github.com/exyte/AnimatedGradient) - Animated linear gradient
[ConcentricOnboarding](https://github.com/exyte/ConcentricOnboarding) - Animated onboarding flow
[ActivityIndicatorView](https://github.com/exyte/ActivityIndicatorView) - A number of animated loading indicators
[ProgressIndicatorView](https://github.com/exyte/ProgressIndicatorView) - A number of animated progress indicators
[FlagAndCountryCode](https://github.com/exyte/FlagAndCountryCode) - Phone codes and flags for every country
[SVGView](https://github.com/exyte/SVGView) - SVG parser
[LiquidSwipe](https://github.com/exyte/LiquidSwipe) - Liquid navigation animation