Input fields are text boxes that all users to type values into them. As with button, you need to provide some assets, specifically font information and a graphic to use as the cursor while a user is inputing values. Indigo's input field is quite basic, but input fields are a bit fiddly to implement. Hopefully it will either save someone some time or be useful as a reference to someone who'd like to do make something more sophisticated.
Setting up an input field is as simple as adding something like this to your view model:
import indigo.* import indigoextras.ui.* // Placeholder values val assets = InputFieldAssets( text = Text("", FontKey("my font"), Material.Bitmap(AssetName("my font sheet"))), cursor = Graphic(10, 5, Material.Bitmap(AssetName("cursor"))) ) val inputField = InputField("<Default text>", assets) .makeSingleLine .moveTo(Point(10, 10))
Then updating it in the view model:
final case class AnotherViewModel(myInputField: InputField) val anotherViewModel = AnotherViewModel(inputField) anotherViewModel.myInputField.update(context)
...and drawing it:
<div id="mdoc-html-run3" data-mdoc-js></div>
Input fields will also emit an
InputFieldChange event when the text they hold is altered by a user. They can also send custom events on focus / focus loss.