third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button.html - Issue 2947193002: Polymer: Remove unused paper-dropdown-menu, paper-menu-button.

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

Issue 2947193002: Polymer: Remove unused paper-dropdown-menu, paper-menu-button. (Closed)

Patch Set: Created 3 years, 6 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:

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-menu-button/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button-animations.html » ('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-a11y-keys-behavior/iron-a11y-keys-behavior.html ">

11 <link rel="import" href="../iron-behaviors/iron-control-state.html">

12 <link rel="import" href="../iron-dropdown/iron-dropdown.html">

13 <link rel="import" href="../neon-animation/animations/fade-in-animation.html">

14 <link rel="import" href="../neon-animation/animations/fade-out-animation.html">

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

16 <link rel="import" href="../paper-styles/shadow.html">

17 <link rel="import" href="paper-menu-button-animations.html">

18

19 <!--

20 Material design: [Dropdown buttons](https://www.google.com/design/spec/component s/buttons.html#buttons-dropdown-buttons)

21

22 `paper-menu-button` allows one to compose a designated "trigger" element with

23 another element that represents "content", to create a dropdown menu that

24 displays the "content" when the "trigger" is clicked.

25

26 The child element with the class `dropdown-trigger` will be used as the

27 "trigger" element. The child element with the class `dropdown-content` will be

28 used as the "content" element.

29

30 The `paper-menu-button` is sensitive to its content's `iron-select` events. If

31 the "content" element triggers an `iron-select` event, the `paper-menu-button`

32 will close automatically.

33

34 Example:

35

36 <paper-menu-button>

37 <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-butto n>

38 <paper-menu class="dropdown-content">

39 <paper-item>Share</paper-item>

40 <paper-item>Settings</paper-item>

41 <paper-item>Help</paper-item>

42 </paper-menu>

43 </paper-menu-button>

44

45 ### Styling

46

47 The following custom properties and mixins are also available for styling:

48

49 Custom property \| Description \| Default

50 ----------------\|-------------\|----------

51 `--paper-menu-button-dropdown-background` \| Background color of the paper-menu-b utton dropdown \| `--primary-background-color`

52 `--paper-menu-button` \| Mixin applied to the paper-menu-button \| `{}`

53 `--paper-menu-button-disabled` \| Mixin applied to the paper-menu-button when dis abled \| `{}`

54 `--paper-menu-button-dropdown` \| Mixin applied to the paper-menu-button dropdown \| `{}`

55 `--paper-menu-button-content` \| Mixin applied to the paper-menu-button content \| `{}`

56

57 @hero hero.svg

58 @demo demo/index.html

59 -->

60

61 </head><body><dom-module id="paper-menu-button">

62 <template>

63 <style>

64 :host {

65 display: inline-block;

66 position: relative;

67 padding: 8px;

68 outline: none;

69

70 @apply(--paper-menu-button);

71 }

72

73 :host([disabled]) {

74 cursor: auto;

75 color: var(--disabled-text-color);

76

77 @apply(--paper-menu-button-disabled);

78 }

79

80 iron-dropdown {

81 @apply(--paper-menu-button-dropdown);

82 }

83

84 .dropdown-content {

85 @apply(--shadow-elevation-2dp);

86

87 position: relative;

88 border-radius: 2px;

89 background-color: var(--paper-menu-button-dropdown-background, --primary -background-color);

90

91 @apply(--paper-menu-button-content);

92 }

93

94 :host([vertical-align="top"]) .dropdown-content {

95 margin-bottom: 20px;

96 margin-top: -10px;

97 top: 10px;

98 }

99

100 :host([vertical-align="bottom"]) .dropdown-content {

101 bottom: 10px;

102 margin-bottom: -10px;

103 margin-top: 20px;

104 }

105

106 #trigger {

107 cursor: pointer;

108 }

109 </style>

110

111 <div id="trigger" on-tap="toggle">

112 <content select=".dropdown-trigger"></content>

113 </div>

114

115 <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizon talAlign]]" vertical-align="[[verticalAlign]]" dynamic-align="[[dynamicAlign]]" horizontal-offset="[[horizontalOffset]]" vertical-offset="[[verticalOffset]]" no -overlap="[[noOverlap]]" open-animation-config="[[openAnimationConfig]]" close-a nimation-config="[[closeAnimationConfig]]" no-animations="[[noAnimations]]" focu s-target="[[_dropdownContent]]" allow-outside-scroll="[[allowOutsideScroll]]" re store-focus-on-close="[[restoreFocusOnClose]]" on-iron-overlay-canceled="__onIro nOverlayCanceled">

116 <div class="dropdown-content">

117 <content id="content" select=".dropdown-content"></content>

118 </div>

119 </iron-dropdown>

120 </template>

121

122 </dom-module>

123 <script src="paper-menu-button-extracted.js"></script></body></html>

OLD	NEW