Skip to main content
All docs
V25.1
  • DxMaskedInput<T>.Buttons Property

    Allows you to add command buttons to the Masked Input.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [Parameter]
    public RenderFragment Buttons { get; set; }

    Property Value

    Type Description
    RenderFragment

    A collection of buttons (UI fragments).

    Remarks

    You can add command buttons to the Masked Input component.

    1. Add the <Buttons></Buttons> tag to the component’s markup to define the Buttons collection.
    2. Add DxEditorButton objects to the Buttons collection.
    3. Set up button properties to customize the buttons:
      • CssClass
      • Position
      • and so on

    The following code snippet adds the Send E-mail button to the Masked Input component.

    <DxMaskedInput Value="@Email"
                   ValueChanged="@((string value) => OnEmailChanged(value))"
                   Mask="@EmailMask"
                   MaskMode="MaskMode.RegEx">
        <Buttons>
            <DxEditorButton IconCssClass="editor-icon editor-icon-mail"
                            Tooltip="Send Email"
                            NavigateUrl="@EmailLink"
                            CssClass="dx-demo-editor-width" />
        </Buttons>
    </DxMaskedInput>
    
    
    @code{
        string Email { get; set; } = "test@example.com";
        string EmailMask { get; set; } = @"(\w|[.-])+@(\w|-)+\.(\w|-){2,4}";
        string EmailLink { get; set; } = "mailto:test@example.com";
        void OnEmailChanged(string email) {
            Email = email;
            EmailLink = $"mailto:{email}";
        }
    }
    
    <style>
        .dx-demo-editor-width {
            max-width: 320px;
            width: 100%;
        }
    </style>
    

    Masked Input - Command Button

    Run Demo: Editors - Command Buttons

    We do not recommend that you use conditional render within the <Buttons></Buttons tag. This may cause an incorrect button order. The following example demonstrates a case when the Button1 may change its position.

    <Buttons>    
        @if(condition) {
            <DxEditorButton Text="Button1"/>    
        }    
        <DxEditorButton Text="Button2"/>    
        <DxEditorButton Text="Button3"/>
    </Buttons>
    

    If you need to hide a button, set the Visible property to false.

    See Also