iron-pages.html 2.12 KB
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../iron-selector/iron-selectable.html">

`iron-pages` is used to select one of its children to show. One use is to cycle through a list of
children "pages".


    <iron-pages selected="0">

      document.addEventListener('click', function(e) {
        var pages = document.querySelector('iron-pages');

@group Iron Elements
@class iron-pages
@hero hero.svg
@demo demo/index.html
@extends iron-selector

<dom-module id="iron-pages">


    :host {
      display: block;

    :host > ::content > :not(.iron-selected) {
      display: none !important;








    is: 'iron-pages',

    behaviors: [

    properties: {

      // as the selected page is the only one visible, activateEvent
      // is both non-sensical and problematic; e.g. in cases where a user
      // handler attempts to change the page and the activateEvent
      // handler immediately changes it back
      activateEvent: {
        type: String,
        value: null


    observers: [

    _selectedPageChanged: function(selected, old) {