framework-ui-web-bootstrap

约定

统一样式

import * from 'tpulse-ui-framework/tpulse-ui.css'

全局上下文对象PageContext

1. 全局事件监听

    import {context} from 'tpulse-ui/PageContext'

    context.addEventListener('click', (event) => {
        console.debug("监听到注册的时间");
    });

ui组件说明

布局

横向布局(单行布局)

    <Hstack>
        <Flex className="content" style="height: 100px">按照内容大小占用
        </Flex>   <!--默认grow = 0-->
        <Flex grow={1}>占满剩余控件</Flex>
    </Hstack>

• 选项
  1. grow
  2. shrink

纵向布局(高度100%布局需要)

   render = () => {
       <Vstack>
            <Flex className="content" style="height: 100px">按照内容大小占用</Flex>   
            <Flex grow={1}>竖向占满剩余控件</Flex>        
        </Vstack>
   }

• 选项
  1. grow

整体布局

    render = (route: Route, menu: Menu, user: User) => {
        <Container routes menu user headers={component[]}></Container>
    }

• 数据结构(model)
  1. Route/RouteItem
  2. Menu/MenuItem
  3. User

面板

DropDown

    <DropDown parent={parentComponent} clickOnHide={false} >
        <!--child-->
    </DropDown>    

1. 选项
   1. parent
   2. clickOnHide

Toast

    import (info, msg) from 'useToast'
    info("fdafasd");
    render = () => {
        <Toast></Toast>
    }

表单

默认支持元素

1. 文本输入框    
2. 单选选择框
3. 可搜索单选选择框
4. 复选选择框
5. 可搜索复选择框

自定义元素组件

表格

测试

ts类的单元测试

1. npm依赖: 安装ts-node
2. 定义单位测试ts类 ***.test.ts
3. 执行测试 npx ts-node ***.test.ts

常用类

HttpRouteClient

用于http通信接口，具体使用查看测试类HttpRouteClient.test.ts

版本升级说明

0.0.20210903002

1. [修复]table.model.ts@PageLoader 泛型化
2. [优化]代码整理
3. [优化]npm发布地址变更: tpulse-framework-web-admin