Skip to content
This repository was archived by the owner on Dec 31, 2019. It is now read-only.

Commit 860de9c

Browse files
andrewconnellandrewconnell
committed
Add components/dropdown page closing #17
1 parent e68ce13 commit 860de9c

File tree

2 files changed

+106
-2
lines changed

2 files changed

+106
-2
lines changed

‎components/dropdown/index.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head lang="en">
5+
<title>Office UI Fabric - Components - Dropdown</title>
6+
<meta charset="UTF-8">
7+
<!-- fav icons -->
8+
<link rel="shortcut icon" href="/img/favicon/favicon.ico">
9+
<link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-touch-icon-57x57.png">
10+
<link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-touch-icon-114x114.png">
11+
<link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-touch-icon-72x72.png">
12+
<link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-touch-icon-144x144.png">
13+
<link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-touch-icon-60x60.png">
14+
<link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-touch-icon-120x120.png">
15+
<link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-touch-icon-76x76.png">
16+
<link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-touch-icon-152x152.png">
17+
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon-180x180.png">
18+
<link rel="icon" type="image/png" href="/img/favicon/favicon-192x192.png" sizes="192x192">
19+
<link rel="icon" type="image/png" href="/img/favicon/favicon-160x160.png" sizes="160x160">
20+
<link rel="icon" type="image/png" href="/img/favicon/favicon-96x96.png" sizes="96x96">
21+
<link rel="icon" type="image/png" href="/img/favicon/favicon-16x16.png" sizes="16x16">
22+
<link rel="icon" type="image/png" href="/img/favicon/favicon-32x32.png" sizes="32x32">
23+
24+
<!-- azure application insights -->
25+
<script src="/js/azure-app-insights.js" type="text/javascript"></script>
26+
27+
<!-- codepen -->
28+
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
29+
30+
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" />
31+
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css" />
32+
<link rel="stylesheet" href="/css/styles.min.css" />
33+
</head>
34+
35+
<body>
36+
<div class="ms-Grid">
37+
<!-- header -->
38+
<header id="page-header" class="ms-Grid-row ms-Grid-col ms-u-sm12">
39+
<div id="brand-logo">
40+
<img src="/img/logo_fabric_glyph.svg" alt="Office Fabric UI" height="88" />
41+
</div>
42+
<div id="brand-name">
43+
<img src="/img/logo_fabric_text.svg" alt="Office Fabric UI" width="137" />
44+
</div>
45+
<div id="site-tagline" class="ms-font-l ms-fontColor-white ms-fontWeight-light">
46+
Demos of the front-end framework for building experiences using Office, Office 365 &amp; SharePoint.
47+
</div>
48+
</header>
49+
50+
<!-- navigation -->
51+
<nav class="ms-Grid-row ms-Grid-col ms-u-sm12">
52+
<ul id="global-nav">
53+
<li class="ms-font-l ms-fontWeight-light"><a href="/">Home</a></li>
54+
<li class="ms-font-l ms-fontWeight-light"><a href="/features">Features</a></li>
55+
<li class="ms-font-l ms-fontWeight-light"><a href="/components">Components</a></li>
56+
<li class="ms-font-l ms-fontWeight-light"><a href="/resources.html">Resources</a></li>
57+
<li class="ms-font-l ms-fontWeight-light"><a href="/status.html">Status</a></li>
58+
<li class="ms-font-l ms-fontWeight-light"><a href="/contribute.html">Contribute!</a></li>
59+
</ul>
60+
</nav>
61+
62+
<div class="ms-Grid-row">
63+
<!-- side-nav -->
64+
<aside id="local-nav" class="ms-Grid-col ms-u-sm-3 ">
65+
<ul>
66+
<li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="#Top">Dropdown</a></li>
67+
<li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="#Usage">Usage</a></li>
68+
</ul>
69+
</aside>
70+
71+
72+
73+
<!-- page body -->
74+
<article id="page-main" class="ms-Grid-col ms-u-sm9 ms-font-m">
75+
<a name="Top"></a>
76+
<p class="ms-font-su">Components <i class="ms-Icon ms-Icon--caretRight" aria-hidden="true"></i> Dropdown</p>
77+
<p class="ms-font-l">The dropdown list control allows you to have a selector that matches the style used in Office 365. It leverages jQuery to implement the interactive functionality.</p>
78+
79+
<p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
80+
81+
<a name="Usage"></a>
82+
<p class="ms-font-xxl">Usage</p>
83+
<p class="ms-font-l">Include a reference to the <code>fabric.css</code> and <code>fabric.components.css</code> files, or the corresponding minified version <code>fabric.min.css</code> and <code>fabric.components.min.css</code>. These are available from the public CDN:<br /><code>&lt;link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" /&gt;</code><br /><code>&lt;link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css" /&gt;</code></p>
84+
<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/Dropdown/Jquery.Dropdown.js" class="ms-Link">Jquery.Dropdown.js</a>. This also means that you must include a reference to jQuery as the <code>JQuery.Dropdown.js</code> depends on the presence of jQuery.</p>
85+
86+
<!-- codepen snippet -->
87+
<p data-height="325" data-theme-id="19054" data-slug-hash="RWGNON" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/RWGNON/'>Office UI Fabric - Dropdown</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
88+
<!-- /codepen snippet -->
89+
90+
<p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
91+
92+
</article>
93+
</div>
94+
95+
<!-- footer -->
96+
<footer id="page-footer" class="ms-Grid-row ms-Grid-col ms-u-sm12 ms-font-m ms-fontWeight-light ms-fontColor-white">
97+
<p>Microsoft, Office, Office 365 and SharePoint are registered trademarks of Microsoft Corporation.</p>
98+
<p>Current Version of the Office UI Fabric used on this site: v1.0.0</p>
99+
</footer>
100+
101+
</div>
102+
103+
</body>
104+
</html>

‎components/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,8 +149,8 @@
149149
</button>
150150
</div>
151151
<div class="ms-Grid-col ms-u-sm3 ms-font-l">
152-
<button class="ms-Button ms-Button--hero" onclick="goIssue('17');">
153-
<span class="ms-Button-icon"><i class="ms-Icon"></i></span>
152+
<button class="ms-Button ms-Button--hero" onclick="goComponent('dropdown');">
153+
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--check"></i></span>
154154
<span class="ms-Button-label">Dropdown</span>
155155
</button>
156156
</div>

0 commit comments

Comments
 (0)