You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
3.9 KiB
81 lines
3.9 KiB
@page "/buttons"
|
|
@page "/button"
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<h4>Button with text</h4>
|
|
<RadzenButton Click=@(args => OnClick("Button with text")) Text="Buttonx" Style="margin-bottom: 20px; width: 150px" />
|
|
</div>
|
|
<div class="col-xl-6">
|
|
<h4>Button with text and icon</h4>
|
|
<RadzenButton Click=@(args => OnClick("Button with text and icon")) Text="Button" Icon="account_circle" Style="margin-bottom: 20px; width: 150px" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<h4>Button with icon</h4>
|
|
<RadzenButton Click=@(args => OnClick("Button with icon")) Icon="account_circle" Style="margin-bottom: 20px; width: 80px" />
|
|
</div>
|
|
<div class="col-xl-6">
|
|
<h4>Button with image</h4>
|
|
<RadzenButton Click=@(args => OnClick("Button with image")) Image="images/radzen-nuget.png" ButtonStyle="ButtonStyle.Light" Style="margin-bottom: 20px; width: 80px" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<h4>Button with content</h4>
|
|
<RadzenButton Click=@(args => OnClick("Button with content")) Image="images/radzen-nuget.png" ButtonStyle="ButtonStyle.Light" Style="margin-bottom: 20px; width: 200px">
|
|
Some text
|
|
<RadzenImage Path="images/radzen-nuget.png" Style="width:20px;margin-left: 10px;" />
|
|
</RadzenButton>
|
|
</div>
|
|
<div class="col-xl-6">
|
|
<h4>Disabled Button</h4>
|
|
<RadzenButton Disabled="true" Text="Button" Style="margin-bottom: 20px; width: 150px" />
|
|
</div>
|
|
</div>
|
|
<h4>Button styles</h4>
|
|
<div class="row">
|
|
<div class="col">
|
|
<RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Primary button")) Text="Primary" ButtonStyle="ButtonStyle.Primary" />
|
|
<RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Secondary button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
|
|
<RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Light button")) Text="Light" ButtonStyle="ButtonStyle.Light" />
|
|
<RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Danger button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" />
|
|
<RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Info button")) Text="Info" ButtonStyle="ButtonStyle.Info" />
|
|
<RadzenButton style="margin-bottom: 16px" Click=@(args => OnClick("Warning button ")) Text="Warning" ButtonStyle="ButtonStyle.Warning" />
|
|
</div>
|
|
</div>
|
|
<h4>Busy Indicator</h4>
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<h5>Without BusyText</h5>
|
|
<RadzenButton style="margin: 0 1rem 1rem 0; width: 150px" IsBusy=@busy Click=@OnBusyClick Text="Save" />
|
|
</div>
|
|
|
|
<div class="col-xl-6">
|
|
<h5>With Busy Text</h5>
|
|
<RadzenButton style="margin: 0 1rem 1rem 0; width: 200px" Icon="save" BusyText="Saving ..." IsBusy=@busy Click=@OnBusyClick Text="Save" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
@code {
|
|
bool busy;
|
|
|
|
void OnClick(string buttonName)
|
|
{
|
|
|
|
}
|
|
|
|
async Task OnBusyClick()
|
|
{
|
|
busy = true;
|
|
await Task.Delay(2000);
|
|
busy = false;
|
|
} }
|