lighting-ui/packages/lc-form/README_cn.md

A rich interaction, lightweight, high performance UI library based on Weex

# lc-form

> Weex 表单组件

## [Demo](https://h5.m.taobao.com/trip/wx-detection-demo/button/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwx-detection-demo%2Fbutton%2Findex.weex.js)

<img src="https://img.alicdn.com/tfs/TB1aMRGhgvD8KJjy0FlXXagBFXa-562-1000.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1b0tMhf6H8KJjy0FjXXaXepXa-200-200.png" width="160"/>

## 使用方法

```vue
<template>
  <lc-form title="小标题" label-width="140px" label-align="left">
    <lc-cell label="列表项" 
      value="value" 
      has-arrow="true" 
      :has-bottom-border="false">
    </lc-cell>
    <lc-input label="标题" 
      v-model="value" 
      placeholder="请输入标题" 
      :has-top-border="false"
      :has-bottom-border="false">
    </lc-input>
    <lc-textarea label="备注" 
      placeholder="请填写备注" 
      :rows="4" 
      :max="140"
      :has-top-border="false"></lc-textarea>
  </lc-form>
</template>

<script>
  import { LcForm, WxcCell, LcInput, LcTextarea } from '../../index';
  import Title from '../_mods/title.vue';
  import Category from '../_mods/category.vue';
 
  export default {
    components: { Title, Category, LcForm, WxcCell, LcInput, LcTextarea },
    data: () => ({
      value: ''
    })
  }
</script>

```
更详细代码可以参考 [这里](https://github.com/alibaba/weex-ui/blob/master/button/loading/index.vue)

### 可配置参数
| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:| :----------:|
| **`title`** | `string` | `N` | `-` | 表单标题文字 |
| **`titleColor`** | `string` | `N` | `-` | 表单标题颜色 |
| **`labelWidth`** | `number` | `N` | `-` | 表单项的标签宽度 |
| **`labelAlign`** | `string` | `N` | `-` | 表单项的标签文字对齐方式 `left`/`center`/`right` |
| **`labelMarginRight`** | `number` | `N` | `-` | 表单项的标签右边距 |

<!-- - 注1：disabled 样式会覆盖掉默认样式
- 注2：对默认按钮样式的覆盖全部依赖btnStyle进行，详细样式可以参考 [type.js](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-button/type.js)
- 注2：对默认字体样式的覆盖全部依赖textStyle进行，详细样式可以参考 [type.js](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-button/type.js) -->

<!-- ### 事件回调

```
// `@wxcButtonClicked="wxcButtonClicked"`
将会返回 e, type, disabled
``` -->