Giter VIP home page Giter VIP logo

itextfield's Introduction

iTextField ⌨️

A fully-wrapped `UITextField` that works entirely in SwiftUI. 🦅

Get Started | Examples | Customize | Install |

CI


Get Started

  1. Install iTextField
  2. Add iTextField to your project
import SwiftUI
import iTextField

struct ContentView: View {
    @State var text: String = ""

    var body: some View {
        iTextField("Placeholder", text: $text)
    }
}
  1. Customize your iTextfield

Examples

Starter

drawing

Customize your text field with built-in modifiers.
import SwiftUI
import iTextField

struct ContentView: View {
    @State var text: String = ""

    var body: some View {
        iTextField("Placeholder", text: $text)
            .accentColor(.purple)
            .fontFromUIFont(UIFont(name: "Avenir", size: 40))
            .keyboardType(.URL)
            .returnKeyType(.done)
            .disableAutocorrection(true)
            .autocapitalization(.none)
            .padding()
    }
}

Jump text fields

Use the optional isEditing binding parameter to programmatically jump between text fields.

import SwiftUI
import iTextField

struct ContentView: View {
    @State var text1: String = ""
    @State var text2: String = ""
    @State var isSecondEditing: String = ""

    var body: some View {
        iTextField("First", text: $text1)
            .onReturn { isSecondEditing = true }
        iTextField("Second", text: $text2,
                   isEditing: $isSecondEditing)
    }
}

Customize

iTextField has two required parameters: 1️⃣ a placeholder and 2️⃣ a text state. You can optionally pass in a 3️⃣rd an isEditing binding if you would like to programmatically focus or unfocus the text field.

iTextField also supports a variety of modifiers.

Example: Change the foreground color, accent color, and text alignment with the following code block:

iTextField("Placeholder", text: $text, isEditing: $isEditing)
    .foregroundColor(.purple)
    .accentColor(.green)
    .multilineTextAlignment(.leading)

Use this exhaustive input list to customize your text field.

Modifier Description
.fontFromUIFont(_ font: UIFont?) Modifies the text field’s font from a UIFont object. 🔠
.foregroundColor(_ color: Color?) Modifies the text color 🎨 of the text field.
.accentColor(_ accentColor: Color?) Modifies the cursor color 🌈 of the text field
.multilineTextAlignment(_ alignment: TextAlignment) Modifies the text alignment of a text field. ↔️
.textContentType(_ textContentType: UITextContentType?) Modifies the content type of a text field. 📧 ☎️
.disableAutocorrection(_ disable: Bool?) Modifies the text field’s autocorrection settings.
.keyboardType(_ type: UIKeyboardType) Modifies the text field’s keyboard type. 📩
.autocapitalization(_ style: UITextAutocapitalizationType) Modifies the text field’s autocapitalization style. 🔡
.returnKeyType(_ type: UIReturnKeyType) Modifies the text field’s return key type. ✅
.characterLimit(_ limit: Int?) Sets the maximum amount of characters allowed in this text field.
.isSecure(_ isSecure: Bool) Modifies the text field’s secure entry settings. 🔒
.clearsOnBeginEditing(_ shouldClear: Bool) Modifies the clear-on-begin-editing setting of a text field. ❌
clearsOnInsertion(_ shouldClear: Bool) Modifies the clear-on-insertion setting of a text field. 👆
.showsClearButton(_ showsButton: Bool) Modifies whether and when the text field clear button appears on the view. ⭕️ ❌
.passwordRules(_ rules: UITextInputPasswordRules) Modifies the text field's password rules 🔒. Sets secure entry to true.
.spellChecking(_ spellChecking: Bool? = nil) Modifies whether the text field should check the user's spelling.
.smartDashes(_ smartDashes: Bool? = nil) Modifies whether the text field includes smart dashes.
.smartInsertDelete(_ smartInsertDelete: Bool? = nil) Modifies whether the text field uses smart insert-delete.
.smartQuotes(_ smartQuotes: Bool? = nil) Modifies whether the text field uses smart quotes.
.disabled(disabled: Bool) Modifies whether the text field is disabled. ✋
.onEditingBegan(perform action: { code }) Modifies the function called when text editing begins. ▶️
.onEdit(perform action: { code }) Modifies the function called when the user makes any changes to the text in the text field. 💬
.onEditingEnded(perform action: { code }) Modifies the function called when text editing ends. 🔚
.onReturn(perform action: { code }) Modifies the function called when the user presses the return key. ⬇️ ➡️
.onClear(perform action: { code }) Modifies the function called when the user clears the text field. ❌

Install

Use the Swift package manager to install. Find instructions here😀

Help

As always, if you have any questions about iPhoneNumberField, we are available 24/7 to help.

Reach us at
📞 +1 (415) 735-4464 Call
📧 [email protected] Email
📲 +1 (415) 735-4464 Text

itextfield's People

Contributors

alexfine avatar benjaminsage avatar mojtabahs avatar nmn avatar xavierdonnellon avatar

Watchers

 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.