third_party/polymer/components/core-toolbar/core-toolbar.html - Issue 1215543002: Remove Polymer 0.5.

Side by Side Diff: third_party/polymer/components/core-toolbar/core-toolbar.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix unit test Created 5 years, 5 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:

OLD	NEW
	(Empty)
1 <!--

2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

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

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

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

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

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

8 -->

9

10 <!--

11 `core-toolbar` is a horizontal bar containing items that can be used for

12 label, navigation, search and actions. The items place inside the

13 `core-toolbar` are projected into a `horizontal center layout` container inside of

14 `core-toolbar`'s Shadow DOM. You can use flex attributes to control the items'

15 sizing.

16

17 Example:

18

19 <core-toolbar>

20 <core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>

21 <div flex>Title</div>

22 <core-icon-button icon="more" on-tap="{{moreAction}}"></core-icon-button>

23 </core-toolbar>

24

25 `core-toolbar` has a standard height, but can made be taller by setting `tall`

26 class on the `core-toolbar`. This will make the toolbar 3x the normal height.

27

28 <core-toolbar class="tall">

29 <core-icon-button icon="menu"></core-icon-button>

30 </core-toolbar>

31

32 Apply `medium-tall` class to make the toolbar medium tall. This will make the

33 toolbar 2x the normal height.

34

35 <core-toolbar class="medium-tall">

36 <core-icon-button icon="menu"></core-icon-button>

37 </core-toolbar>

38

39 When `tall`, items can pin to either the top (default), middle or bottom. Use

40 `middle` class for middle content and `bottom` class for bottom content.

41

42 <core-toolbar class="tall">

43 <core-icon-button icon="menu"></core-icon-button>

44 <div class="middle indent">Middle Title</div>

45 <div class="bottom indent">Bottom Title</div>

46 </core-toolbar>

47

48 For `medium-tall` toolbar, the middle and bottom contents overlap and are

49 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are

50 still honored separately.

51

52 To make an element completely fit at the bottom of the toolbar, use `fit` along

53 with `bottom`.

54

55 <core-toolbar class="tall">

56 <div id="progressBar" class="bottom fit"></div>

57 </core-toolbar>

58

59 `core-toolbar` adapts to mobile/narrow layout when there is a `core-narrow` clas s set

60 on itself or any of its ancestors.

61

62 @group Polymer Core Elements

63 @element core-toolbar

64 @homepage github.io

65 -->

66

67 <link rel="import" href="../polymer/polymer.html">

68

69 <polymer-element name="core-toolbar" attributes="justify middleJustify bottomJus tify">

70 <template>

71

72 <link rel="stylesheet" href="core-toolbar.css">

73

74 <div id="bottomBar" class="toolbar-tools" center horizontal layout>

75 <content select=".bottom"></content>

76 </div>

77

78 <div id="middleBar" class="toolbar-tools" center horizontal layout>

79 <content select=".middle"></content>

80 </div>

81

82 <div id="topBar" class="toolbar-tools" center horizontal layout>

83 <content></content>

84 </div>

85

86 </template>

87 <script>

88

89 (function() {

90

91 Polymer('core-toolbar', {

92

93 /**

94 * Controls how the items are aligned horizontally.

95 * Options are `start`, `center`, `end`, `between` and `around`.

96 *

97 * @attribute justify

98 * @type string

99 * @default ''

100 */

101 justify: '',

102

103 /**

104 * Controls how the items are aligned horizontally when they are placed

105 * in the middle.

106 * Options are `start`, `center`, `end`, `between` and `around`.

107 *

108 * @attribute middleJustify

109 * @type string

110 * @default ''

111 */

112 middleJustify: '',

113

114 /**

115 * Controls how the items are aligned horizontally when they are placed

116 * at the bottom.

117 * Options are `start`, `center`, `end`, `between` and `around`.

118 *

119 * @attribute bottomJustify

120 * @type string

121 * @default ''

122 */

123 bottomJustify: '',

124

125 justifyChanged: function(old) {

126 this.updateBarJustify(this.$.topBar, this.justify, old);

127 },

128

129 middleJustifyChanged: function(old) {

130 this.updateBarJustify(this.$.middleBar, this.middleJustify, old);

131 },

132

133 bottomJustifyChanged: function(old) {

134 this.updateBarJustify(this.$.bottomBar, this.bottomJustify, old);

135 },

136

137 updateBarJustify: function(bar, justify, old) {

138 if (old) {

139 bar.removeAttribute(this.toLayoutAttrName(old));

140 }

141 if (justify) {

142 bar.setAttribute(this.toLayoutAttrName(justify), '');

143 }

144 },

145

146 toLayoutAttrName: function(value) {

147 return value === 'between' ? 'justified' : value + '-justified';

148 }

149

150 });

151

152 })();

153

154 </script>

155 </polymer-element>

OLD	NEW