third_party/polymer/v1_0/components-chromium/paper-listbox/paper-listbox.html - Issue 1834343002: Add paper-listbox to third_party/polymer

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-listbox/paper-listbox.html

Issue 1834343002: Add paper-listbox to third_party/polymer (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 8 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« third_party/polymer/v1_0/components-chromium/paper-listbox/bower.json ('K') | « third_party/polymer/v1_0/components-chromium/paper-listbox/index.html ('k') | third_party/polymer/v1_0/components-chromium/paper-listbox/paper-listbox-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!--

	2 @license

	3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

	4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

	5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

	6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

	7 Code distributed by Google as part of the polymer project is also

	8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

	9 --><html><head><link rel="import" href="../polymer/polymer.html">

	10 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">

	11 <link rel="import" href="../paper-styles/default-theme.html">

	12

	13 <!--

	14 Material design: [Menus](https://www.google.com/design/spec/components/menus.htm l)

	15

	16 `<paper-listbox>` implements an accessible listbox control with Material Design styling. The focused item

	17 is highlighted, and the selected item has bolded text.

	18

	19 <paper-listbox>

	20 <paper-item>Item 1</paper-item>

	21 <paper-item>Item 2</paper-item>

	22 </paper-listbox>

	23

	24 An initial selection can be specified with the `selected` attribute.

	25

	26 <paper-listbox selected="0">

	27 <paper-item>Item 1</paper-item>

	28 <paper-item>Item 2</paper-item>

	29 </paper-listbox>

	30

	31 Make a multi-select listbox with the `multi` attribute. Items in a multi-select listbox can be deselected,

	32 and multiple item can be selected.

	33

	34 <paper-listbox multi>

	35 <paper-item>Item 1</paper-item>

	36 <paper-item>Item 2</paper-item>

	37 </paper-listbox>

	38

	39 ### Styling

	40

	41 The following custom properties and mixins are available for styling:

	42

	43 Custom property \| Description \| Default

	44 ----------------\|-------------\|----------

	45 `--paper-listbox-background-color` \| Menu background color \| `--primary-background-color`

	46 `--paper-listbox-color` \| Menu foreground color \| `--primary-text-color`

	47 `--paper-listbox` \| Mixin applied to the listbox \| `{}`

	48

	49 ### Accessibility

	50

	51 `<paper-listbox>` has `role="listbox"` by default. A multi-select listbox will a lso have

	52 `aria-multiselectable` set. It implements key bindings to navigate through the l istbox with the up and

	53 down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter

	54 of a listbox item will also focus it.

	55

	56 @group Paper Elements

	57 @element paper-listbox

	58 @hero hero.svg

	59 @demo demo/index.html

	60 -->

	61

	62 </head><body><dom-module id="paper-listbox">

	63 <template>

	64 <style>

	65 :host {

	66 display: block;

	67 padding: 8px 0;

	68

	69 background: var(--paper-listbox-background-color, --primary-background-c olor);

	70 color: var(--paper-listbox-color, --primary-text-color);

	71

	72 @apply(--paper-listbox);

	73 }

	74 </style>

	75

	76 <content></content>

	77 </template>

	78

	79 </dom-module>

	80 <script src="paper-listbox-extracted.js"></script></body></html>

OLD	NEW