Scenic.Components.text_field

You're seeing just the function text_field, go back to Scenic.Components module for more information.
Link to this function

text_field(graph, data, options \\ [])

View Source

Specs

text_field(
  source :: Scenic.Graph.t() | Scenic.Primitive.t(),
  data :: String.t(),
  options :: list()
) :: Scenic.Graph.t() | Scenic.Primitive.t()

Add a TextField 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

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}
)