DxTextBox.Buttons Property
Allows you to add command buttons to the Text Box.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.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 Text Box:
- Add the
<Buttons></Buttons>
tag to the component’s markup to define theButtons
collection. - Add DxEditorButton objects to the
Buttons
collection. - 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 Text Box.
<DxTextBox Text="@Email"
TextChanged="@((string value) => OnEmailChanged(value))"
CssClass="dx-demo-editor-width">
<Buttons>
<DxEditorButton IconCssClass="editor-icon editor-icon-mail"
Tooltip="Send Email"
NavigateUrl="@EmailLink" />
</Buttons>
</DxTextBox>
@code{
string Email { get; set; } = "test@example.com";
string EmailLink { get; set; } = "mailto:test@example.com";
void OnEmailChanged(string email) {
Email = email;
EmailLink = $"mailto:{email}";
}
}
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