You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 31, 2019. It is now read-only.
<pclass="ms-font-l">The pivot control can be used as a tab control or as just a horizaontal line of navigation elements within an application.</p>
74
+
75
+
<pclass="ms-font-l"><iclass="ms-Icon ms-Icon--chevronsUp"></i><ahref="#Top" class="ms-Link">Back to top</a></p>
76
+
77
+
<aname="UsagePivot"></a>
78
+
<pclass="ms-font-xxl">Usage Pivot</p>
79
+
<pclass="ms-font-l">Like other navigation controls, this one is implemented with a <code><ul></code> element and decorated with the class <code>.ms-Pivot</code>. Each list item is a seperate navigation element that should be decoared with the CSS class <code>.ms-Pivot-link</code>. If you want to add an overlfow menu item, you can indicate it with the additional CSS class <code>.ms-Pivot-link--overflow</code>.</p>
80
+
<pclass="ms-font-l">You will want to add JavaScript to clear out the placeholder when the control receives focus as shown in the following snippets. An example of this code, using jQuery, can be found in the Office UI Fabric component distribution: <ahref="https://github.com/OfficeDev/Office-UI-Fabric/blob/master/src/components/Pivot/jquery.Pivot.js" class="ms-Link">Jquery.Pivot.js</a>. This also means that you must include a reference to jQuery as the <code>JQuery.Pivot.js</code> depends on the presence of jQuery.</p>
81
+
82
+
<!-- codepen snippet -->
83
+
<pdata-height="299" data-theme-id="19054" data-slug-hash="meOMdj" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <ahref='http://codepen.io/andrewconnell/pen/meOMdj/'>Office UI Fabric - Pivot (Standard)</a> by Andrew Connell (<ahref='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <ahref='http://codepen.io'>CodePen</a>.</p>
84
+
<!-- /codepen snippet -->
85
+
86
+
<pclass="ms-font-l"><iclass="ms-Icon ms-Icon--chevronsUp"></i><ahref="#Top" class="ms-Link">Back to top</a></p>
87
+
88
+
<aname="UsageTabs"></a>
89
+
<pclass="ms-font-xxl">Usage - Tabs</p>
90
+
<pclass="ms-font-l">The pivot control can also be rendered using tabs instead of just plain text. To do this, add the CSS class <code>.ms-Pivot--tabs</code> to the top level <code><ul></code> element.</p>
91
+
92
+
<!-- codepen snippet -->
93
+
<pdata-height="281" data-theme-id="19054" data-slug-hash="epBEmZ" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <ahref='http://codepen.io/andrewconnell/pen/epBEmZ/'>Office UI Fabric - Pivot (Tabs)</a> by Andrew Connell (<ahref='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <ahref='http://codepen.io'>CodePen</a>.</p>
94
+
<!-- /codepen snippet -->
95
+
96
+
<pclass="ms-font-l"><iclass="ms-Icon ms-Icon--chevronsUp"></i><ahref="#Top" class="ms-Link">Back to top</a></p>
0 commit comments