An (polymer) web component list-group abstraction with pre-defined handling methods

At some point you've needed a simple vertical menu or list step by step. When it is necessary in a webapp, we sometimes add, remove, disable, dynamically update these items, and do something minimally serviceable, uses a time abstracting and creating code.

The idea <sr-list> just give the basics of what we need to have some time without restricting its customization.

Online demo in here!

Lastest Firefox and Chrome (Impementing)

• Polymer
• X-Tags
• Angular.JS
• React
• Ember

As the technology of web components is recent, it is recommended a controllable environment, such as node-webkit.

<h2> As list-group </h2>
<aside role="complementary">

  <sr-list type="vertical">
      <sr-item>Normal</sr-item>
      <sr-item selected>Selected</sr-item>
      <sr-item disabled>Disabled</sr-item>
      <sr-item separator></sr-item>
      <sr-item icon="icon.png">With icon</sr-item>
      <sr-item icon-class="fa-plus">With icon-class</sr-item>
      <sr-item separator></sr-item>
  	<sr-item href="index.html">With href (please, mouseover me)</sr-item>
  </sr-list>

</aside>

Note: strikethrough -> not implemented

                | `label`                                   | `String`                     | Item label
                | `attributes`                              | `Object`                     | `{"attribute-name": "value"}`
                | `position`                                | `Integer`                    | Position where item will be added
                | `position`                                | `undefined`                  | Last position

get(index) | Return the item with this 'index' | return <sr-item> | | index | Integer | Index of item getItems() | Return all the children nodes | return [<sr-item>, ...] | remove(index) | Remove and return item in the 'index' position | return <sr-item> | | index | Integer | Index position. -1 for last getSelected() | Return the first element with state seleted | return <sr-item> | getSelectedAll() | Return all the elements with state seleted | return [<sr-item>, ...] | disable(state) | Change state to disabled/enabled | | | state | undefined | Change state to disabled
| state | boolean | Change state to disabled/enabled

                 | `state`                                             | `undefined`    | Change state to selected
                 | `state`                                             | `boolean`      | Change state to boolean value

isDisabled() | This item is disables? | return boolean | disable(state) | Change state to disabled/enabled | | | state | undefined | Change state to disabled | state | boolean | Change state to boolean value getIndex() | Return the index of the element or -1 if not found | |

You can edit style! Try:

sr-list {
	background-color:
}
sr-item {
	background-color:
}
sr-item[selected] {
	background-color:
}
sr-item[selected]:hover {
	background-color:
}
sr-item[disabled] {
	background-color:
}
sr-item[selected][disabled] {
	background-color:
}
sr-item:hover {
	background-color:
}

/* Buggy */
sr-item:focus {
	background-color:
}
sr-item:active {
	background-color:
}