third_party/polymer/v1_0/components-chromium/paper-tabs/README.md - Issue 1834313003: Remove unneeded files from third_party/polymer.

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-tabs/README.md

Issue 1834313003: Remove unneeded files from third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Restore bower.json files. 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

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-tabs/CONTRIBUTING.md ('k') | third_party/polymer/v1_0/components-chromium/paper-tabs/hero.svg » ('j') | third_party/polymer/v1_0/extract_inline_scripts.sh » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1

2 <!---

3

4 This README is automatically generated from the comments in these files:

5 paper-tab.html paper-tabs.html

6

7 Edit those files, and our readme bot will duplicate them over here!

8 Edit this file, and the bot will squash your changes :)

9

10 The bot does some handling of markdown. Please file a bug if it does the wrong

11 thing! https://github.com/PolymerLabs/tedium/issues

12

13 -->

14

15 [![Build status](https://travis-ci.org/PolymerElements/paper-tabs.svg?branch=mas ter)](https://travis-ci.org/PolymerElements/paper-tabs)

16

17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-tabs)_

18

19

20 ##<paper-tabs>

21

22 Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html)

23

24 `paper-tabs` makes it easy to explore and switch between different views or func tional aspects of

25 an app, or to browse categorized data sets.

26

27 Use `selected` property to get or set the selected tab.

28

29 Example:

30

31 ```html

32 <paper-tabs selected="0">

33 <paper-tab>TAB 1</paper-tab>

34 <paper-tab>TAB 2</paper-tab>

35 <paper-tab>TAB 3</paper-tab>

36 </paper-tabs>

37 ```

38

39 See <a href="?active=paper-tab">paper-tab</a> for more information about

40 `paper-tab`.

41

42 A common usage for `paper-tabs` is to use it along with `iron-pages` to switch

43 between different views.

44

45 ```html

46 <paper-tabs selected="{{selected}}">

47 <paper-tab>Tab 1</paper-tab>

48 <paper-tab>Tab 2</paper-tab>

49 <paper-tab>Tab 3</paper-tab>

50 </paper-tabs>

51

52 <iron-pages selected="{{selected}}">

53 <div>Page 1</div>

54 <div>Page 2</div>

55 <div>Page 3</div>

56 </iron-pages>

57 ```

58

59 To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>`

60 element in `paper-tab`.

61

62 Example:

63

64 <pre><code>

65 <style is="custom-style">

66 .link {

67 @apply(--layout-horizontal);

68 @apply(--layout-center-center);

69 }

70 </style>

71

72 <paper-tabs selected="0">

73 <paper-tab link>

74 <a href="#link1" class="link">TAB ONE</a>

75 </paper-tab>

76 <paper-tab link>

77 <a href="#link2" class="link">TAB TWO</a>

78 </paper-tab>

79 <paper-tab link>

80 <a href="#link3" class="link">TAB THREE</a>

81 </paper-tab>

82 </paper-tabs>

83 </code></pre>

84

85 ### Styling

86

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

88

89 \| Custom property \| Description \| Default \|

90 \| --- \| --- \| --- \|

91 \| `--paper-tabs-selection-bar-color` \| Color for the selection bar \| `--paper-ye llow-a100` \|

92 \| `--paper-tabs` \| Mixin applied to the tabs \| `{}` \|

93

94

95

96 ##<paper-tab>

97

98 `paper-tab` is styled to look like a tab. It should be used in conjunction with

99 `paper-tabs`.

100

101 Example:

102

103 ```html

104 <paper-tabs selected="0">

105 <paper-tab>TAB 1</paper-tab>

106 <paper-tab>TAB 2</paper-tab>

107 <paper-tab>TAB 3</paper-tab>

108 </paper-tabs>

109 ```

110

111 ### Styling

112

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

114

115 \| Custom property \| Description \| Default \|

116 \| --- \| --- \| --- \|

117 \| `--paper-tab-ink` \| Ink color \| `--paper-yellow-a100` \|

118 \| `--paper-tab` \| Mixin applied to the tab \| `{}` \|

119 \| `--paper-tab-content` \| Mixin applied to the tab content \| `{}` \|

120 \| `--paper-tab-content-unselected` \| Mixin applied to the tab content when the t ab is not selected \| `{}` \|

121

122 This element applies the mixin `--paper-font-common-base` but does not import `p aper-styles/typography.html`.

123 In order to apply the `Roboto` font to this element, make sure you've imported ` paper-styles/typography.html`.

124

125

OLD	NEW