|
|
|
|
@ -0,0 +1,84 @@ |
|
|
|
|
@page "/layoutcard" |
|
|
|
|
|
|
|
|
|
@inject InMemoryData data |
|
|
|
|
|
|
|
|
|
@rendermode RenderMode.InteractiveServer |
|
|
|
|
|
|
|
|
|
<RadzenCard class="rz-p-4 rz-mt-6"> |
|
|
|
|
<RadzenText TextStyle="TextStyle.H5">Card</RadzenText> |
|
|
|
|
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin-bottom: 1rem;" /> |
|
|
|
|
<RadzenText TextStyle="TextStyle.Body1"> |
|
|
|
|
<RadzenBadge class="radzen-badge">RadzenCard</RadzenBadge> component can display a piece of content, like an image and text. |
|
|
|
|
</RadzenText> |
|
|
|
|
|
|
|
|
|
<RadzenCard class="rz-my-12 rz-mx-auto" Style="max-width: 420px"> |
|
|
|
|
<RadzenStack class="rz-p-4" Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Start" Gap="1rem"> |
|
|
|
|
<RadzenImage Path="@employee.Photo" Style="width:100px; height:100px; border-radius:50%"/> |
|
|
|
|
<RadzenStack Gap="0"> |
|
|
|
|
<RadzenText class="rz-display-flex rz-mt-2 rz-my-0" TextStyle="TextStyle.Overline">Employee</RadzenText> |
|
|
|
|
<RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.FirstName} {employee.LastName}")</b></RadzenText> |
|
|
|
|
<RadzenText class="rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Job Title</RadzenText> |
|
|
|
|
<RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.Title} {employee.Job}")</b></RadzenText> |
|
|
|
|
</RadzenStack> |
|
|
|
|
</RadzenStack> |
|
|
|
|
<RadzenCard class="rz-background-color-primary-light rz-shadow-0 rz-border-radius-0 rz-p-8" style="margin: 1rem calc(-1 * var(--rz-card-padding));"> |
|
|
|
|
<RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.H6"><strong>Personal Information</strong></RadzenText> |
|
|
|
|
<RadzenRow RowGap="0"> |
|
|
|
|
<RadzenColumn SizeSM="4"> |
|
|
|
|
<RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Hire Date</RadzenText> |
|
|
|
|
<RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.HireDate.ToString("yyyy-MM-dd")</RadzenText> |
|
|
|
|
<RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Phone</RadzenText> |
|
|
|
|
<RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Phone</RadzenText> |
|
|
|
|
</RadzenColumn> |
|
|
|
|
<RadzenColumn OffsetSM="2" SizeSM="6"> |
|
|
|
|
<RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Region</RadzenText> |
|
|
|
|
<RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Region</RadzenText> |
|
|
|
|
<RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Address</RadzenText> |
|
|
|
|
<RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Address</RadzenText> |
|
|
|
|
</RadzenColumn> |
|
|
|
|
</RadzenRow> |
|
|
|
|
</RadzenCard> |
|
|
|
|
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="0"> |
|
|
|
|
<RadzenButton Variant="Variant.Text" Text="Send" /> |
|
|
|
|
<RadzenButton class="rz-text-secondary-color" Variant="Variant.Text" Text="Calcel" /> |
|
|
|
|
</RadzenStack> |
|
|
|
|
</RadzenCard> |
|
|
|
|
</RadzenCard> |
|
|
|
|
|
|
|
|
|
<RadzenCard class="rz-p-4 rz-mt-6"> |
|
|
|
|
<RadzenText TextStyle="TextStyle.H5">Card Variant</RadzenText> |
|
|
|
|
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin-bottom: 1rem;" /> |
|
|
|
|
<RadzenText TextStyle="TextStyle.Body1"> |
|
|
|
|
Use <RadzenBadge class="radzen-badge">Variant</RadzenBadge> property to change the card varient. |
|
|
|
|
</RadzenText> |
|
|
|
|
|
|
|
|
|
<RadzenStack class="rz-p-4 rz-mb-6 rz-border-radius-1 rz-border-base-300" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem"> |
|
|
|
|
<RadzenLabel Text="Variant:" /> |
|
|
|
|
<RadzenSelectBar @bind-Value="@variant" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Variant)).Cast<Variant>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" Class="rz-display-none rz-display-xl-flex" /> |
|
|
|
|
<RadzenDropDown @bind-Value="@variant" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Variant)).Cast<Variant>().Select(t => new { Text = $"{t}", Value = t }))" Class="rz-display-inline-flex rz-display-xl-none" /> |
|
|
|
|
</RadzenStack> |
|
|
|
|
<RadzenCard class="rz-my-12 rz-mx-auto" Variant="@variant" Style="max-width: 420px"> |
|
|
|
|
<RadzenStack class="rz-p-4" Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Start" Gap="1rem"> |
|
|
|
|
<RadzenImage Path="@employee.Photo" Style="width:100px; height:100px; border-radius:50%" /> |
|
|
|
|
<RadzenStack Gap="0"> |
|
|
|
|
<RadzenText class="rz-display-flex rz-mt-2 rz-my-0" TextStyle="TextStyle.Overline">Employee</RadzenText> |
|
|
|
|
<RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.FirstName} {employee.LastName}")</b></RadzenText> |
|
|
|
|
<RadzenText class="rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Job Title</RadzenText> |
|
|
|
|
<RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.Title} {employee.Job}")</b></RadzenText> |
|
|
|
|
</RadzenStack> |
|
|
|
|
</RadzenStack> |
|
|
|
|
</RadzenCard> |
|
|
|
|
</RadzenCard> |
|
|
|
|
|
|
|
|
|
@code { |
|
|
|
|
Employee employee; |
|
|
|
|
|
|
|
|
|
Variant variant = Variant.Filled; |
|
|
|
|
|
|
|
|
|
protected override async Task OnInitializedAsync() |
|
|
|
|
{ |
|
|
|
|
List<Employee> employees = await data.GetEmployeeDataAsync(100); |
|
|
|
|
int id = Random.Shared.Next(1, 100); |
|
|
|
|
employee = employees.Where(e => e.ID == id).FirstOrDefault(); |
|
|
|
|
} |
|
|
|
|
} |
