Button Component

Description

This component represents a button in Blazor using the Gap.Blazor.Button model. The button is rendered using the TelerikButton component and is dynamically styled based on the properties of the model.

Usage

@using Gap.Blazor
@using Gap.Blazor.Components
@using Telerik.Blazor.Components
@inherits WMControlComponentBase
@namespace Gap.Blazor.Components

<WMStyleBase model=@buttonModel></WMStyleBase>
<div @onkeydown="@keyDownHandler">
    <TelerikButton Class="@(buttonModel.GetStringClasses()+" "+ buttonModel.GetToolTipClass())" Title="@buttonModel.ToolTipText" [email protected] [email protected] 
OnClick=@onClickHandler ThemeColor=@(ThemeConstants.Button.ThemeColor.Base) @ref="elementRef"
    TabIndex=@TabIndex>@buttonModel.Text</TelerikButton>
</div>

<style>
    [email protected](){
        background-color: @GetBackColorHex();
    }
</style>

Properties

  • buttonModel: Instance of the Gap.Blazor.Button model.

  • elementRef: Reference to the TelerikButton element.

Methods

  • onClickHandler(): Handles the button click event.

  • Focus(): Method to focus the button.

  • GetBackColorHex(): Gets the button's background color in hexadecimal format.

Events

  • OnClick: Event triggered when the button is clicked.

Styles

The button's style is dynamically defined using the GetComponentClass() method, and the background color is obtained through GetBackColorHex().

Last updated