@polymer/iron-selector

WebJar for @polymer/iron-selector

License

License

BSD 3-Clause
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

polymer__iron-selector
Last Version

Last Version

3.0.1
Release Date

Release Date

Type

Type

jar
Description

Description

@polymer/iron-selector
WebJar for @polymer/iron-selector
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/PolymerElements/iron-selector

Download polymer__iron-selector

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/polymer__iron-selector/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>polymer__iron-selector</artifactId>
    <version>3.0.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/polymer__iron-selector/
implementation 'org.webjars.npm:polymer__iron-selector:3.0.1'
// https://jarcasting.com/artifacts/org.webjars.npm/polymer__iron-selector/
implementation ("org.webjars.npm:polymer__iron-selector:3.0.1")
'org.webjars.npm:polymer__iron-selector:jar:3.0.1'
<dependency org="org.webjars.npm" name="polymer__iron-selector" rev="3.0.1">
  <artifact name="polymer__iron-selector" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='polymer__iron-selector', version='3.0.1')
)
libraryDependencies += "org.webjars.npm" % "polymer__iron-selector" % "3.0.1"
[org.webjars.npm/polymer__iron-selector "3.0.1"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : polymer__polymer jar [3.0.0,4)

Project Modules

There are no modules declared in this project.

Published on NPM Build status Published on webcomponents.org

<iron-selector>, IronSelectableBehavior, IronMultiSelectableBehavior

iron-selector is an element which can be used to manage a list of elements that can be selected. Tapping on the item will make the item selected. The selected indicates which item is being selected. The default is to use the index of the item. iron-selector's functionality is entirely defined by IronMultiSelectableBehavior.

IronSelectableBehavior gives an element the concept of a selected child element. By default, the element will select one of its selectable children when a 'tap' event (synthesized by Polymer, roughly 'click') is dispatched to it.

IronSelectableBehavior lets you ...

  • decide which children should be considered selectable (selectable),
  • retrieve the currently selected element (selectedItem) and all elements in the selectable set (items),
  • change the selection (select, selectNext, etc.),
  • decide how selected elements are modified to indicate their selected state (selectedClass, selectedAttribute),

... among other things.

IronMultiSelectableBehavior includes all the features of IronSelectableBehavior as well as a multi property, which can be set to true to indicate that the element can have multiple selected child elements. It also includes the selectedItems and selectedValues properties for working with arrays of selectable elements and their corresponding values (multi is true) - similar to the single-item versions provided by IronSelectableBehavior: selectedItem and selected.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/iron-selector

In an HTML file

<html>
  <head>
    <script type="module">
      import '@polymer/iron-selector/iron-selector.js';
    </script>
  </head>
  <body>
    <iron-selector selected="0">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </iron-selector>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import '@polymer/iron-selector/iron-selector.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-selector selected="0">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
      </iron-selector>
    `;
  }
}

customElements.define('example-element', ExampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/iron-selector
cd iron-selector
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm
org.webjars.npm

Versions

Version
3.0.1