diff options
author | elmot <elmot@vaadin.com> | 2015-09-25 16:40:44 +0300 |
---|---|---|
committer | elmot <elmot@vaadin.com> | 2015-09-25 16:40:44 +0300 |
commit | a1b265c318dbda4a213cec930785b81e4c0f7d2b (patch) | |
tree | b149daf5a4f50b4f6446c906047cf86495fe0433 /documentation/components/components-textarea.asciidoc | |
parent | b9743a48a1bd0394f19c54ee938c6395a80f3cd8 (diff) | |
download | vaadin-framework-a1b265c318dbda4a213cec930785b81e4c0f7d2b.tar.gz vaadin-framework-a1b265c318dbda4a213cec930785b81e4c0f7d2b.zip |
Framework documentation IN
Change-Id: I767477c1fc3745f9e1f58075fe30c9ac8da63581
Diffstat (limited to 'documentation/components/components-textarea.asciidoc')
-rw-r--r-- | documentation/components/components-textarea.asciidoc | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/documentation/components/components-textarea.asciidoc b/documentation/components/components-textarea.asciidoc new file mode 100644 index 0000000000..7811c7ba4b --- /dev/null +++ b/documentation/components/components-textarea.asciidoc @@ -0,0 +1,91 @@ +--- +title: TextArea +order: 10 +layout: page +--- + +[[components.textarea]] += [classname]#TextArea# + +[classname]#TextArea# is a multi-line version of the [classname]#TextField# +component described in +<<dummy/../../../framework/components/components-textfield#components.textfield,"TextField">>. + +The following example creates a simple text area: + + +[source, java] +---- +// Create the area +TextArea area = new TextArea("Big Area"); + +// Put some content in it +area.setValue("A row\n"+ + "Another row\n"+ + "Yet another row"); +---- +See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textarea.basic[on-line example, window="_blank"]. + +The result is shown in <<figure.components.textarea>>. + +[[figure.components.textarea]] +.[classname]#TextArea# Example +image::img/textarea-basic.png[] + +You can set the number of visible rows with [methodname]#setRows()# or use the +regular [methodname]#setHeight()# to define the height in other units. If the +actual number of rows exceeds the number, a vertical scrollbar will appear. +Setting the height with [methodname]#setRows()# leaves space for a horizontal +scrollbar, so the actual number of visible rows may be one higher if the +scrollbar is not visible. + +You can set the width with the regular [methodname]#setWidth()# method. Setting +the size with the __em__ unit, which is relative to the used font size, is +recommended. + +[[components.textarea.wordwrap]] +== Word Wrap + +The [methodname]#setWordwrap()# sets whether long lines are wrapped ( +[literal]#++true++# - default) when the line length reaches the width of the +writing area. If the word wrap is disabled ( [literal]#++false++#), a vertical +scrollbar will appear instead. The word wrap is only a visual feature and +wrapping a long line does not insert line break characters in the field value; +shortening a wrapped line will undo the wrapping. + + +[source, java] +---- +TextArea area1 = new TextArea("Wrapping"); +area1.setWordwrap(true); // The default +area1.setValue("A quick brown fox jumps over the lazy dog"); + +TextArea area2 = new TextArea("Nonwrapping"); +area2.setWordwrap(false); +area2.setValue("Victor jagt zwölf Boxkämpfer quer "+ + "über den Sylter Deich"); +---- +See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textarea.wordwrap[on-line example, window="_blank"]. + +The result is shown in <<figure.components.textarea.wordwrap>>. + +[[figure.components.textarea.wordwrap]] +.Word Wrap in [classname]#TextArea# +image::img/textarea-wordwrap.png[] + + +[[components.textarea.css]] +== CSS Style Rules + + +[source, css] +---- +.v-textarea { } +---- + +The HTML structure of [classname]#TextArea# is extremely simple, consisting only +of an element with [literal]#++v-textarea++# style. + +CSS Styling + + |