跳到主要内容

UI组件

Dao3-AUI 有一些标签组件，连接到的是岛三的UI组件。

组件基本使用​

  • 组件长这样：<ui-xxx></ui-xxx>
  • 组件有： ui-text,ui-image,ui-box,ui-input，对应岛三的UI组件类型
  • 组件的属性就是原有岛三属性的横杠形式，例如：
    • textContent(岛三UI) -> text-content(组件)
    • textColor(岛三UI) -> text-color(组件)
    • backgroundColor(岛三UI) -> background-color(组件)
<ui-text
    text-content="hello world"
    text-color="red"
    text-x-alignment="Left"
    background-color="green"
    background-opacity="50%"
></ui-text>

组件属性类型​

位置/尺寸 属性​

  • 指定位置的属性：x,y
  • 指定尺寸的属性：width,height

格式​

可以是很多个值，用加号连接，offset的值为??px，scale的值为??%。举例：

  • x="50px+50%" x在50%的scale基础上再加50px的offset
  • ⚠x="50%+-50px" 负数目前也需要带+在前面

其他属性​

属性类型描述举例
string文本类型text-content="hello world"
number数字类型text-font-size="20"
boolean布尔类型text-bold="true"
color颜色类型(css颜色)text-color="red" background-color="green"
也可以用rgb(r,g,b)和#rrggbb这样格式的颜色
enum枚举类型目前仅 pointerEventBehavior="ENABLE"，见岛三API
vec2二维向量类型暂无属性，格式为x,y
anchor-vec2二维锚点向量类型anchor="50%,50%"
percent百分比类型background-opacity="50%"