« Radzen » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
(→Themes) |
||
| (12 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
[[Category:Blazor]] | [[Category:Blazor]] | ||
= Links = | |||
* [https://blazor.radzen.com/dashboard Radzen Blazor Components Demo] | |||
* [https://github.com/radzenhq/radzen-blazor Radzen Blazor on Github] | |||
* [https://github.com/radzenhq/radzen-examples Examples] | |||
= [https://blazor.radzen.com/checkboxlist CheckBoxList] = | = [https://blazor.radzen.com/checkboxlist CheckBoxList] = | ||
<filebox fn='MyPage.razor'> | <filebox fn='MyPage.razor'> | ||
| Ligne 14 : | Ligne 19 : | ||
private IReadOnlyCollection<ItemDto> items; | private IReadOnlyCollection<ItemDto> items; | ||
</filebox> | |||
= [https://blazor.radzen.com/numeric Numeric] = | |||
<filebox fn='MyPage.razor'> | |||
<RadzenNumeric TValue="int?" | |||
Min="1" | |||
Max="10" | |||
@bind-Value=@value | |||
Placeholder="Enter or clear value" /> | |||
</filebox> | |||
<filebox fn='MyPage.razor.cs'> | |||
int? value; | |||
</filebox> | |||
= Themes = | |||
{| class="wikitable wtp" | |||
! Theme | |||
! Description | |||
|- | |||
| default || | |||
|- | |||
| dark || dark theme | |||
|- | |||
| humanistic || | |||
|- | |||
| software || | |||
|} | |||
<filebox fn='_Host.cshtml'> | |||
<head> | |||
<link rel="stylesheet" href="_content/Radzen.Blazor/css/[theme]-base.css"> | |||
</filebox> | |||
{{info | {{boxx|[theme]}} will theme the whole application while {{boxx|[theme]-base}} will only theme the Razor components.}} | |||
<filebox fn='radzen-dark-theme-fix.css' collapsed> | |||
/* 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; | |||
} | |||
</filebox> | </filebox> | ||
| Ligne 23 : | Ligne 85 : | ||
<filebox fn='_Imports.razor'> | <filebox fn='_Imports.razor'> | ||
@using Radzen | @using Radzen | ||
@using Radzen.Shared | |||
@using Radzen.Blazor | @using Radzen.Blazor | ||
</filebox> | </filebox> | ||
| Ligne 29 : | Ligne 92 : | ||
<head> | <head> | ||
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css"> | <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css"> | ||
@* ... *@ | |||
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script> | <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script> | ||
</body> | </body> | ||
</filebox> | </filebox> | ||
Dernière version du 29 mai 2021 à 16:49
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>
|
