Είσοδοι

Πεδία κειμένου, πλαίσια ελέγχου, εναλλαγές, κουμπιά επιλογής, ρυθμιστικά, βήματα αριθμών, αναπτυσσόμενα μενού και ένα πεδίο αναζήτησης με ένα κουμπί διαγραφής.

---

Είσοδος — Πεδίο κειμένου μονής γραμμής

type UI struct {
    email proton.Editor
}

proton.Input(ctx, &u.email, "your@email.com")

// read the value any time
fmt.Println(u.email.Text())

Το δεύτερο όρισμα είναι το κείμενο κράτησης θέσης που εμφανίζεται όταν το πεδίο είναι κενό.

proton.Input(ctx proton.Context, state *proton.Editor, hint string)

---

Περιοχή κειμένου — Πεδίο κειμένου πολλών γραμμών

Το ίδιο με το Input αλλά ο χρήστης μπορεί να πατήσει Enter για να προσθέσει γραμμές. Καλό για μηνύματα, σημειώσεις, οτιδήποτε μεγαλύτερο από μία γραμμή.

type UI struct {
    bio proton.Editor
}

proton.TextArea(ctx, &u.bio, "Tell us something...")

fmt.Println(u.bio.Text())

proton.TextArea(ctx proton.Context, state *proton.Editor, hint string)

---

Εισαγωγή αναζήτησης

Ένα πεδίο κειμένου με ένα εικονίδιο αναζήτησης στα αριστερά και ένα κουμπί διαγραφής (×). εμφανίζεται όταν υπάρχει κάτι να καθαριστεί. Επιστρέφει την τρέχουσα συμβολοσειρά ερωτήματος.

type UI struct {
    search proton.SearchState
}

q := proton.SearchInput(ctx, &u.search, "Search notes...")

// filter your data using q
filtered := filter(items, q)

Το «SearchState» κρατά και το «Editor» και το εσωτερικό κουμπί διαγραφής — δήλωση ένα στη δομή σας, μην το κατασκευάζετε μόνοι σας.

proton.SearchInput(ctx proton.Context, state *proton.SearchState, placeholder string) string

---

Πλαίσιο ελέγχου

Επιστρέφει "true" στο πλαίσιο που ο χρήστης το αλλάζει. Διαβάστε την τρέχουσα τιμή από «κατάσταση.Αξία».

type UI struct {
    agreed proton.Bool
}

if proton.Checkbox(ctx, &u.agreed, "I have read the terms and conditions") {
    // just changed — u.agreed.Value is the new state
    fmt.Println("now:", u.agreed.Value)
}

// read it any time without caring about the change event
if u.agreed.Value {
    proton.SuccessText(ctx, "Thanks for agreeing (we know you didn't read it)")
}

proton.Checkbox(ctx proton.Context, state *proton.Bool, label string) bool

---

Εναλλαγή

Διακόπτης on/off σε στυλ υλικού. Ίδιο API με το πλαίσιο ελέγχου, διαφορετική εμφάνιση. Χρησιμοποιήστε το για ρυθμίσεις που τίθενται σε ισχύ αμέσως αντί να χρειάζεστε ένα κουμπί Αποθήκευση.

type UI struct {
    darkMode proton.Bool
}

if proton.Toggle(ctx, &u.darkMode, "Dark mode") {
    if u.darkMode.Value {
        applyDarkTheme()
    } else {
        applyLightTheme()
    }
}

proton.Toggle(ctx proton.Context, state *proton.Bool, label string) bool

---

RadioButton

Για να επιλέξετε ακριβώς μία επιλογή από μια ομάδα. Όλα τα κουμπιά σε μια κοινή χρήση ομάδας ένα πεδίο κατάστασης «proton.Enum». Το "κλειδί" είναι αυτό που αποθηκεύεται στο "group.Value". όταν είναι επιλεγμένη αυτή η επιλογή.

type UI struct {
    plan proton.Enum
}

proton.RadioButton(ctx, &u.plan, "free", "Free")
proton.Gap(ctx, 4)
proton.RadioButton(ctx, &u.plan, "pro", "Pro — \$9/mo")
proton.Gap(ctx, 4)
proton.RadioButton(ctx, &u.plan, "team", "Team — \$29/mo")

fmt.Println("selected:", u.plan.Value) // "free", "pro", or "team"

Επιστρέφει "true" στο πλαίσιο που αλλάζει η επιλογή.

proton.RadioButton(ctx proton.Context, group *proton.Enum, key string, label string) bool

Οριζόντια κουμπιά επιλογής — τυλίξτε τα σε Σειρά:

proton.Row(ctx,
    func(ctx proton.Context) { proton.RadioButton(ctx, &u.size, "s", "S") },
    func(ctx proton.Context) { proton.Gap(ctx, 12) },
    func(ctx proton.Context) { proton.RadioButton(ctx, &u.size, "m", "M") },
    func(ctx proton.Context) { proton.Gap(ctx, 12) },
    func(ctx proton.Context) { proton.RadioButton(ctx, &u.size, "l", "L") },
)

