-
Notifications
You must be signed in to change notification settings - Fork 322
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add examples and documentation for the Persona component. (#843)
* Add examples and documentation for the Persona component. * Fix the Persona samples to use "@DataSource.SamplePicture" instead of using external resources. --------- Co-authored-by: Gilles TOURREAU <tourreaug@ardian.com>
- Loading branch information
1 parent
16620e1
commit a88d671
Showing
8 changed files
with
76 additions
and
0 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
examples/Demo/Shared/Pages/Persona/Examples/PersonaDefault.razor
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,7 @@ | ||
<FluentPersona Name="Bill Gates" | ||
Status="PresenceStatus.Available" | ||
StatusSize="PresenceBadgeSize.Small" | ||
StatusTitle="He is available" | ||
Image="@DataSource.SamplePicture" | ||
ImageSize="50px"> | ||
</FluentPersona> |
20 changes: 20 additions & 0 deletions
20
examples/Demo/Shared/Pages/Persona/Examples/PersonaDismiss.razor
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,20 @@ | ||
<div hidden="@this.Hidden"> | ||
<FluentPersona Name="Bill Gates" | ||
Status="PresenceStatus.Available" | ||
StatusSize="PresenceBadgeSize.Small" | ||
StatusTitle="He is available" | ||
Image="@DataSource.SamplePicture" | ||
ImageSize="50px" | ||
DismissTitle="Hide Bill" | ||
OnDismissClick="@this.Dismiss"> | ||
</FluentPersona> | ||
</div> | ||
|
||
@code { | ||
private bool Hidden { get; set; } | ||
|
||
private void Dismiss() | ||
{ | ||
this.Hidden = true; | ||
} | ||
} |
4 changes: 4 additions & 0 deletions
4
examples/Demo/Shared/Pages/Persona/Examples/PersonaInitials.razor
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,4 @@ | ||
<FluentPersona Name="Lydia Bauer" | ||
ImageSize="50px" | ||
Initials="LY"> | ||
</FluentPersona> |
5 changes: 5 additions & 0 deletions
5
examples/Demo/Shared/Pages/Persona/Examples/PersonaNoImage.razor
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,5 @@ | ||
<FluentPersona Name="Lydia Bauer" | ||
ImageSize="50px" | ||
Status="PresenceStatus.Busy" | ||
StatusSize="PresenceBadgeSize.Small"> | ||
</FluentPersona> |
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,35 @@ | ||
@page "/Persona" | ||
@using FluentUI.Demo.Shared.Pages.Persona.Examples | ||
|
||
<h1>Persona</h1> | ||
<p>A Persona is a visual representation of a person with an avatar. A status can be specified optionally.</p> | ||
|
||
<h2>Examples</h2> | ||
<DemoSection Title="Default" Component="typeof(PersonaDefault)"> | ||
<Description> | ||
Display a person with his avatar and his status. | ||
</Description> | ||
</DemoSection> | ||
|
||
<DemoSection Title="With no image (Default initials)" Component="typeof(PersonaNoImage)"> | ||
<Description> | ||
If no image is specified, the initials of the person is automatically retrieved. | ||
</Description> | ||
</DemoSection> | ||
|
||
<DemoSection Title="With no image (Specific initials)" Component="typeof(PersonaInitials)"> | ||
<Description> | ||
Explicit initials for the person can be defined with the <code>Initials</code> property. | ||
</Description> | ||
</DemoSection> | ||
|
||
<DemoSection Title="Dismiss action" Component="typeof(PersonaDismiss)"> | ||
<Description> | ||
Display a "Dismiss" cross and raise an event. | ||
</Description> | ||
</DemoSection> | ||
|
||
<h2>API Documentation</h2> | ||
<ApiDocumentation Component="typeof(FluentPersona)" /> | ||
|
||
|
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
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