|
|
|
|
@ -0,0 +1,77 @@ |
|
|
|
|
@page "/compocard" |
|
|
|
|
|
|
|
|
|
@inject EmployeeService EmployeeService |
|
|
|
|
|
|
|
|
|
@rendermode RenderMode.InteractiveServer |
|
|
|
|
|
|
|
|
|
<FluentLabel Typo="Typography.H3">CounterBadge</FluentLabel> |
|
|
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" /> |
|
|
|
|
The <code>FluentCounterBadge</code> component is used to display a notification count on top of another component. |
|
|
|
|
|
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Simple Example</FluentLabel> |
|
|
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false"> |
|
|
|
|
<FluentCard Width="200px" Height="200px"> |
|
|
|
|
<p>Just some content in a card (with a button that does not do anything).</p> |
|
|
|
|
<FluentButton Appearance="Appearance.Accent">Hello</FluentButton> |
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
<FluentCard> |
|
|
|
|
<p>Just some content in a card (with a button that does not do anything).</p> |
|
|
|
|
<FluentButton Appearance="Appearance.Accent">Hello</FluentButton> |
|
|
|
|
<p>No Width or Height has been specified.</p> |
|
|
|
|
</FluentCard> |
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
<h4>Area restricted examples</h4> |
|
|
|
|
<div> |
|
|
|
|
By default a card restricts its content to the card area. |
|
|
|
|
This means, for example, that if you have a select list with a lot of items, |
|
|
|
|
the list will be cut off at the bottom of the card. |
|
|
|
|
You can override this behavior by setting the <code>AreaRestricted</code> property to <code>false</code>. |
|
|
|
|
</div> |
|
|
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false"> |
|
|
|
|
<FluentStack> |
|
|
|
|
<FluentCard Width="200px" Height="300px"> |
|
|
|
|
<p>This card's content is restricted to its area. Open the select list below to see the result.</p> |
|
|
|
|
<label for="employee-listbox">Select a employee</label> |
|
|
|
|
<FluentSelect TOption="Employee" |
|
|
|
|
Items="@EmployeeService.GetFixedEmployeeData().Where(e => e.ID <= 6)" |
|
|
|
|
Id="employee-listbox" |
|
|
|
|
Width="100px" |
|
|
|
|
OptionValue="@(e => e.ID.ToString())" |
|
|
|
|
OptionText="@(e => e.LastName)" |
|
|
|
|
@bind-Value="selectedValue1" |
|
|
|
|
@bind-SelectedOption="selectedEmployee1"/> |
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
<FluentCard Width="200px" Height="300px" AreaRestricted="false"> |
|
|
|
|
<p>This card's content is restricted to its area. Open the select list below to see the result.</p> |
|
|
|
|
<label for="employee-listbox">Select a employee</label> |
|
|
|
|
<FluentSelect TOption="Employee" |
|
|
|
|
Items="@EmployeeService.GetFixedEmployeeData().Where(e => e.ID <= 6)" |
|
|
|
|
Id="employee-listbox" |
|
|
|
|
Width="100px" |
|
|
|
|
OptionValue="@(e => e.ID.ToString())" |
|
|
|
|
OptionText="@(e => e.LastName)" |
|
|
|
|
@bind-Value="selectedValue2" |
|
|
|
|
@bind-SelectedOption="selectedEmployee2" /> |
|
|
|
|
</FluentCard> |
|
|
|
|
</FluentStack> |
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
<h4>Minimal Style</h4> |
|
|
|
|
<div> |
|
|
|
|
You can use the <code>MinimalStyle</code> property to remove all the default styles from the <code>FluentCard</code>. |
|
|
|
|
This will allow you to use the <code>FluentCard</code> component as a simple container without any style, |
|
|
|
|
except the styles to draw <code>box-shadow</code> (and some minimal styles). |
|
|
|
|
</div> |
|
|
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false" MinimalStyle="true"> |
|
|
|
|
<p>Just some content in a card (with a button that does not do anything).</p> |
|
|
|
|
<FluentButton Appearance="Appearance.Accent">Hello</FluentButton> |
|
|
|
|
<p>No Width or Height has been specified.</p> |
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
@code { |
|
|
|
|
Employee? selectedEmployee1, selectedEmployee2; |
|
|
|
|
string? selectedValue1, selectedValue2; |
|
|
|
|
} |
