Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/no-comment/keyboardtoolbar
A SwiftUI Toolbar that sits on top of the keyboard.
https://github.com/no-comment/keyboardtoolbar
ios swift swiftui
Last synced: 2 months ago
JSON representation
A SwiftUI Toolbar that sits on top of the keyboard.
- Host: GitHub
- URL: https://github.com/no-comment/keyboardtoolbar
- Owner: no-comment
- License: mit
- Created: 2021-03-09T22:09:50.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-15T09:02:02.000Z (over 1 year ago)
- Last Synced: 2024-10-10T04:15:49.545Z (3 months ago)
- Topics: ios, swift, swiftui
- Language: Swift
- Homepage:
- Size: 32.2 KB
- Stars: 24
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# KeyboardToolbar
A SwiftUI Toolbar for your iOS keyboard.
You can find [example files](https://github.com/cameronshemilt/KeyboardToolbar/tree/main/Tests/ExampleViews) in `Tests/ExampleViews`.
## Installation
Supports iOS 14.0+.
### Swift Package Manager
Add `https://github.com/cameronshemilt/KeyboardToolbar` to your [Package Dependencies](https://developer.apple.com/documentation/xcode/adding_package_dependencies_to_your_app).
## Usage
The KeyboardToolbar can contain multiple `KeyboardToolbarItems` you provide.
You can additionally style the toolbar (size, color, padding etc.) via a `KeyboardToolbarStyle`.
```swift
import KeyboardToolbar
let toolbarItems: [KeyboardToolbarItem] = [
.init(systemName: "bold", callback: {}),
.init(systemName: "italic", callback: {}),
.init(systemName: "underline", callback: {}),
.dismissKeyboard
]
struct ContentView: View {
@State private var text: String = ""
var body: some View {
Form {
TextField("Input", text: $text)
}
.keyboardToolbar(toolbarItems)
}
}
```
## API
### KeyboardToolbar
| **Parameter** | **Type** | **Optional** | **Description** |
| ------------- | ----------------------- | ------------ | ------------------------------------------------------------ |
| `items` | `[KeyboardToolbarItem]` | No | All of the KeyboardToolbarItems you want the Toolbar to contain. |
| `style` | `KeyboardToolbarStyle` | Yes | The styling of the toolbar. |
Use by attaching `.keyboardToolbar(...)` to the outermost part of your View.
### KeyboardToolbarItem
Toolbar items can either be an image/icon or text.
#### Image Based
| **Parameter** | **Type** | **Optional** | **Description** |
| ------------- | ---------------------- | ------------ | ------------------------------------------------------------ |
| `image` | `Image` | No | The image/icon of the toolbar icon. Convenience initializers exist for *systemName* and *imageName* |
| `color` | `Color` | Yes | Color of the image/icon |
| `isFixed` | `KeyboardToolbarEdge?` | Yes | Whether the item should be sticky or not. Possible values: `nil`, `.leading` or `.trailing`. |
| `callback` | `() -> Void` | No | Action the item should perform when pressed |
#### Text Based
| **Parameter** | **Type** | **Optional** | **Description** |
| ------------- | ---------------------- | ------------ | ------------------------------------------------------------ |
| `text` | `String` | No | The text of the toolbar item. Alternative to displaying an image. |
| `color` | `Color` | Yes | Color of the image/icon |
| `isFixed` | `KeyboardToolbarEdge?` | Yes | Whether the item should be sticky or not. Possible values: `nil`, `.leading` or `.trailing`. |
| `callback` | `() -> Void` | No | Action the item should perform when pressed |
#### Presets
- `.dismissKeyboard`: A button fixed to the right side that will dismiss the keyboard when tapped.
### KeyboardToolbarStyle
| **Parameter** | **Type** | Optional | **Description** |
| ----------------- | --------- | -------- | ------------------------------------------------------------ |
| `backgroundColor` | `Color` | Yes | The background color of the toolbar. |
| `height` | `CGFloat` | Yes | Height of the toolbar. |
| `itemSize` | `CGFloat` | Yes | Size of the toolbar items. |
| `itemSpacing` | `CGFloat` | Yes | Spacing between the toolbar items. |
| `dividerColor` | `Color` | Yes | Color of the divider above the toolbar, as well as the dividers between the fixed and not fixed items. |
| `dividerWidth` | `CGFloat` | Yes | Width of the dividers. |
#### Presets
- `.standard`
- `.contrast`