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 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
74d7481
commit 8cd38d9
Showing
2 changed files
with
152 additions
and
0 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head lang="en"> | ||
| <title>Office UI Fabric - Components - Persona</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">Persona</a></li> | ||
| <li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="#Usage">Usage</a></li> | ||
| <li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="#DarkerText">Darker Text</a></li> | ||
| <li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="#Selectable">Selectable</a></li> | ||
| <li><a class="ms-font-l ms-fontColor-neutralSecondaryAlt" href="#Presence">Presence</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> Persona</p> | ||
| <p class="ms-font-l">The persona control is used to represent a person. It comes in different sizes and can optionally show the presence state of the user.</p> | ||
|
|
||
| <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p> | ||
|
|
||
| <a name="Usage"></a> | ||
| <p class="ms-font-xxl">Usage</p> | ||
| <p class="ms-font-l">The persona control comes in varrying sizes and is comprised of a handful of HTML elements. Everything is wrapped in a single <code><div></code> with the class <code>ms-Persona</code>. By default the medium size is used, but you can control the size of the control with an additional class indicating the size:</p> | ||
| <ul> | ||
| <li class="ms-font-l"><span class="ms-fontWeight-semibold">Tiny</span>: <code>.ms-Persona--tiny</code></li> | ||
| <li class="ms-font-l"><span class="ms-fontWeight-semibold">X-Small</span>: <code>.ms-Persona--xs</code></li> | ||
| <li class="ms-font-l"><span class="ms-fontWeight-semibold">Small</span>: <code>.ms-Persona--sm</code></li> | ||
| <li class="ms-font-l"><span class="ms-fontWeight-semibold">Large</span>: <code>.ms-Persona--lg</code></li> | ||
| <li class="ms-font-l"><span class="ms-fontWeight-semibold">X-Large</span>: <code>.ms-Persona--xl</code></li> | ||
| </ul> | ||
| <p class="ms-font-l">Within this container there are two sub-containers - one <code><div></code> for the image (<code>.ms-Persona-imageArea</code>) and one <code><div></code> for the details pane (<code>.ms-Persona-details</code>).</p> | ||
| <p class="ms-font-l">The smaller controls that don't use an image don't need to include an image, but they can include a <code><div></code> for the presence details (<code>.ms-Persona-presence</code>). | ||
| <p class="ms-font-l">The details container can contain multiple levels of text depending on the size of the control. The levels of text should be prioritized using the following classes:</p> | ||
| <ul> | ||
| <li class="ms-font-l"><code>.ms-Persona--primaryText</code></li> | ||
| <li class="ms-font-l"><code>.ms-Persona--secondaryText</code></li> | ||
| <li class="ms-font-l"><code>.ms-Persona--tertiaryText</code></li> | ||
| <li class="ms-font-l"><code>.ms-Persona--optionalText</code></li> | ||
| </ul> | ||
| <p class="ms-font-l">The persona control loads a default placeholder image while the referenced person's image is loading or if it fails to load so a broken image is not shown.</p> | ||
|
|
||
| <p class="ms-font-l"><i class="ms-Icon ms-Icon--chevronsUp"></i><a href="#Top" class="ms-Link">Back to top</a></p> | ||
|
|
||
| <!-- codepen snippet --> | ||
| <p data-height="725" data-theme-id="19054" data-slug-hash="QjKVWW" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/QjKVWW/'>Office UI Fabric - Persona ()</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" class="ms-Link">Back to top</a></p> | ||
|
|
||
| <a name="DarkerText"></a> | ||
| <p class="ms-font-xxl">Darker Text</p> | ||
| <p class="ms-font-l">In cases when the control is placed on a darker background color and you need more contrast with the text, you can use the class <code>.ms-Persona--darkText</code> in the outer container to darken the text up.</p> | ||
|
|
||
| <!-- codepen snippet --> | ||
| <p data-height="364" data-theme-id="19054" data-slug-hash="BoLGBY" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/BoLGBY/'>Office UI Fabric - Persona (DarkerText)</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" class="ms-Link">Back to top</a></p> | ||
|
|
||
| <a name="Selectable"></a> | ||
| <p class="ms-font-xxl">Selectable</p> | ||
| <p class="ms-font-l">Typically the controls are for presentation only, but if you add a <code>.ms-Persona--selectable</code> the control will change the cursor to a pointer indicating the user can select it.</p> | ||
|
|
||
| <!-- codepen snippet --> | ||
| <p data-height="329" data-theme-id="19054" data-slug-hash="YyGRyZ" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/YyGRyZ/'>Office UI Fabric - Persona (DarkerText)</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" class="ms-Link">Back to top</a></p> | ||
|
|
||
| <a name="Presence"></a> | ||
| <p class="ms-font-xxl">Presence</p> | ||
| <p class="ms-font-l">The persona card can also show the person's presence state with a little colored circle. With the v1.0.0 release of the Office UI Fabric, it appears the different states are missing from the CSS files, but the sample below shows how you can add the colors in. You can then control the presence by decorating the outter-most <code><div></code> with the corresponding CSS class.</p> | ||
|
|
||
| <!-- codepen snippet --> | ||
| <p data-height="698" data-theme-id="19054" data-slug-hash="XmjyKW" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <a href='http://codepen.io/andrewconnell/pen/XmjyKW/'>Office UI Fabric - Persona (Presence)</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" class="ms-Link">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> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.