QD-组件

q-design-web

说明

q-design-web组件库，是基于q-design rn 组件库，依托unir-cli工具编译封装的可用于移动端h5 web页面的组件库。其特点是拥有跟q-design同样的设计规范、使用方法、通用API以及基本一致的视觉效果（因为运行端不同，略有差异）。使得RN 及 q-design 用户可以更快和更低成本的在h5端接入使用组件。

涵盖组件

目前已涵盖组件： AnimatedTab, BottomBar, Bubble, Button, Card, CheckBox, Dialog, EmptyStatus, FloatButton, FontFamily, Icon, Label, NavBar, NoticeItem, NumberInputer, PopupLayer, QToast, RadioBox, Review, Select, Switch, Tab, Tag, Tips 组件API同q-design一致

其中新增组件 Switch, API同React-native 官方Switch一致

特殊说明

⚠️需要注意的是，由于组件编译依托unir-cli以及跨端的原因，同q-design rn组件相比，q-design-web略有差异。与q-design相比略有差异的组件如下：

组件名	q-design 组件包	差异
QToast	@qnpm/q-components	q-design 使用原生toast，web版则是另外实现，样式略有差异
Card	@qnpm/q-design-card	卡片阴影目前需要业务自己实现
Dialog	@qnpm/q-dialog	滚动穿透问题，暂不支持mask点击事件，待解决

安装

q-design-web 组件安装如下：

npm install @qnpm/q-design-web --save --registry=http://npmrepo.corp.qunar.com

使用(以tag组件为例)

import { Tag } from '@qnpm/q-design-web';

export default class Demo extends Component {
    render() {
        return (
            <>
               <Tag
                   dataSource={dataSource}
                   onClickItem={(index, isSelected, title) => {
                       alert(title);
                       const newSource = [...dataSource];
                       newSource[index].isSelected = !isSelected;
                       setDataSource(newSource);
                   }}
                   autoScroll={true}
                   normalItemBackgroundColor={'gray'}
               />
            </>
        );
    }
}

体验

可clone example 工程体验q-design-web组件，工程地址：


http://gitlab.corp.qunar.com/qnpm/q-design-web-example