https://github.com/space-code/floating-text-field
A customizable floating text field written in SwiftUI
https://github.com/space-code/floating-text-field
floating-textfield swift swiftui textfield
Last synced: 12 months ago
JSON representation
A customizable floating text field written in SwiftUI
- Host: GitHub
- URL: https://github.com/space-code/floating-text-field
- Owner: space-code
- License: mit
- Created: 2023-10-11T04:56:34.000Z (over 2 years ago)
- Default Branch: dev
- Last Pushed: 2023-10-18T16:47:34.000Z (over 2 years ago)
- Last Synced: 2025-02-11T11:42:56.412Z (about 1 year ago)
- Topics: floating-textfield, swift, swiftui, textfield
- Language: Swift
- Homepage:
- Size: 568 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
floating-text-field
## Description
`floating-text-field` is a customizable text field.
- [Visual Example](#visual-example)
- [Usage](#usage)
- [Requirements](#requirements)
- [Installation](#installation)
- [Communication](#communication)
- [Contributing](#contributing)
- [Author](#author)
- [License](#license)
## Visual Example
The visual example of the `FloatingTextField`:
## Usage
### Basic Usage
For basic usage, simply import the `FloatingTextField` package and set the text field height as follows:
```swift
import FloatingTextField
struct ContentView: View {
@State private var username: String = ""
var body: some View {
FloatingTextFieldView($username, placeholder: "username")
.frame(height: 60.0)
}
}
```
### Custom Fonts and Colors
The `FloatingTextField` provides an opportunity to customize text font, text color, placeholder font, placeholder color, and more.
```swift
import FloatingTextField
struct ContentView: View {
@State private var username: String = ""
var body: some View {
FloatingTextFieldView($username, placeholder: "username")
.font(Font.system(size: 17.0))
.placeholderFont(Font.system(size: 14.0))
.textColor(.black)
.placeholderColor(.gray)
.frame(height: 60.0)
}
}
```
### Custom Styles
You can create a text field style in two simple steps.
1. Define a custom text field style as follows:
```swift
import FloatingTextField
struct CustomTextFieldStyle: FloatingTextFieldStyle {
func body(content: FloatingTextField) -> FloatingTextField {
content
.font(Font.system(size: 17.0))
.placeholderFont(Font.system(size: 14.0))
.cornerRadius(12)
.placeholderBottomPadding(4.0)
.textColor(.black)
.placeholderColor(.gray)
.borderWidth(1)
.borderColor(.black)
}
}
```
2. Apply this style using `textFieldStyle(_:)`:
```swift
struct ContentView: View {
@State private var username: String = ""
var body: some View {
FloatingTextFieldView($username, placeholder: "username")
.textFieldStyle(style: CustomTextFieldStyle())
.frame(height: 60.0)
}
}
```
### Secure Text Entry
The `FloatingTextField` can conceal sensitive data such as passwords. You can hide it by using the `isSecureTextEntry(_:)` modifier.
```swift
import FloatingTextField
struct ContentView: View {
@State private var password: String = ""
@State private var isPasswordHidden: Bool = true
var body: some View {
FloatingTextField($password, placeholder: "Password")
.textFieldStyle(style: CustomTextFieldStyle())
.isSecureTextEntry(isPasswordHidden)
.leftView {
Image(systemName: "lock")
.foregroundColor(.gray)
}
.rightView {
Button(
action: { isPasswordHidden.toggle() },
label: {
Image(systemName: "eye.fill")
.foregroundColor(.gray)
}
)
}
.frame(height: 60.0)
}
}
```
## Requirements
- iOS 15.0+
- Xcode 14.0
- Swift 5.7
## Installation
### Swift Package Manager
The [Swift Package Manager](https://swift.org/package-manager/) is a tool for automating the distribution of Swift code and is integrated into the `swift` compiler. It is in early development, but `floating-text-field` does support its use on supported platforms.
Once you have your Swift package set up, adding `floating-text-field` as a dependency is as easy as adding it to the `dependencies` value of your `Package.swift`.
```swift
dependencies: [
.package(url: "https://github.com/space-code/floating-text-field.git", .upToNextMajor(from: "1.0.0"))
]
```
## Communication
- If you **found a bug**, open an issue.
- If you **have a feature request**, open an issue.
- If you **want to contribute**, submit a pull request.
## Contributing
Bootstrapping development environment
```
make bootstrap
```
Please feel free to help out with this project! If you see something that could be made better or want a new feature, open up an issue or send a Pull Request!
## Author
Nikita Vasilev, nv3212@gmail.com
## License
floating-text-field is available under the MIT license. See the LICENSE file for more info.