text Area
This component generates a textarea
You can optionally pass in a store in order to set the value and react to updates automatically.
To enable or disable it or to make it readOnly just use the well known attributes of the HTML
Possible values to set are( default *) :
size : small | normal * | large
resizeBehavior : none | vertical *| horizontal
placeholder : String | Flow<String>
disable : Boolean | Flow<Boolean>
value -> maybe you want to set an initial value instead of a placeholder
base -> basic properties of an textarea
textArea(store = dataStore) { placeholder { "My placeholder" } // render a placeholder text for empty textarea resizeBehavior { horizontal } // resize textarea horizontal size { small } // render a smaller textarea }
textArea({ // just use the `styling`
parameter! background { color { dark } } color { light } radius { "1rem" }},store = dataStore) {
disable(true) // textarea is disabled now
resizeBehavior { none } // resizing is not possible now
size { large } // render a large textarea
}
textArea { value { dataStore.data } // value depends on value in store disable(true) // editing is disabled, but resizing still works }
textArea { base{ // you have access to base properties of a textarea placeholder("Here is a sample placeholder") changes.values() handledBy dataStore.update } }
See also
Parameters
optional CSS class that should be applied to the element
the ID of the element
a lambda expression for setting up the component itself. Details in TextAreaComponent
the prefix for the generated CSS class resulting in the form `$prefix-$hash`
optional Store that holds the data of the textarea
a lambda expression for declaring the styling as fritz2's styling DSL