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

Commit b20ed47

Browse files
andrewconnellandrewconnell
committed
Add components/orgchart closing #20
1 parent 1aeead9 commit b20ed47

File tree

2 files changed

+101
-2
lines changed

2 files changed

+101
-2
lines changed

‎components/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -202,8 +202,8 @@
202202
</button>
203203
</div>
204204
<div class="ms-Grid-col ms-u-sm3 ms-font-l">
205-
<button class="ms-Button ms-Button--hero" onclick="goIssue('20');">
206-
<span class="ms-Button-icon"><i class="ms-Icon"></i></span>
205+
<button class="ms-Button ms-Button--hero" onclick="goComponent('org-chart');">
206+
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--check"></i></span>
207207
<span class="ms-Button-label">Org Chart</span>
208208
</button>
209209
</div>

‎components/org-chart/index.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head lang="en">
5+
<title>Office UI Fabric - Components - Org Chart</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">Org Chart</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> Org Chart</p>
72+
<p class="ms-font-l">The Office UI Fabric includes an organization chart contorl to show a hierarchy of people.</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">This control is one of the more complicated controls in terms of what is involved and required to make it work. It starts with a container <code>&lt;div&gt;</code> using the class <code>.ms-OrgChart</code>.</p>
79+
<p class="ms-font-l">Within this control you then have a series of one or more <code>&lt;div&gt;</code> decorated with <code>.ms-OrgChart-group</code>. Each of these groups can have an optional <code>&lt;div&gt;</code> and the <code>.ms-OrgChart-groupTitle</code> that acts as a header for the group.</p>
80+
<p class="ms-font-l">The people within the org chart control are then represented as list items that contain buttons wrapping <a href="/components/persona" class="ms-Link">persona</a> controls. It starts with the <code>&lt;ul&gt;</code> and class <code>.ms-OrgChart-list</code>. Each <code>&lt;li&gt;</code> within it uses the class <code>.ms-OrgChart-listItem</code>. These each have the <code>&lt;button&gt;</code> that contains the <code>.ms-OrgChart-listItemBtn</code>. Then each button should contain a persona control.</p>
81+
82+
<!-- codepen snippet -->
83+
<p data-height="374" data-theme-id="19054" data-slug-hash="xwgKNN" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/xwgKNN/'>Office UI Fabric - List (Org Chart)</a> by Andrew Connell (<a href='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
84+
<!-- /codepen snippet -->
85+
86+
<p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p>
87+
</article>
88+
</div>
89+
90+
<!-- footer -->
91+
<footer id="page-footer" class="ms-Grid-row ms-Grid-col ms-u-sm12 ms-font-m ms-fontWeight-light ms-fontColor-white">
92+
<p>Microsoft, Office, Office 365 and SharePoint are registered trademarks of Microsoft Corporation.</p>
93+
<p>Current Version of the Office UI Fabric used on this site: v1.0.0</p>
94+
</footer>
95+
96+
</div>
97+
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)