如何为可重用的自定义元素列表扩展 paper-dropdown-menu?
How to extend paper-dropdown-menu for a reusable custom element list?
我有一个需要成为可重用组件的时区列表。如何使我的时区列表成为 Polymer 中的可重用组件?我需要这个自定义元素来提供是否选择了时区 (isSelected) 和函数或 属性 来获取选定的时区名称。
这让我抓狂!
提前致谢。下面是一个名为 'time-zones.html' 的组件文件。我删除了我正在尝试的所有 BS JavaScript 因为显然它不起作用。唯一有效的是加载列表。
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-dropdown/paper-dropdown.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<polymer-element name="lt-timezones-input" attributes="timezones">
<template>
<style>
paper-dropdown-menu {
box-sizing: border-box;
width: 100%;
}
core-menu {
box-sizing: border-box;
width: 90%;
}
paper-item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<paper-dropdown-menu id="ddl" label="Time Zone">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template id="list" repeat="{{timezones}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<!-- shadow DOM here -->
</template>
<script>
Polymer('lt-timezones-input', {
created: function () {
this.timezones = [
'Eastern Standard Time',
'Central Standard time',
'Mountain Standard Time',
'Pacific Standard Time'
];
}
});
</script>
</polymer-element>
这是一种可能的解决方案:Plunk
core-select这里使用事件
<paper-dropdown-menu on-core-select="{{item_changed}}">
我有一个需要成为可重用组件的时区列表。如何使我的时区列表成为 Polymer 中的可重用组件?我需要这个自定义元素来提供是否选择了时区 (isSelected) 和函数或 属性 来获取选定的时区名称。
这让我抓狂!
提前致谢。下面是一个名为 'time-zones.html' 的组件文件。我删除了我正在尝试的所有 BS JavaScript 因为显然它不起作用。唯一有效的是加载列表。
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-dropdown/paper-dropdown.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<polymer-element name="lt-timezones-input" attributes="timezones">
<template>
<style>
paper-dropdown-menu {
box-sizing: border-box;
width: 100%;
}
core-menu {
box-sizing: border-box;
width: 90%;
}
paper-item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<paper-dropdown-menu id="ddl" label="Time Zone">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template id="list" repeat="{{timezones}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<!-- shadow DOM here -->
</template>
<script>
Polymer('lt-timezones-input', {
created: function () {
this.timezones = [
'Eastern Standard Time',
'Central Standard time',
'Mountain Standard Time',
'Pacific Standard Time'
];
}
});
</script>
</polymer-element>
这是一种可能的解决方案:Plunk
core-select这里使用事件
<paper-dropdown-menu on-core-select="{{item_changed}}">