eui-eui.RadioButtonGroup

eui.RadioButtonGroup 使用範例

exml 部分

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.MySkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group horizontalCenter="0" verticalCenter="0">
        <e:Group>
            <!-- groupName 屬性用以分組, group 屬性用以綁定事件, rbg_g1 為 My 組件的自訂義屬性 -->
            <e:RadioButton label="台北" value="台北" groupName="g1" group="{rbg_g1}" selected="true"/>
            <e:RadioButton label="台中" value="台中" groupName="g1" group="{rbg_g1}" />
            <e:RadioButton label="高雄" value="高雄" groupName="g1" group="{rbg_g1}" />
            <e:RadioButton label="男" value="1" groupName="g2" selected="true" />
            <e:RadioButton label="女" value="0" groupName="g2" />
            <e:layout>
                <e:HorizontalLayout gap="10" />
            </e:layout>
        </e:Group>
        <e:layout>
            <e:VerticalLayout />
        </e:layout>
    </e:Group>
</e:Skin>

typescript 部分

class My extends eui.Component {

    /** 宣告 RadioButtonGroup, 並用於標籤 */
    private rbg_g1: eui.RadioButtonGroup = new eui.RadioButtonGroup;

    protected createChildren() {
        super.createChildren();
        // 跟 MySkin 建立關聯
        this.skinName = skins.MySkin;

        // 觀察選中值
        this.rbg_g1.addEventListener(eui.UIEvent.CHANGE, e => console.log(e.target.selectedValue), this);
    }

}