Peace
/
BlazorRadzenPracs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

card

Browse Source
main
Peace 12 months ago
parent f8dc4834ee
commit 69ce93dd5a
5 changed files with 96 additions and 14 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      ComponentPractice/ComponentPractice/Components/App.razor
  2. 1
      ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
  3. 84
      ComponentPractice/ComponentPractice/Components/Pages/LayoutCard.razor
  4. 14
      ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor
  5. 3
      ComponentPractice/ComponentPractice/wwwroot/custom.css

8
ComponentPractice/ComponentPractice/Components/App.razor
Unescape View File

@ -7,17 +7,19 @@
<base href="/" /> <base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" /> <link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="custom.css" />
<link rel="stylesheet" href="ComponentPractice.styles.css" /> <link rel="stylesheet" href="ComponentPractice.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css"> <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet /> <HeadOutlet />
</head> </head>
<body> <body>
<Routes /> <Routes />
<script src="_framework/blazor.web.js"></script> <script src="_framework/blazor.web.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script> @* <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script> *@
@* <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script> *@ <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
</body> </body>
</html> </html>

1
ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
Unescape View File

@ -36,6 +36,7 @@
<RadzenPanelMenuItem Text="Stack" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutstack" /> <RadzenPanelMenuItem Text="Stack" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutstack" />
<RadzenPanelMenuItem Text="Row" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutrow" /> <RadzenPanelMenuItem Text="Row" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutrow" />
<RadzenPanelMenuItem Text="Column" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutcolumn" /> <RadzenPanelMenuItem Text="Column" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutcolumn" />
<RadzenPanelMenuItem Text="Card" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutcard" />
</RadzenPanelMenuItem> </RadzenPanelMenuItem>
</RadzenPanelMenu> </RadzenPanelMenu>
</RadzenStack> </RadzenStack>

84
ComponentPractice/ComponentPractice/Components/Pages/LayoutCard.razor
Unescape View File

@ -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();
}
}

14
ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor
Unescape View File

@ -1,13 +1,5 @@
@page "/layoutcolumn" @page "/layoutcolumn"
<style>
.prop {
padding-left: 0.1rem;
padding-right: 0.1rem;
background-color: lightgreen;
}
</style>
<RadzenCard class="rz-p-4 rz-mt-6"> <RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Auto-layout columns</RadzenText> <RadzenText TextStyle="TextStyle.H5">Auto-layout columns</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" /> <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
@ -79,7 +71,7 @@
<RadzenText TextStyle="TextStyle.H5">Column wrapping</RadzenText> <RadzenText TextStyle="TextStyle.H5">Column wrapping</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" /> <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenText TextStyle="TextStyle.Body1"> <RadzenText TextStyle="TextStyle.Body1">
If the totoal sum of all column sizes is greater than 12, columns might be wrapped. Use <span class="prop">RowGap</span> property to specify the vertical spacing. If the totoal sum of all column sizes is greater than 12, columns might be wrapped. Use <RadzenBadge class="radzen-badge" IsPill="true">RowGap</RadzenBadge> property to specify the vertical spacing.
</RadzenText> </RadzenText>
<RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem"> <RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="12" SizeXS="12" SizeSM="9" SizeMD="7" SizeLG="5" SizeXL="3" SizeXX="1"> <RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="12" SizeXS="12" SizeSM="9" SizeMD="7" SizeLG="5" SizeXL="3" SizeXX="1">
@ -92,7 +84,7 @@
<RadzenText TextStyle="TextStyle.H5">Column Offset</RadzenText> <RadzenText TextStyle="TextStyle.H5">Column Offset</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" /> <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenText TextStyle="TextStyle.Body1"> <RadzenText TextStyle="TextStyle.Body1">
The <span class="prop">Offset</span> property moves the column to the right. The <RadzenBadge class="radzen-badge" IsPill="true">Offset</RadzenBadge> property moves the column to the right.
</RadzenText> </RadzenText>
<RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem"> <RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="6" Offset="3"> <RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="6" Offset="3">
@ -168,7 +160,7 @@
<RadzenText TextStyle="TextStyle.H5">Gutters</RadzenText> <RadzenText TextStyle="TextStyle.H5">Gutters</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" /> <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenText TextStyle="TextStyle.Body1"> <RadzenText TextStyle="TextStyle.Body1">
Spacing between columns can be controlled by setting the <span class="prop">Gap</span> property of the parent <span class="prop">RadzenRow</span> component. Spacing between columns can be controlled by setting the <RadzenBadge class="radzen-badge" IsPill="true">Gap</RadzenBadge> property of the parent <RadzenBadge class="radzen-badge" IsPill="true">RadzenRow</RadzenBadge> component.
</RadzenText> </RadzenText>
<RadzenRow class="rz-text-align-center rz-border-info-light" Gap="1rem"> <RadzenRow class="rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">1</RadzenColumn> <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">1</RadzenColumn>

3
ComponentPractice/ComponentPractice/wwwroot/custom.css
Unescape View File

@ -0,0 +1,3 @@
.radzen-badge {
text-transform: none !important;
}
Write Preview
Loading…
Cancel
Save