mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
63 lines
3.1 KiB
Plaintext
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}");
|
|
}
|
|
} |