ui-prop 参考

基础用法

<ui-prop value="0.5"></ui-prop>

属性

没有特殊说明，默认为可读写，可直接通过 element 调用取值。

带中划线的属性，使用键值对获取值时需改为驼峰式写法，例如 element.autoHeight

event 事件

可以通过事件函数中的 event 对象，调用 event.detail._path 取到配置的 path 属性，调用 event.detail._value 获取当前触发事件组件的 value 值。

type 与 value 对应表

样式控制

<ui-prop name="Color Label" class="blue" type="number" value="20"></ui-prop>

使用效果示例

focused, disabled 控制状态

<ui-prop name="Disabled..." disabled type="string"></ui-prop>
<ui-prop name="Readonly..." readonly type="string"></ui-prop>

indent

控制缩进数

<ui-prop name="Indent 0" ></ui-prop>
<ui-prop name="Indent 1" indent="1">
    <ui-num-input value="20.3" ></ui-num-input>
</ui-prop>
<ui-prop name="Indent 1" indent="1" >
    <ui-checkbox checked></ui-checkbox>
</ui-prop>
<ui-prop name="Indent 1" indent="1" ></ui-prop>
<ui-prop name="Indent 2" indent="2" >
    <ui-slider value="0.5" ></ui-slider>
</ui-prop>
<ui-prop name="Indent 2" indent="2" >
    <ui-slider value="0.5" ></ui-slider>
</ui-prop>

movable

<ui-prop  name="[0]" indent="1" movable>
    <ui-checkbox  ></ui-checkbox>
</ui-prop>
<ui-prop  name="[1]" indent="1" movable>
    <ui-checkbox></ui-checkbox>
</ui-prop>
<ui-prop  name="[2]" indent="1" movable>
    <ui-checkbox></ui-checkbox>
</ui-prop>

removable

当前组件是否有可移除功能

<ui-prop  name="Removable" removable>
    <ui-num-input value="20"></ui-num-input>
</ui-prop>

foldable

是否可折叠

<ui-prop name="foldable..." foldable>
    <ui-input placeholder="Name" ></ui-input>
    <!--需要使用嵌套子组件的方式，将子组件放置在 class 样式为 child 的元素中-->
    <div class="child">
        <ui-prop name="foldable test..." readonly type="string"></ui-prop>
        <ui-prop name="foldable test..." readonly type="string"></ui-prop>
    </div>
</ui-prop>

注意：嵌套子组件不能与 type 自动生成子组件共用，只能选择一种使用方式

tooltip

鼠标上移至 label 区域，显示 ui-hint 提示所设置值

<ui-prop name="Rotation" type="number" value="0" slidable tooltip="相对父节点的旋转，以度为单位，输入正值时顺时针旋转">
    <ui-num-input></ui-num-input>
</ui-prop>

multiline

type 为 string 时，生成 ui-text-area

<ui-prop name="Text (multiline)" type="string" value="Hello World This is Foobar!" multilineauto-height></ui-prop>

slidable

type 为 number 时有效，设置是否可通过在 label 区域拖动，改变值

<ui-prop name="Number" type="number" value="20" slidable></ui-prop>

slider

type 为 number 时，生成 ui-slider

<ui-prop name="Number (slide)" type="number" value="50" step="10" min="0" max="100" slide></ui-prop>

type 为 enum 示例

<ui-prop name="Enum" type="enum" value="2" >
    <div class="user-content">
        <option value="0">Enum 001</option>
        <option value="1">Enum 002</option>
        <option value="2">Enum 003</option>
        <option value="3">Enum 004</option>
    </div>
</ui-prop>