---

Ρυθμιστικό

Μια οριζόντια λαβή μεταφοράς για μια τιμή μεταξύ 0,0 και 1,0. Κλιμακώστε το σε όποιο εύρος χρειάζεστε.

type UI struct {
    vol proton.Float
}

v := proton.Slider(ctx, &u.vol)

// v is 0.0–1.0, scale it
volume := int(v * 100)
proton.Caption(ctx, fmt.Sprintf("Volume: %d%%", volume))

Μπορείτε επίσης να διαβάσετε την τιμή απευθείας από την κατάσταση:

proton.Slider(ctx, &u.vol)
fmt.Println(u.vol.Value) // 0.0 to 1.0

proton.Slider(ctx proton.Context, state *proton.Float) float32

---

Γραμμή προόδου

Μη διαδραστικό — δείχνει απλώς την πρόοδο ως γεμάτη γραμμή. Περάστε ένα float32 μεταξύ 0,0 και 1,0.

proton.ProgressBar(ctx, 0.65)    // 65% done
proton.ProgressBar(ctx, 1.0)     // done
proton.ProgressBar(ctx, progress) // from a variable

proton.ProgressBar(ctx proton.Context, progress float32)

---

Εισαγωγή αριθμού

Ένα stepper με κουμπιά − και +. Χειρίζεται το ελάχιστο, μέγιστο και μέγεθος βήματος για εσάς. Επιστρέφει την τρέχουσα τιμή.

type UI struct {
    qty    proton.NumberState
    rating proton.NumberState
}

// integers
qty := proton.NumberInput(ctx, &u.qty, 1, 99, 1)
proton.Caption(ctx, fmt.Sprintf("%d items", int(qty)))

// floats
rating := proton.NumberInput(ctx, &u.rating, 0, 5, 0.5)
proton.Caption(ctx, fmt.Sprintf("%.1f / 5.0", rating))

proton.NumberInput(ctx proton.Context, state *proton.NumberState, min, max, step float64) float64

Η τιμή ξεκινά από «min» κατά την πρώτη χρήση. Βήμα >= 1 εμφανίζει ακέραιους αριθμούς. Το βήμα < 1 εμφανίζει δύο δεκαδικά ψηφία.

---

SelectBox

Ένας αναπτυσσόμενος επιλογέας. Επιστρέφει το ευρετήριο της τρέχουσας επιλεγμένης επιλογής.

type UI struct {
    lang proton.SelectBoxState
}

langs := []string{"Go", "Rust", "Zig", "C", "Python"}

i := proton.SelectBox(ctx, &u.lang, langs)
proton.Caption(ctx, "You picked: "+langs[i])

Το αναπτυσσόμενο μενού εμφανίζεται κάτω από το κουμπί όταν κάνετε κλικ. Κάνοντας κλικ οπουδήποτε έξω το κλείνει.

proton.SelectBox(ctx proton.Context, state *proton.SelectBoxState, options []string) int

Το "Selected" ξεκινάει στο 0. Επιλέξτε "state.Selected >= 0" εάν χρειάζεται να γνωρίζετε εάν ο χρήστης έχει επιλέξει ρητά κάτι.

---

Παράδειγμα πλήρους φόρμας

type SettingsUI struct {
    username proton.Editor
    bio      proton.Editor
    notify   proton.Bool
    dark     proton.Bool
    plan     proton.Enum
    volume   proton.Float
    save     proton.Clickable
}

func drawSettings(ctx proton.Context, s *SettingsUI) {
    proton.H4(ctx, "Settings")
    proton.Gap(ctx, 20)

    proton.Label(ctx, "Username")
    proton.Gap(ctx, 4)
    proton.Input(ctx, &s.username, "your_username")
    proton.Gap(ctx, 14)

    proton.Label(ctx, "Bio")
    proton.Gap(ctx, 4)
    proton.TextArea(ctx, &s.bio, "Tell us something...")
    proton.Gap(ctx, 20)

    proton.Toggle(ctx, &s.dark, "Dark mode")
    proton.Gap(ctx, 8)
    proton.Checkbox(ctx, &s.notify, "Email notifications")
    proton.Gap(ctx, 20)

    proton.Label(ctx, "Plan")
    proton.Gap(ctx, 6)
    proton.RadioButton(ctx, &s.plan, "free", "Free")
    proton.Gap(ctx, 4)
    proton.RadioButton(ctx, &s.plan, "pro", "Pro (\$9/mo)")
    proton.Gap(ctx, 4)
    proton.RadioButton(ctx, &s.plan, "team", "Team (\$29/mo)")
    proton.Gap(ctx, 20)

    proton.Label(ctx, fmt.Sprintf("Volume: %.0f%%", s.volume.Value*100))
    proton.Gap(ctx, 4)
    proton.Slider(ctx, &s.volume)
    proton.Gap(ctx, 28)

    proton.Pad(ctx, 4, func(ctx proton.Context) {
        if proton.Button(ctx, &s.save, "Save Settings") {
            handleSave(s)
        }
    })
}