mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
6d5970adcb
* SecurityCode component added * Methods for create/destroy SecurityCode improved * Bind value demo added for SecurityCode * SecurityCode will use space instead empty string for invalid value * SecurityCode will use size=1 for inputs instead width * text-align: center added for .rz-security-code-input * padding: 0.3rem added to .rz-security-code-input * Update SecurityCode styles * Update SecurityCode demos --------- Co-authored-by: yordanov <vasil@yordanov.info>
44 lines
2.1 KiB
Plaintext
44 lines
2.1 KiB
Plaintext
<RadzenStack class="rz-p-0 rz-p-md-12">
|
|
<RadzenCard class="rz-p-4" Variant="Variant.Outlined">
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
|
|
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
|
|
Count
|
|
<RadzenNumeric @bind-Value="@count" aria-label="count" Min="1" Max="8" />
|
|
</RadzenStack>
|
|
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
|
|
Gap
|
|
<RadzenTextBox @bind-Value="@gap" aria-label="gap" />
|
|
</RadzenStack>
|
|
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
|
|
Disabled
|
|
<RadzenSwitch @bind-Value="@disabled" Style="margin-top: 4px;" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "disabled" }})" />
|
|
</RadzenStack>
|
|
</RadzenStack>
|
|
</RadzenCard>
|
|
<RadzenCard>
|
|
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Default SecurityCode</RadzenText>
|
|
<RadzenSecurityCode @bind-Value=@value Count="@count" Disabled="@disabled" Gap="@gap" />
|
|
</RadzenCard>
|
|
<RadzenCard>
|
|
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Numeric SecurityCode</RadzenText>
|
|
<RadzenSecurityCode @bind-Value=@numbersOnlyValue Type="SecurityCodeType.Numeric" Count="@count" Disabled="@disabled" Gap="@gap" />
|
|
</RadzenCard>
|
|
<RadzenCard>
|
|
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Password SecurityCode</RadzenText>
|
|
<RadzenSecurityCode @bind-Value=@passwordValue Type="SecurityCodeType.Password" Count="@count" Disabled="@disabled" Gap="@gap" />
|
|
</RadzenCard>
|
|
<RadzenCard>
|
|
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Bind SecurityCode value</RadzenText>
|
|
<RadzenSecurityCode @bind-Value=@valueBind Count="@count" Disabled="@disabled" Gap="@gap" />
|
|
</RadzenCard>
|
|
</RadzenStack>
|
|
@code{
|
|
string value;
|
|
string numbersOnlyValue;
|
|
string passwordValue;
|
|
string valueBind = "sa4f";
|
|
|
|
string gap = "0.5rem";
|
|
bool disabled;
|
|
int count = 4;
|
|
} |