« Radzen » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
 
(11 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>

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

Bash.svg
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>