WaftUI基于Waft框架,遵循Genie Design的设计,提供应用层的组件库方案

效果图

image.png

升级

  • v0.3.x 优化了回调事件,对原有框架不支持的如事件进行了支持。
  • demo增加了各个组件的case展示

    安装

    注意: 适配前端框架 0.7.x+
    1. npm install waft-ui --save

    使用

    XML方式引入

    1. {
    2. "usingComponents": {
    3. "x-button": "waft-ui/assembly/button/button"
    4. }
    5. }

    API方式调用

    ```typescript import { Toast, ToastOptions } from “waft-ui”;

let toastOptions = new ToastOptions(); toastOptions.message = “提示文字”; toastOptions.type = “info”; toastOptions.duration = 5000 toastOptions.position = “middle” Toast.show(toastOptions); ```

组件列表

基础组件

2A033CB4-D3E5-4225-916A-CE1B15DE86E3.png

基础交互

7357E7BC-10DB-4383-BDD6-EB7869AE5F2F.png E02FD092-9475-4FD0-BE0A-8C28B027E429.png 3F33B546-2859-4AA4-A1DB-41E6867F02BF.png

内容容器

A83A5145-2DDF-46E4-8B66-C373836E83FD.png 72C52912-01F2-44E0-B5EA-FE4AE987DDFB.png footer.png
swiper.png

高级布局

FFE02F33-F95B-4D99-901D-62CDC7CD8B3D.png CDE25AEF-1154-49AE-9493-B5922982DFCC.png A106667E-CCB7-428A-844E-45DFB9878FA8.png

表单组件

31D881F1-3765-4362-B256-97CD0A7503BC.png image.png 3D2CBEFB-7673-4126-A562-A41A3012DAF7.png

多媒体组件

video.png image.png