Add a text field input to a graph

data

Data

initial_value

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

messages

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

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-options

Additional Options

Text fields honor the following list of additional options.

• :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.
• :hint_color - any valid color.
• :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

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

Usage

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

examples

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