119 lines
3.5 KiB
HTML
119 lines
3.5 KiB
HTML
<!--
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
|
|
<!--
|
|
`paper-radio-group` allows user to select only one radio button from a set.
|
|
Checking one radio button that belongs to a radio group unchecks any
|
|
previously checked radio button within the same group. Use
|
|
`selected` to get or set the selected radio button.
|
|
|
|
Example:
|
|
|
|
<paper-radio-group selected="small">
|
|
<paper-radio-button name="small" label="Small"></paper-radio-button>
|
|
<paper-radio-button name="medium" label="Medium"></paper-radio-button>
|
|
<paper-radio-button name="large" label="Large"></paper-radio-button>
|
|
</paper-radio-group>
|
|
|
|
See <a href="paper-radio-button.html">paper-radio-button</a> for more
|
|
information about `paper-radio-button`.
|
|
|
|
@group Paper Elements
|
|
@element paper-radio-group
|
|
@extends core-selector
|
|
@homepage github.io
|
|
-->
|
|
|
|
<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
|
|
<link rel="import" href="../core-selector/core-selector.html">
|
|
<link rel="import" href="../paper-radio-button/paper-radio-button.html">
|
|
|
|
<polymer-element name="paper-radio-group" extends="core-selector" role="radiogroup">
|
|
|
|
<template>
|
|
|
|
<core-a11y-keys target="{{}}" keys="up left" on-keys-pressed="{{selectPrevious}}"></core-a11y-keys>
|
|
<core-a11y-keys target="{{}}" keys="down right" on-keys-pressed="{{selectNext}}"></core-a11y-keys>
|
|
|
|
<style>
|
|
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
polyfill-next-selector { content: ':host > *'; }
|
|
::content > * {
|
|
padding: 12px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<shadow></shadow>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
Polymer('paper-radio-group', {
|
|
nextIndex: function(index) {
|
|
var items = this.items;
|
|
var newIndex = index;
|
|
do {
|
|
newIndex = (newIndex + 1) % items.length;
|
|
if (newIndex === index) {
|
|
break;
|
|
}
|
|
} while (items[newIndex].disabled);
|
|
return newIndex;
|
|
},
|
|
previousIndex: function(index) {
|
|
var items = this.items;
|
|
var newIndex = index;
|
|
do {
|
|
newIndex = (newIndex || items.length) - 1;
|
|
if (newIndex === index) {
|
|
break;
|
|
}
|
|
} while (items[newIndex].disabled);
|
|
return newIndex;
|
|
},
|
|
selectNext: function() {
|
|
var node = this.selectIndex(this.nextIndex(this.selectedIndex));
|
|
node.focus();
|
|
},
|
|
selectPrevious: function() {
|
|
var node = this.selectIndex(this.previousIndex(this.selectedIndex));
|
|
node.focus();
|
|
},
|
|
|
|
/**
|
|
* Specifies the attribute to set on the selected element to indicate
|
|
* its active state.
|
|
*
|
|
* @attribute selectedAttribute
|
|
* @type string
|
|
* @default 'checked'
|
|
*/
|
|
selectedAttribute: 'checked',
|
|
|
|
/**
|
|
* The event that would be fired from the item element to indicate
|
|
* it is being selected.
|
|
*
|
|
* @attribute activateEvent
|
|
* @type string
|
|
* @default 'change'
|
|
*/
|
|
activateEvent: 'change'
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</polymer-element>
|