【RISC-V 生态软件系列】Waft UI基础一：Button的使用方法

获取示例源码

git clone git@gitee.com:tsing-qiu/waft-ui.git
硬件准备


ui demo整体说明

页面导航


{
  "pages": [
    "pages/home/index",
    "pages/test-dialog/index",
    "pages/test-list/index",
    "pages/test-loading/index",
    "pages/test-swiper/index",
    "pages/test-video/index",
    "pages/test-picker/index",
    "pages/test-slider/index",
    "pages/test-button/index",
    "pages/test-navbar/index",
    "pages/test-tabs/index",
    "pages/test-image/index"
  ],
  "default": "pages/home/index",
  "window": {
    "defaulttitle": "Waft UI"
  }
}
Button使用








样式文件


.wrapper {
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #eeeeee;
}
.title {
    color: #2b3852;
    font-size: 26rpx;
    margin: 5rpx 0;
}
.flex {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}
.dot {
    width: 10rpx;
}
布局文件



  
  
    按钮类型
   
      
      
      
      
   
    禁用状态
   
      
      
      
   
    按钮大小
   
      
      
      
   
    带图标
   
      
   
    自定义颜色
   
      
   
  

逻辑控制


import { Page, Props, history, Event} from 'waft';
import { JSON, JSONObject } from "waft-json";

export class TestList extends Page {
  constructor(props: Props) {
    super(props);
  }
}
效果展示


.build --aot=true --aotTarget=riscv64
.simulator --width=800 --height=480 --wasm=build/app.wasm




文章转载自：平头哥芯片开放社区 作者：晚空