This repository has been archived by the owner on Dec 31, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add components/search-box page closing #13
- Loading branch information
1 parent
fa2161b
commit 9b03c1b
Showing
2 changed files
with
105 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head lang="en"> | ||
| <title>Office UI Fabric - Components - Search Box</title> | ||
| <meta charset="UTF-8"> | ||
| <!-- fav icons --> | ||
| <link rel="shortcut icon" href="/img/favicon/favicon.ico"> | ||
| <link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-touch-icon-57x57.png"> | ||
| <link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-touch-icon-114x114.png"> | ||
| <link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-touch-icon-72x72.png"> | ||
| <link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-touch-icon-144x144.png"> | ||
| <link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-touch-icon-60x60.png"> | ||
| <link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-touch-icon-120x120.png"> | ||
| <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-touch-icon-76x76.png"> | ||
| <link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-touch-icon-152x152.png"> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon-180x180.png"> | ||
| <link rel="icon" type="image/png" href="/img/favicon/favicon-192x192.png" sizes="192x192"> | ||
| <link rel="icon" type="image/png" href="/img/favicon/favicon-160x160.png" sizes="160x160"> | ||
| <link rel="icon" type="image/png" href="/img/favicon/favicon-96x96.png" sizes="96x96"> | ||
| <link rel="icon" type="image/png" href="/img/favicon/favicon-16x16.png" sizes="16x16"> | ||
| <link rel="icon" type="image/png" href="/img/favicon/favicon-32x32.png" sizes="32x32"> | ||
|
|
||
| <!-- azure application insights --> | ||
| <script src="/js/azure-app-insights.js" type="text/javascript"></script> | ||
|
|
||
| <!-- codepen --> | ||
| <script async src="//assets.codepen.io/assets/embed/ei.js"></script> | ||
|
|
||
| <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" /> | ||
| <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css" /> | ||
| <link rel="stylesheet" href="/css/styles.min.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="ms-Grid"> | ||
| <!-- header --> | ||
| <header id="page-header" class="ms-Grid-row ms-Grid-col ms-u-sm12"> | ||
| <div id="brand-logo"> | ||
| <img src="/img/logo_fabric_glyph.svg" alt="Office Fabric UI" height="88" /> | ||
| </div> | ||
| <div id="brand-name"> | ||
| <img src="/img/logo_fabric_text.svg" alt="Office Fabric UI" width="137" /> | ||
| </div> | ||
| <div id="site-tagline" class="ms-font-l ms-fontColor-white ms-fontWeight-light"> | ||
| Demos of the front-end framework for building experiences using Office, Office 365 & SharePoint. | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- navigation --> | ||
| <nav class="ms-Grid-row ms-Grid-col ms-u-sm12"> | ||
| <ul id="global-nav"> | ||
| <li class="ms-font-l ms-fontWeight-light"><a href="/">Home</a></li> | ||
| <li class="ms-font-l ms-fontWeight-light"><a href="/features">Features</a></li> | ||
| <li class="ms-font-l ms-fontWeight-light"><a href="/components">Components</a></li> | ||
| <li class="ms-font-l ms-fontWeight-light"><a href="/resources.html">Resources</a></li> | ||
| <li class="ms-font-l ms-fontWeight-light"><a href="/status.html">Status</a></li> | ||
| <li class="ms-font-l ms-fontWeight-light"><a href="/contribute.html">Contribute!</a></li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <div class="ms-Grid-row"> | ||
| <!-- side-nav --> | ||
| <aside id="local-nav" class="ms-Grid-col ms-u-sm-3 "> | ||
| <ul> | ||
| <li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="#Top">Search Box</a></li> | ||
| <li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="#Usage">Usage</a></li> | ||
| </ul> | ||
| </aside> | ||
|
|
||
|
|
||
|
|
||
| <!-- page body --> | ||
| <article id="page-main" class="ms-Grid-col ms-u-sm9 ms-font-m"> | ||
| <a name="Top"></a> | ||
| <p class="ms-font-su">Components <i class="ms-Icon ms-Icon--caretRight" aria-hidden="true"></i> Search Box</p> | ||
| <p class="ms-font-l">The search box control is used to let users search an application.</p> | ||
|
|
||
| <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p> | ||
|
|
||
| <a name="Usage"></a> | ||
| <p class="ms-font-xxl">Usage</p> | ||
| <p class="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: <a href="https://github.com/OfficeDev/Office-UI-Fabric/blob/master/dist/components/SearchBox/Jquery.SearchBox.js">Jquery.SearchBox.js</a></p> | ||
|
|
||
| <!-- codepen snippet --> | ||
| <p data-height="197" data-theme-id="19054" data-slug-hash="YyGzRv" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/YyGzRv/'>Office UI Fabric - Searchbox</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
| <!-- /codepen snippet --> | ||
|
|
||
| <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top">Back to top</a></p> | ||
|
|
||
| </article> | ||
| </div> | ||
|
|
||
| <!-- footer --> | ||
| <footer id="page-footer" class="ms-Grid-row ms-Grid-col ms-u-sm12 ms-font-m ms-fontWeight-light ms-fontColor-white"> | ||
| <p>Microsoft, Office, Office 365 and SharePoint are registered trademarks of Microsoft Corporation.</p> | ||
| <p>Current Version of the Office UI Fabric used on this site: v1.0.0</p> | ||
| </footer> | ||
|
|
||
| </div> | ||
|
|
||
| </body> | ||
| </html> |