Merge branch 'master' of github.com:bd-js/bd-js.github.io

public/docset/ui/wc-textarea.md

@@ -0,0 +1,127 @@
+## WC-TEXTAREA
+> 通过鼠标或键盘输入数字。
+
+
+
+### 基础用法
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/textarea.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
+  <wc-textarea type="primary" ></wc-textarea>
+  <wc-textarea type="info" ></wc-textarea>
+  <wc-textarea type="success" ></wc-textarea>
+  <wc-textarea type="warning" ></wc-textarea>
+</wc-space>
+<wc-space>
+  <wc-textarea ></wc-textarea>
+  <wc-textarea type="help" ></wc-textarea>
+  <wc-textarea type="secondary" ></wc-textarea>
+  <wc-textarea type="danger"></wc-textarea>
+</wc-space>
+  </wc-lang>
+    <wc-lang slot="css">
+    wc-textarea{ width:200px; }
+  </wc-lang>
+</wc-sandbox>
+
+
+
+
+
+
+
+### 状态
+文本框有2种状态, `readonly` 和 `disabled`, 这2种状态下, value值都无法被修改。
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/textarea.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
+  <wc-textarea  value="x"></wc-textarea>
+  <wc-textarea  readonly></wc-textarea>
+  <wc-textarea  disabled></wc-textarea>
+</wc-space>
+  </wc-lang>
+  <wc-lang slot="css">
+    wc-textarea{ width:250px; }
+  </wc-lang>
+</wc-sandbox>
+
+
+### 显示字数限制
+使用`show-limit` 属性, 可以实时显示当前字符数和最大可输入字数。
+<br/><br/>
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/textarea.js'
+import '//jscdn.ink/@bd/ui/latest/icon/index.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
+  <wc-textarea  show-limit ></wc-textarea>
+  <wc-textarea  show-limit maxlength="100" ></wc-textarea>
+
+</wc-space>
+<wc-space>
+    
+</wc-space>
+  </wc-lang>
+  <wc-lang slot="css">
+    wc-textarea{ width:250px; }
+  </wc-lang>
+</wc-sandbox>
+
+### 高度自适应
+使用`autosize`属性，可让文本域高度自适应内容，当设置`maxheight`时。输入内容超过`maxheight`则出现滚动条。
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/textarea.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
+  <wc-textarea autosize></wc-textarea>
+  <wc-textarea autosize maxheight="200" placeholder="maxheight:300"></wc-textarea>
+
+</wc-space>
+  </wc-lang>
+  <wc-lang slot="css">
+    wc-textarea{ width:250px; }
+  </wc-lang>
+</wc-sandbox>
+
+
+
+
+
+
+### 完整APIs
+
+|  属性  |  值类型  |   默认值   |     描述   |
+|  :-:  |   :-:   |   :-:   |     -   |
+|  value |  String |  无    | 输入框绑定值	 |
+|  type  |  String  |   无   |   输入框类型, 仅能决定输入框的颜色, 无额外作用, 可选值有: `primary、info、success、warning、default、secondary、danger`   |
+|  placeholder | String | 无 | 文本域占位文本 |
+|  autofocus  |   Boolean  | false   |  输入框的加载状态, 为`true`时, 输入框会自动获得焦点 |
+|  disbaled  |   Boolean  | false   |  输入框的禁用状态, 为`true`时, value不可更改 |
+|  readonly  |   Boolean  | false   | 输入框的只读状态, 为`true`时value不可更改。|
+|  maxlength  |   Number  |  无   | 最大输入字符数  |
+|  minlength  |   Number  |  无   | 最小输入字符数，不达到最小字数不会触发`submit`事件  |
+|  autosize  |   Boolean  |  false   | 开启自适应内容高度 |
+|  maxheight  |   Number  |  无   | 设置`autosize`后才生效，超过最大高度时显示滚动条  |
+|  minheight |   Number  |  无   | 文本域的最小高度，设置`autosize`后才生效  |
+|  lazy  |   Number  |  0   |  为输入框设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发`submit`，`input`事件  |
+
+### 事件
+| 事件名 | 说明 | 回调参数 |
+|  :-:  |   :-:   |   :-:   |     -   |
+| input | 输入值时触发 | (event: Event) |
+| submit | 按回车时触发 | (event: Event) |