Skip to content

Commit e97511c

Browse files
authored
Merge pull request alibaba#1458 from alibaba/doc-feature-textarea
*[doc] textarea
2 parents b4820f3 + 1276f68 commit e97511c

File tree

2 files changed

+76
-0
lines changed

2 files changed

+76
-0
lines changed

doc/SUMMARY.md

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
* [text](/components/text.md)
5050
* [image](/components/image.md)
5151
* [input](/components/input.md)
52+
* [textarea](/components/textarea.md)
5253
* [switch](/components/switch.md)
5354
* [slider](/components/slider.md)
5455
* [indicator](/components/indicator.md)

doc/components/textarea.md

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# <textarea>
2+
<span class="weex-version">0.8</span>
3+
<a href="https://github.com/weexteam/article/issues/95" class="weex-translate">cn</a>
4+
5+
6+
### Summary
7+
8+
The weex builtin component ``textarea`` is used to create interactive controls to accept data from users. It can be a multi-line [input](./input.md).
9+
10+
**Notes:** `<textarea>` support all event which `<input>` had.
11+
12+
### Child Components
13+
14+
This component supports no child components.
15+
16+
### attributes
17+
18+
- `value`: &lt;string&gt; the value of the control.
19+
- `placeholder`: &lt;string&gt; a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds.
20+
- `disabled`: &lt;boolean&gt; a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls.
21+
- `autofocus`: &lt;boolean&gt; a boolean attribute lets you specify that a form control should have input focus when the page loads.
22+
- `rows:`&lt;number&gt; a number which can specify the height of textarea, default is `2`.
23+
24+
Other attributes please check out the [common attributes](../references/common-attrs.md).
25+
26+
### Styles
27+
28+
**text styles**: checkout [text styles](../references/text-style.md)
29+
30+
- support `color` style.
31+
- support `font-size` style.
32+
- support `font-style` style.
33+
- support `font-weight` style.
34+
- support `text-align` style.
35+
36+
37+
**common styles**: check out [common styles for components](../references/common-style.md)
38+
39+
- support flexbox related styles.
40+
- support box model related styles.
41+
- support ``position`` related styles.
42+
- support ``opacity``, ``background-color`` etc.
43+
44+
### Events
45+
46+
- `input`: the value of an element changes.
47+
- `change`: the change event is fired when a change to the component's value is commited by the user. It always come after a ``blur`` event.
48+
- `focus`: a component has received focus.
49+
- `blur`: a component has lost focus.
50+
51+
**common events**: check out the [common events](../references/common-event.md)
52+
53+
- support `appear` / `disappear` event. Check out [common events](../references/common-event.md).
54+
55+
**Notes:** `<textarea>` does not support the common-event `click`. Please listen to the `input` or `change` event instead.
56+
57+
### Parameters of events' object
58+
59+
- for ``input`` and ``change`` events:
60+
- `value`: the value of the component who dispatched this event.
61+
- `timestamp`: the time stamp of the event.
62+
- for ``focus`` and ``blur`` events:
63+
- `timestamp`: the time stamp of the event.
64+
65+
### Example
66+
67+
```
68+
<div>
69+
<textarea
70+
autofocus="true"
71+
placeholder="..."
72+
value="I am a multiple input">
73+
</textarea>
74+
</div>
75+
```

0 commit comments

Comments
 (0)