SInput

This is a basic input box, often used in forms, divided into two types: text and password

examples

#![allow(unused)]
fn main() {
import {SText,SInput,SButton, SIcon,SPopup} from "../../index.slint";
import {Themes} from "../../use/index.slint";
import { TextEdit , LineEdit} from "std-widgets.slint";
import { Invoke } from "./invoke_input.slint";

export component TestInput inherits Window {
  height: 500px;
  width: 600px;
  
  p:=SPopup {
    Invoke {}
  }
  SInput{
    y: 20px;
    placeholder :"please enter your username";
    card-width:300px;
    clearable: true;
    text:"SurrealismUI - input";
    accepted(res)=>{
      debug("content in input:" + res);
      p.open();
    }
    changed(change-res)=>{
      debug(change-res);
    }
    
  }
 
  w:=SInput{
    y: 80px;
    theme:Themes.Success;
    type:InputType.password;
    password:true;
  }
  SInput{
    y: 140px;
    card-width: 20rem;
    theme:Themes.Error;
    disabled:true;
    text:"disabled";
  }
  SInput{
    y: 200px;
    card-width: 18rem;
    theme:Themes.Dark;
  }

  SInput{
    y: 260px;
    card-width: 160px;
    theme:Themes.Warning;
    clearable:true;
  }
  SInput{
    y: 320px;
    card-width: 18rem;
    theme:Themes.Info;
    type:InputType.text;
    clearable:true;
    password:true;
    text:"test password";
    
  }
}
}

properties:

• in property font-weight : font weight for input
• in property placeholder: default placeholder which you wanna show when no text
• in property theme: Surrealism themes
• in property input-width: Please do not use width to adjust the length of the input box , use this property to instead
• in property font-size: font size
• in property disabled: can input be edited
• in property clearable: can input be cleared
• in property password: can the password input display the password
• out property has-focus : input is focused or not
• private property placeholder-color : placeholder color
• in-out property type : input type (text or password)
• in-out property font-color : font color
• in-out property icon-color : icon color
• in-out property text : the text of the input

functions:

• pure public function get() ->string : get text
• public function set(text:string) : set text
• public function clear() : clear text
• public function select-all() : select all
• public function clear-selection() : clears the selection
• public function cut() : copies the selected text to the clipboard and removes it from the editable area
• public function copy() : copies the selected text to the clipboard
• public function paste() : pastes the text text of the clipboard at the cursor position

callbacks:

• callback accepted(string) : run when pressed down enter key
• callback changed(string) : run when text changed