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 command bar control is a very robust navigation control with lots of functionality and responsive design.</p>
73
+
74
+
<pclass="ms-font-l"><iclass="ms-Icon ms-Icon--chevronsUp"></i><ahref="#Top" class="ms-Link">Back to top</a></p>
75
+
76
+
<aname="Usage"></a>
77
+
<pclass="ms-font-xxl">Usage</p>
78
+
<pclass="ms-font-l">Implementing the command bar stars with the <code><div></code> decorated with a <code>.ms-CommandBar</code> class. Within the top level container you can have three components. </p>
79
+
<pclass="ms-font-l">The first component you can include is a search control implemented with a <code><div></code> and <code>.ms-CommandBarSearch</code> control. Refer to the code below for the implementation of the other nested elements you can use within this container.</p>
80
+
<pclass="ms-font-l">The second component you can implement are the main navigation elements which are included in a <code><div></code> with the <code>ms-CommandBar-mainArea</code> class. Each command object is implemented as a <code><div></code> using the <code>.ms-CommandBarItem</code>. Notice you can also include one with the <code>.ms-CommandBarItem-overflow</code> class that is used when the screen can't include all the child items.</p>
81
+
<pclass="ms-font-l">Finally you can also include a set of controls that are pinned to the side of the command bar using a <code><div></code> with the <code>.ms-CommandBar-sideCommands</code> class. Each of the commands area implemented like the previous ones, using the <code>.ms-CommandBarItem</code> class.</p>
82
+
<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/CommandBar/Jquery.CommandBar.js" class="ms-Link">Jquery.CommandBar.js</a>. This also means that you must include a reference to jQuery as the <code>JQuery.CommandBar.js</code> depends on the presence of jQuery.</p>
83
+
84
+
<!-- codepen snippet -->
85
+
<pdata-height="433" data-theme-id="19054" data-slug-hash="avpoLR" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <ahref='http://codepen.io/andrewconnell/pen/avpoLR/'>Office UI Fabric - Panel (Small)</a> by Andrew Connell (<ahref='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <ahref='http://codepen.io'>CodePen</a>.</p>
86
+
<!-- /codepen snippet -->
87
+
88
+
<pclass="ms-font-l"><iclass="ms-Icon ms-Icon--chevronsUp"></i><ahref="#Top" class="ms-Link">Back to top</a></p>
0 commit comments