Radzen
Apparence
Links
CheckBoxList
MyPage.razor |
<RadzenCheckBoxList @bind-Value="@selectedItemIds"
TValue="int"
Data="@items"
TextProperty="Name"
ValueProperty="Id" />
|
MyPage.razor.cs |
// has to be an IEnumerable
private IEnumerable<int> selectedItemIds;
private IReadOnlyCollection<ItemDto> items;
|
Numeric
MyPage.razor |
<RadzenNumeric TValue="int?"
Min="1"
Max="10"
@bind-Value=@value
Placeholder="Enter or clear value" />
|
MyPage.razor.cs |
int? value;
|
Themes
Theme | Description |
---|---|
default | |
dark | dark theme |
humanistic | |
software |
_Host.cshtml |
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/[theme]-base.css">
|
![]() |
[theme] will theme the whole application while [theme]-base will only theme the Razor components. |
radzen-dark-theme-fix.css |
/* form border color */
.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox, .rz-chkbox-box {
border-color: lightslategray;
background-color: inherit; /* or initial */
}
/* form border color on mouse hover */
.rz-autocomplete:hover, .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:hover:not(:focus), .rz-lookup-search input:hover:not(:focus), .rz-spinner:hover:not(:focus), .rz-calendar .rz-inputtext:hover:not(:focus), .rz-multiselect:hover:not(:focus), .rz-dropdown:hover:not(:focus), .mask:hover:not(:focus), .rz-textarea:hover:not(:focus), .rz-textbox:hover:not(:focus) {
border-color: lightskyblue;
}
/* placeholde color */
input::placeholder {
color: white;
}
/* when outline is displayed, hide border */
:focus-visible {
border-color: transparent !important;
}
|
Installation
dotnet add package Radzen.Blazor |
_Imports.razor |
@using Radzen
@using Radzen.Shared
@using Radzen.Blazor
|
_Host.cshtml |
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
@* ... *@
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>
|