下拉菜单 Dropdown

示例

基本形式

<dropdown source={source} />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

修改标题

<dropdown source={source} title="修改标题" />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

禁用某一项，禁用组件

<dropdown source={source} />
<dropdown source={source} disabled />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3（禁用）', disabled: true}
        ]
    }
});

分隔线

<dropdown source={source} />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {divider: true},
            {name: '选项3（禁用）', disabled: true}
        ]
    }
});

按钮自定义

<dropdown source={source}>
    <a class="u-btn u-btn-primary">Primary</a>
</dropdown>
<dropdown source={source}>
    <a class="u-btn u-btn-success">Success</a>
</dropdown>
<dropdown source={source}>
    <a class="u-btn u-btn-warning">Warning</a>
</dropdown>
<dropdown source={source}>
    <a class="u-btn u-btn-error">Error</a>
</dropdown>
<dropdown source={source}>
    <a>Link</a>
</dropdown>

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

单项模板自定义

<dropdown source={source} itemTemplate={@(this.itemTemplate)} />

var component = new RGUI.Component({
    template: template,
    itemTemplate: RGUI._.multiline(function(){/*
<a href={item.url}>{item.name}</a>
    */}),
    data: {
        source: [
            {name: 'Dropdown', url: 'dropdown.html'},
            {name: 'Menu', url: 'menu.html'},
            {name: 'Input2', url: 'input2.html'}
        ]
    }
});

数据绑定

<dropdown source={source} open={open} /> 当前切换的状态：{open}

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

事件

请打开浏览器的控制台查看结果。

<dropdown source={source}
    on-toggle={console.log('on-toggle:', '$event.open:', $event.open)}
    on-select={console.log('on-select:', '$event.selected:', $event.selected)} />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

API

Class

Dropdown

继承自SourceComponent。

Options

new Dropdown()

参数	类型	默认值	数据流向	描述
`data`	object			绑定属性
`data.title`	string	`''`	outer => inner	按钮文字
`data.source`	object[]	`[]`	outer <=> inner	数据源
`data.source[].name`	string		outer => inner	每项的内容
`data.source[].disabled`	boolean	`false`	outer => inner	禁用此项
`data.source[].divider`	boolean	`false`	outer => inner	设置此项为分隔线
`data.itemTemplate`	string	`null`	outer @=> inner	单项模板
`data.open`	boolean	`false`	outer <=> inner	当前为展开/收起状态
`data.disabled`	boolean	`false`	outer => inner	是否禁用
`data.visible`	boolean	`true`	outer => inner	是否显示
`data.class`	string	`''`	outer => inner	补充class
`service`	object		outer @=> inner	数据服务

Methods

dropdown.toggle(open)

展开/收起

参数	类型	默认值	描述
`open`	boolean		展开/收起状态。如果无此参数，则在两种状态之间切换。
返回值	类型	描述
无返回值

dropdown.select(item)

选择某一项

参数	类型	默认值	描述
`item`	object		选择项
返回值	类型	描述
无返回值

Inherited Methods

@deprecated dropdown.$updateSource()

从service中更新数据源

参数	类型	默认值
无参数
返回值	类型	描述
`this`	SourceComponent

Events

dropdown.$on('toggle')

展开/收起时触发

属性	类型	描述
`sender`	object	事件发送对象
`open`	object	展开/收起状态

dropdown.$on('select')

选择某一项时触发

属性	类型	描述
`sender`	object	事件发送对象
`selected`	object	当前选择项