Files
radzen-blazor/RadzenBlazorDemos/Pages/TextBoxConfig.razor

63 lines
3.1 KiB
Plaintext

<RadzenRow Gap="2rem" RowGap="2rem" class="rz-m-0 rz-m-md-12">
<RadzenColumn Size="12" SizeMD="4">
<RadzenCard>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Default TextBox</RadzenText>
<RadzenTextBox Change=@(args => OnChange(args, "TextBox")) Style="width: 100%" aria-label="Default TextBox" />
</RadzenCard>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="4">
<RadzenCard>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Placeholder</RadzenText>
<RadzenTextBox Placeholder="Search..." Change=@(args => OnChange(args, "TextBox with placeholder")) Style="width: 100%" aria-label="TextBox with placeholder" />
</RadzenCard>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="4">
<RadzenCard>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">5 characters maximum</RadzenText>
<RadzenTextBox @bind-Value=@value MaxLength="5" Change=@(args => OnChange(args, "TextBox with 5 maximum characters")) Style="width: 100%" aria-label="TextBox with 5 maximum characters" />
</RadzenCard>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="4">
<RadzenCard>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Change on every input</RadzenText>
<RadzenTextBox Immediate="true" Change=@(value => OnChange(value, "TextBox with change on every input")) Style="width: 100%" aria-label="TextBox with change on every input" />
</RadzenCard>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="4">
<RadzenCard>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Disabled TextBox</RadzenText>
<RadzenTextBox Disabled="true" Style="width: 100%" aria-label="Disabled TextBox" />
</RadzenCard>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="4">
<RadzenCard>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">TextBox with disabled AutoComplete</RadzenText>
<RadzenTextBox AutoComplete="false" Style="width: 100%" aria-label="Disabled AutoComplete TextBox" />
</RadzenCard>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="4">
<RadzenCard>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">TextBox with custom AutoComplete</RadzenText>
<RadzenTextBox autocomplete="custom" Style="width: 100%" aria-label="Custom AutoComplete TextBox" />
</RadzenCard>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="4">
<RadzenCard>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">TextBox with predefined AutoCompleteType</RadzenText>
<RadzenTextBox AutoCompleteType="AutoCompleteType.Sex" Style="width: 100%" aria-label="Custom AutoComplete TextBox" />
</RadzenCard>
</RadzenColumn>
</RadzenRow>
<EventConsole @ref=@console />
@code {
string value;
EventConsole console;
void OnChange(string value, string name)
{
console.Log($"{name} value changed to {value}");
}
}