Scenic.Component.Input.TextField (Scenic v0.10.3) View Source

Add a text field input to a graph

Data

initial_value

  • initial_value - is the string that will be the starting value

Messages

When the text in the field changes, it sends an event message to the host scene in the form of:

{:value_changed, id, value}

Styles

Text fields honor the following styles

  • :hidden - If false the component is rendered. If true, it is skipped. The default is false.
  • :theme - The color set used to draw. See below. The default is :dark

Additional Styles

Text fields honor the following list of additional styles.

  • :filter - Adding a filter option restricts which characters can be entered into the text_field component. The value of filter can be one of:
    • :all - Accept all characters. This is the default
    • :number - Any characters from "0123456789.,"
    • "filter_string" - Pass in a string containing all the characters you will accept
    • function/1 - Pass in an anonymous function. The single parameter will be the character to be filtered. Return true or false to keep or reject it.
  • :hint - A string that will be shown (greyed out) when the entered value of the component is empty.
  • :type - Can be one of the following options:
    • :all - Show all characters. This is the default.
    • :password - Display a string of '*' characters instead of the value.
  • :width - set the width of the control.

Theme

Text fields work well with the following predefined themes: :light, :dark

To pass in a custom theme, supply a map with at least the following entries:

  • :text - the color of the text
  • :background - the background of the component
  • :border - the border of the component
  • :focus - the border while the component has focus

Usage

You should add/modify components via the helper functions in Scenic.Components

Examples

graph
|> text_field("Sample Text", id: :text_id, translate: {20,20})

graph
|> text_field(
  "", id: :pass_id, type: :password, hint: "Enter password", translate: {20,20}
)

Link to this section Summary

Link to this section Functions

Link to this function

add_to_graph(graph, data \\ nil, opts \\ [])

View Source

Specs

add_to_graph(graph :: Scenic.Graph.t(), data :: any(), opts :: list()) ::
  Scenic.Graph.t()

Callback implementation for Scenic.Component.add_to_graph/3.