Panel

最基础的标签,相当于HTML的div

API

基础样式

默认情况下,PUI的元素是没有任何样式的,所以一般都需要引入Dota2的基础样式

<styles>
    <include src="s2r://panorama/styles/dotastyles.vcss_c" />
</styles>

排版

PUI的元素不像HTML的元素一样分inlineblock等等这些属性,PUI的所有元素一致都是定位在父类的左上角。

PUI的排版也较为简单,只需要CSS中的flow-children属性,当然这个是PUI特有的,这个是决定子元素是如何排版的

flow-children有以下值

描述
none默认,无
down竖直排版
right水平排版
right-wrap水平排版,超过父类边界的子元素自动换行

<Panel style="flow-children:right;">

    <!-- 第一列 -->
    <Panel style="margin-right:50px;">
        <Panel style="width:64px;height:64px;background-color:#900;" />
        <Panel style="width:32px;height:32px;background-color:#090;" />
        <Panel style="width:16px;height:16px;background-color:#009;" />
    </Panel>

    <!-- 第二列 -->
    <Panel style="margin-right:50px;flow-children:down;">
        <Panel style="width:64px;height:64px;background-color:#900;" />
        <Panel style="width:32px;height:32px;background-color:#090;" />
        <Panel style="width:16px;height:16px;background-color:#009;" />
    </Panel>

    <!-- 第三列 -->
    <Panel style="margin-right:50px;flow-children:right;">
        <Panel style="width:64px;height:64px;background-color:#900;" />
        <Panel style="width:32px;height:32px;background-color:#090;" />
        <Panel style="width:16px;height:16px;background-color:#009;" />
    </Panel>

    <!-- 第四列 -->
    <Panel style="margin-right:50px;flow-children:right-wrap;width:100px;">
        <Panel style="width:64px;height:64px;background-color:#900;" />
        <Panel style="width:32px;height:32px;background-color:#090;" />
        <Panel style="width:16px;height:16px;background-color:#009;" />
    </Panel>

</Panel>

alt

定位

PUI中可以使用position,x,y,transform来改变位置,当然这是相对父类来定位;

定位在右下角,垂直居中这些也很简单,关键的两个属性vertical-alignhorizontal-align

注意:

  • 如果父类是竖直排版,子元素应该只使用horizontal-align
  • 如果父类是水平排版,子元素应该只使用vertical-align

vertical-align的值

描述
top默认,顶部
bottom顶部
center垂直居中
middle等同于center

horizontal-align的值

描述
left默认,左
right
center水平居中
middle等同于center

  • XML
<Panel hittest="false" class="ExmpleRoot" >
    <Panel id="ExmpleFrame" >
        <!-- 左上角 -->
        <Panel class="top-left red" />

        <!-- 顶部水平居中 -->
        <Panel class="top-center green" />

        <!-- 右上角 -->
        <Panel class="top-right red" />

        <!-- 左垂直居中 -->
        <Panel class="middle-left green" />

        <!-- 居中 -->
        <Panel class="middle-center blue" />

        <!-- 右垂直居中 -->
        <Panel class="middle-right green" />

        <!-- 左下角 -->
        <Panel class="bottom-left red" />

        <!-- 底部水平居中 -->
        <Panel class="bottom-center green" />

        <!-- 右下角 -->
        <Panel class="bottom-right red" />
    </Panel>
</Panel>
  • CSS
.ExmpleRoot{
    width: 100%;
    height: 100%;
}

#ExmpleFrame {
    width: 512px;
    height: 512px;
    background-color: #1e1e1e;
    horizontal-align: center;
    vertical-align: middle;
}

#ExmpleFrame > Panel {
    width: 64px;
    height: 64px;
}

.red{
    background-color: #A92900;
}

.green{
    background-color: #00A15A;
}

.blue{
    background-color: #0068B3;
}

.top-left {
    vertical-align: top;
    horizontal-align: left;
}

.top-center {
    vertical-align: top;
    horizontal-align: center;
}

.top-right {
    vertical-align: top;
    horizontal-align: right;
}

.middle-left {
    vertical-align: middle;
    horizontal-align: left;
}

.middle-center {
    vertical-align: middle;
    horizontal-align: center;
}

.middle-right {
    vertical-align: middle;
    horizontal-align: right;
}

.bottom-left {
    vertical-align: bottom;
    horizontal-align: left;
}

.bottom-center {
    vertical-align: bottom;
    horizontal-align: center;
}

.bottom-right {
    vertical-align: bottom;
    horizontal-align: right;
}

alt

音效

可以使用API播放音效Game.EmitSound(string sound)

也可以通过CSS中的sound属性,可以使用音效事件播放

Button:active{
    sound: "ui.contract_assign"
}