Lighting-ui NPM

lighting ui 是一个基于 Weex 的富交互、轻量级、高性能、三端统一的金融 UI 组件库。

安装

当工程需要使用 UI 组件时，首先需要对 lib 目录下的 package.json 文件进行设置，引入依赖：

{
  "dependencies": {
    "lighting-ui": "*"
  }
}

然后在 lib 目录下执行 npm install 完成安装。

npm install

使用

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

引入组件：

import LcButton from 'lighting-ui/packages/lc-button'

注册组件：

components: { LcButton }

使用组件：

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

完整代码为：

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