lighting-ui/readme.markdown

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

> lighting ui 是一个基于 [Weex](https://weex.apache.org/zh/) 的富交互、轻量级、高性能、三端统一的 金融 UI 组件库。


### 安装

当工程需要使用 UI 组件时，首先需要对 `lib` 目录下的 `package.json` 文件进行设置，引入依赖：
```
{
  "dependencies": {
    "lighting-ui": "*"
  }
}
```
然后在 `lib` 目录下执行 `npm install` 完成安装。
```
npm install
```

## 使用

在需要使用组件的视图中引入 UI 组件，建议大家使用时按需引入，可以节省打包资源。例如当需要使用 `button` 按钮，步骤如下：

1. 引入组件：

```javascript
import LcButton from 'lighting-ui/packages/lc-button'
```
2. 注册组件：

```javascript
components: { LcButton }
```

3. 使用组件：

```html
<lc-button text="确定" type="normal"></lc-button>
```

完整代码为：
```html
<template>
    <div>
         <lc-button text="确定" type="normal"></lc-button>
    </div>
</template>
<script>
    import LcButton from 'lighting-ui/packages/lc-button';
    export default {
        components: { LcButton },
        data(){
            return {};
        }
    }
</script>
<style scoped>
</style>
```

其他组件使用方法类似，改为相对应的组件名即可。

### 文档


|组件名称|分类|描述|
|:--|:--|:--|
|[lc-button](http://document.lightyy.com/zh-cn/api/lighting-ui/button.html)|布局|基础按钮组件|
|[lc-cell](http://document.lightyy.com/zh-cn/api/lighting-ui/cell.html)|布局|单元格组件 展示表单、列表|
|[lc-grid](http://document.lightyy.com/zh-cn/api/lighting-ui/grid.html)|布局|网格|
|[lc-grid-select](http://document.lightyy.com/zh-cn/api/lighting-ui/grid-select.html)|布局|网格选择|
|[lc-lightbox](http://document.lightyy.com/zh-cn/api/lighting-ui/lightbox.html)|布局|轮播图|
|[lc-lightbox-full](http://document.lightyy.com/zh-cn/api/lighting-ui/lightbox-full.html)|布局|幻灯片 图片全屏预览|
|[lc-mask](http://document.lightyy.com/zh-cn/api/lighting-ui/mask.html)|布局|遮罩弹层 可定制内容|
|[lc-overlay](http://document.lightyy.com/zh-cn/api/lighting-ui/overlay.html)|布局|蒙层 常用于 lc-mask、lc-dialog、lc-popup 等的基础蒙层组件|
|[lc-popup](http://document.lightyy.com/zh-cn/api/lighting-ui/popup.html)|布局|弹出层 支持上下左右四个方向面板弹出|
|[lc-switch](http://document.lightyy.com/zh-cn/api/lighting-ui/switch.html)|布局|开关组件 用作三端统一的开关显示|
|[lc-minibar](http://document.lightyy.com/zh-cn/api/lighting-ui/minibar.html)|导航|顶部导航栏组件|
|[lc-tab-bar](http://document.lightyy.com/zh-cn/api/lighting-ui/tab-bar.html)|导航|底部页面切换组件|
|[lc-tab-page](http://document.lightyy.com/zh-cn/api/lighting-ui/tab-page.html)|导航|页面滑动切换组件|
|[lc-captchafield](http://document.lightyy.com/zh-cn/api/lighting-ui/captchafield.html)|数据输入|带有发送验证码的输入框|
|[lc-checkbox](http://document.lightyy.com/zh-cn/api/lighting-ui/checkbox.html)|数据输入|复选列表|
|[lc-countdown](http://document.lightyy.com/zh-cn/api/lighting-ui/countdown.html)|数据输入|倒计时|
|[lc-ep-slider](http://document.lightyy.com/zh-cn/api/lighting-ui/ep-slider/.html)|数据输入|表达式绑定效果的 slider |
|[lc-form](http://document.lightyy.com/zh-cn/api/lighting-ui/form.html)|数据输入|表单|
|[lc-input](http://document.lightyy.com/zh-cn/api/lighting-ui/input.html)|数据输入|单行输入|
|[lc-keyboard](http://document.lightyy.com/zh-cn/api/lighting-ui/keyboard.html)|数据输入|密码键盘|
|[lc-numberfield](http://document.lightyy.com/zh-cn/api/lighting-ui/numberfield.html)|数据输入|货币或数量输入框|
|[lc-passwordfield](http://document.lightyy.com/zh-cn/api/lighting-ui/passwordfield.html)|数据输入|密码输入框|
|[lc-radio](http://document.lightyy.com/zh-cn/api/lighting-ui/radio.html)|数据输入|单选列表|
|[lc-rater](http://document.lightyy.com/zh-cn/api/lighting-ui/rater.html)|数据输入|星级评分|
|[lc-searchbar](http://document.lightyy.com/zh-cn/api/lighting-ui/searchbar.html)|数据输入|搜索条|
|[lc-slider-bar](http://document.lightyy.com/zh-cn/api/lighting-ui/slider-bar/.html)|数据输入|滑动选择条|
|[lc-stepper](http://document.lightyy.com/zh-cn/api/lighting-ui/stepper.html)|数据输入|计数器|
|[lc-textarea](http://document.lightyy.com/zh-cn/api/lighting-ui/textarea.html)|数据输入|多行文本输入|
|[lc-textfield](http://document.lightyy.com/zh-cn/api/lighting-ui/textfield.html)|数据输入|普通输入框|
|[lc-badge](http://document.lightyy.com/zh-cn/api/lighting-ui/badge.html)|数据展示|徽标|
|[lc-calendar-row](http://document.lightyy.com/zh-cn/api/lighting-ui/calendar-row.html)|数据展示|横向日历|
|[lc-indexlist](http://document.lightyy.com/zh-cn/api/lighting-ui/indexlist.html)|数据展示|索引列表|
|[lc-icon](http://document.lightyy.com/zh-cn/api/lighting-ui/icon.html)|数据展示|图标|
|[lc-fold-list](http://document.lightyy.com/zh-cn/api/lighting-ui/fold-list.html)|数据展示|折叠列表|
|[lc-info-list](http://document.lightyy.com/zh-cn/api/lighting-ui/info-list.html)|数据展示|信息列表|
|[lc-lazy-render](http://document.lightyy.com/zh-cn/api/lighting-ui/lazy-render.html)|数据展示|懒加载|
|[lc-loading](http://document.lightyy.com/zh-cn/api/lighting-ui/loading.html)|数据展示|加载提示|
|[lc-marquee](http://document.lightyy.com/zh-cn/api/lighting-ui/marquee.html)|数据展示|跑马灯条|
|[lc-page-calendar](http://document.lightyy.com/zh-cn/api/lighting-ui/page-calendar.html)|数据展示|日历|
|[lc-progress](http://document.lightyy.com/zh-cn/api/lighting-ui/progress.html)|数据展示|进度条|
|[lc-process](http://document.lightyy.com/zh-cn/api/lighting-ui/process.html)|数据展示|流程条|
|[lc-process-row](http://document.lightyy.com/zh-cn/api/lighting-ui/process-row.html)|数据展示|横向流程条|
|[lc-result](http://document.lightyy.com/zh-cn/api/lighting-ui/result.html)|数据展示|结果页|
|[lc-rich-text](http://document.lightyy.com/zh-cn/api/lighting-ui/rich-text.html)|数据展示|富文本|
|[lc-simple-flow](http://document.lightyy.com/zh-cn/api/lighting-ui/simple-flow.html)|数据展示|简易流程|
|[lc-tag](http://document.lightyy.com/zh-cn/api/lighting-ui/tag.html)|数据展示|标签|
|[lc-tag-wall](http://document.lightyy.com/zh-cn/api/lighting-ui/tag-wall.html)|数据展示|标签墙|
|[lc-bank](http://document.lightyy.com/zh-cn/api/lighting-ui/bank.html)|数据展示|银行列表|
|[lc-actionsheet](http://document.lightyy.com/zh-cn/api/lighting-ui/actionsheet.html)|用户操作|操作栏|
|[lc-button-group](http://document.lightyy.com/zh-cn/api/lighting-ui/button-group.html)|用户操作|按钮组|
|[lc-date-picker](http://document.lightyy.com/zh-cn/api/lighting-ui/date-picker.html)|用户操作|日期选择器|
|[lc-dialog](http://document.lightyy.com/zh-cn/api/lighting-ui/dialog.html)|用户操作|对话框|
|[lc-map](http://document.lightyy.com/zh-cn/api/lighting-ui/map.html)|用户操作|地图|
|[lc-noticebar](http://document.lightyy.com/zh-cn/api/lighting-ui/noticebar.html)|用户操作|提醒条|
|[lc-popover](http://document.lightyy.com/zh-cn/api/lighting-ui/popover.html)|用户操作|气泡弹层|
|[lc-picker](http://document.lightyy.com/zh-cn/api/lighting-ui/picker.html)|用户操作|选择器|
|[lc-swipe-cell](http://document.lightyy.com/zh-cn/api/lighting-ui/swipe-cell.html)|用户操作|滑动菜单|
|[lc-tab-group](http://document.lightyy.com/zh-cn/api/lighting-ui/tab-group.html)|用户操作|页签组|
|[lc-tip](http://document.lightyy.com/zh-cn/api/lighting-ui/tip.html)|用户操作|提示|
|[lc-web](http://document.lightyy.com/zh-cn/api/lighting-ui/web.html)|用户操作|外部链接|

了解更多 lighting-ui 的信息，请[点击这里](http://document.lightyy.com/zh-cn/api/lighting-ui/)。


### 更新记录

#### v0.3.130
1. mask等组件兼容折叠屏

#### v0.3.115

1. #131269 lc-passwordfield切换时数据不丢失。
2. #143549 jsn项目中页面跳转地址前面加上index.html时，页面引入lc-dialog组件，Android手机上必现点透，iOS手机上偶现点透。
3. #143971 lc-overlay组件点击阴影层关闭H5下会点透

#### v0.3.110

1.input组件当type为date时兼容min小于max的情况。