Module input_text 

GTextInput

is similar to google material text field (but not identical) https://material-web.dev/components/text-field It allows you to choose style, add leading and/or trailing icons, or leading and/or trailing icon buttons.

The key size attribute of input field is font_size. It bonds a lot of other sizes of input text field and has the default value 16px. According to this 1px here = 0.0625em

GTextInput has a lot of attributes, but only id, onchange and label are required. Label here has the same role as placeholder. If you do not need label, add it with empty double quotes "". All other attributes with default parameters:

• style: GInputStyle, [default GInputStyle::Outlined]
• name: AttrValue, [default “”]
• event: GInputEvent, [default GInputEvent::OnChange]
• input_type: AttrValue, [default “text”]. Another variants: password, search, number, month, url, etc.
• class: AttrValue, [default “”]
• required: bool, [default false]
• multiple: bool, [default false]
• readonly: bool, [default false]
• maxlength: Option<i32>, [default None]
• max: Option<AttrValue>, [default None]
• minlength: Option<i32>, [default None]
• min: Option<AttrValue>, [default None]
• step: Option<AttrValue>, [default None]
• no_spinner: Option<bool>, [default None]
• value: AttrValue, [default “”]
• autocomplete: AttrValue, [default “off”]
• autofocus: bool, [default false]
• disabled: bool, [default false]
• inputmode: Option<AttrValue>, [default None]
• id: AttrValue,
• label: AttrValue,
• onchange: Callback<AttrValue>,
• width: AttrValue, [default “100%”]
• height: Option<AttrValue> [default 3.5em] Be careful to change this! It can break the sizes of text field. Better use em, e.g. 3.4em or 2em
• font_size: AttrValue, [default “16px”]
• border_radius: AttrValue, [default “4px”] It is similar to container_shape in google material buttons
• border_color: AttrValue, [default “grey”]
• border_color_hover: AttrValue, [default “black”]
• border_focus_color: AttrValue, [default “#6200ee”]
• label_background_color: AttrValue, [default “white”]
• label_text_color: AttrValue, [default “#aaa”]
• align_supporting_text: AttrValue, [default “left”]
• supporting_text_color: Option<AttrValue>, [default None] e.g. black or red or #ffffff
• supporting_text: Option<AttrValue>, [default None] e.g. *required or Error
• no_asterisk: bool, [default false]
• has_leading_icon: bool, [default false]
• has_trailing_icon: bool, [default false]

See the describtion of this attributes here: https://material-web.dev/components/text-field/#api

Examples

use yew::prelude::*;
use yew_google_material::prelude::*;
 
let onchange_username = Callback::from(|username: AttrValue| {Msg::InputUsername(username)});
 
<GTextInput
id="username_text_login_name"
onchange={onchange_username} 
label="Имя пользователя" />

Also you can add leading and trailing GIcons, change style, change Event to InputEvent and do many other things via attributes in this way:

use yew::prelude::*;
use yew_google_material::prelude::*;
 
let search_input = Callback::from(|search_input: AttrValue| {Msg::Search(search_input)});
 
<GTextInput
    id="username_text_login_name"
    event={GInputEvent::OnInput}
    oninput={search_input} 
    has_leading_icon=true
    has_trailing_icon=true
    input_type="text" 
    supporting_text="text"
    label="Введите поисковый запрос" >
    <GIcon 
       icon="search" 
       leading_icon=true
       icon_style={GIconStyle::Outlined} 
    />
    <GIcon 
       icon="cancel" 
       trailing_icon=true
       icon_style={GIconStyle::Outlined} 
    />
</GTextInput>

If you need to add trailing button icon inside input field, instead of GIcon use GButton inside <GTextInput></GTextInput> with attributes: has_icon (icon name from fonts.google.com/icons), trailing_icon (true), parent (DependsOn::GTextInput), icon_style (Outlined, Rounded or Sharp)

Do not use label attribute for GButton inside GTextInput!

<GTextInput
    id="username_text_login_name"
    onchange={username_input} 
    input_type="text" 
    has_trailing_icon=true
    supporting_text="text"
    label="Введите поисковый запрос" >
    <GButton 
        id="login_button"
        button_type="button"
        parent={DependsOn::GTextInput}      // required inside GTextInput
        style={GButtonStyle::Outlined}      // required for icon inside GButton
        label_color="#6750A4"
        has_icon="login"                    // required for icon inside GButton
        trailing_icon=true
        icon_style={GIconStyle::Outlined}   // required for icon inside GButton
    />
</GTextInput>

If you need leading button icon element inside GTextInput, just remove trailing_icon attribute from GButton, add has_leading_icon=true for GTextInput and remove has_trailing_icon=true. Attention! It is recomended to use button_type attribute with "button", or your button will be on its own inside <form></form> element.

Structs

GTextInput

GTextInputProps

Enums

GInputEvent

Msg