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

Commit f47a416

Browse files
andrewconnellandrewconnell
committed
Add components/people picker closing #47
1 parent e9187c5 commit f47a416

File tree

2 files changed

+106
-0
lines changed

2 files changed

+106
-0
lines changed

‎components/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,12 @@
165165
<span class="ms-Button-label">Form Field Label</span>
166166
</button>
167167
</div>
168+
<div class="ms-Grid-col ms-u-sm3 ms-font-l">
169+
<button class="ms-Button ms-Button--hero" onclick="goComponent('people-picker');">
170+
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--check"></i></span>
171+
<span class="ms-Button-label">People Picker</span>
172+
</button>
173+
</div>
168174
<div class="ms-Grid-col ms-u-sm3 ms-font-l">
169175
<button class="ms-Button ms-Button--hero" onclick="goComponent('search-box');">
170176
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--check"></i></span>
@@ -177,6 +183,8 @@
177183
<span class="ms-Button-label">Text Field</span>
178184
</button>
179185
</div>
186+
</div>
187+
<div class="ms-Grid-row">
180188
<div class="ms-Grid-col ms-u-sm3 ms-font-l">
181189
<button class="ms-Button ms-Button--hero" onclick="goComponent('toggle');">
182190
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--check"></i></span>

‎components/people-picker/index.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head lang="en">
5+
<title>Office UI Fabric - Components - People Picker</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-name" class="ms-font-su ms-fontWeight-semibold ms-fontColor-white">
40+
Office Fabric UI
41+
</div>
42+
<div id="site-tagline" class="ms-font-l ms-fontColor-white ms-fontWeight-light">
43+
Demos of the front-end framework for building experiences using Office, Office 365 &amp; SharePoint.
44+
</div>
45+
</header>
46+
47+
<!-- navigation -->
48+
<nav class="ms-Grid-row ms-Grid-col ms-u-sm12">
49+
<ul id="global-nav">
50+
<li class="ms-font-l ms-fontWeight-light"><a href="/">Home</a></li>
51+
<li class="ms-font-l ms-fontWeight-light"><a href="/features">Features</a></li>
52+
<li class="ms-font-l ms-fontWeight-light"><a href="/components">Components</a></li>
53+
<li class="ms-font-l ms-fontWeight-light"><a href="/resources.html">Resources</a></li>
54+
<li class="ms-font-l ms-fontWeight-light"><a href="/status.html">Status</a></li>
55+
<li class="ms-font-l ms-fontWeight-light"><a href="/contribute.html">Contribute!</a></li>
56+
</ul>
57+
</nav>
58+
59+
<div class="ms-Grid-row">
60+
<!-- side-nav -->
61+
<aside id="local-nav" class="ms-Grid-col ms-u-sm-3 ">
62+
<ul>
63+
<li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="#Top">People Picker</a></li>
64+
<li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="#Usage">Usage</a></li>
65+
</ul>
66+
</aside>
67+
68+
<!-- page body -->
69+
<article id="page-main" class="ms-Grid-col ms-u-sm9 ms-font-m">
70+
<a name="Top"></a>
71+
<p class="ms-font-su"><a href="/components" class="ms-Link">Components</a> <i class="ms-Icon ms-Icon--caretRight" aria-hidden="true"></i> People Picker</p>
72+
<p class="ms-font-l">The Office UI Fabric includes the popular people picker!</p>
73+
74+
<p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
75+
76+
<a name="Usage"></a>
77+
<p class="ms-font-xxl">Usage</p>
78+
<p class="ms-font-l">The people picker control is quite complex... please refer to the sample below for a demonstration.</p>
79+
<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/src/components/Pivot/Jquery.PeoplePicker.js" class="ms-Link">Jquery.PeoplePicker.js</a>. This also means that you must include a reference to jQuery as the <code>JQuery.PeoplePicker.js</code> depends on the presence of jQuery.</p>
80+
81+
<!-- codepen snippet -->
82+
<p data-height="429" data-theme-id="19054" data-slug-hash="OyWPoe" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/OyWPoe/'>Office UI Fabric - People Picker</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
83+
<!-- /codepen snippet -->
84+
85+
<p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
86+
</article>
87+
</div>
88+
89+
<!-- footer -->
90+
<footer id="page-footer" class="ms-Grid-row ms-Grid-col ms-u-sm12 ms-font-m ms-fontWeight-light ms-fontColor-white">
91+
<p>Microsoft, Office, Office 365 and SharePoint are registered trademarks of Microsoft Corporation.</p>
92+
<p>Current Version of the Office UI Fabric used on this site: v1.0.0</p>
93+
</footer>
94+
95+
</div>
96+
97+
</body>
98+
</html>

0 commit comments

Comments
 (0)