text_input

Function text_input 

Source
pub fn text_input(buffer: RwSignal<String>) -> TextInput
Expand description

Creates a TextInput view. This can be used for basic text input.

§Examples

// Create empty `String` as a text buffer in the read-write signal
let text = RwSignal::new(String::new());
// Create simple text imput from it
let simple = text_input(text)
    // Optional placeholder text
    .placeholder("Placeholder text")
    // Width of the text widget
    .style(|s| s
        .width(250.)
        // Enable keyboard navigation on the widget
        .focusable(true)
     );

// Stylized text example:
let stylized = text_input(text)
    .placeholder("Placeholder text")
    .style(|s| s
        .border(1.5)
        .width(250.0)
        .background(css::LIGHT_GRAY)
        .border_radius(15.0)
        .border_color(css::DIM_GRAY)
        .padding(10.0)
        // Styles applied on widget pointer hover.
        .hover(|s| s.background(css::LIGHT_GRAY.multiply_alpha(0.5)).border_color(css::DARK_GRAY))
        .set(SelectionCornerRadius, 4.0)
        // Styles applied when widget holds the focus.
        .focus(|s| s
            .border_color(css::SKY_BLUE)
            // Styles applied on widget pointer hover when focused.
            .hover(|s| s.border_color(css::SKY_BLUE))
        )
        // Apply class and override some of its styles.
        .class(PlaceholderTextClass, |s| s
            .color(css::SKY_BLUE)
            .font_style(floem::text::Style::Italic)
            .font_weight(Weight::BOLD)
        )
        .font_family("monospace".to_owned())
        .focusable(true)
    );

§Reactivity

The view is reactive and will track updates on buffer signal.

§Info

For more advanced editing see TextEditor.