mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
a1fe810418
button, splitbutton, toggle-button, fab, fab-menu, speechtotextbutton: keyword-aligned titles, SEO intros, FAQ, and related-component links.
96 lines
4.1 KiB
Plaintext
96 lines
4.1 KiB
Plaintext
@page "/toggle-button"
|
|
|
|
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
|
|
Blazor ToggleButton
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
|
|
The Blazor ToggleButton switches between on and off states, changing its appearance when activated - ideal for toolbars and settings.
|
|
</RadzenText>
|
|
|
|
<RadzenText Anchor="toggle-button#bound-toggle-button" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
|
Bound ToggleButton
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
Binding Radzen ToggleButton's Value.
|
|
</RadzenText>
|
|
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonBound">
|
|
<ToggleButtonBound />
|
|
</RadzenExample>
|
|
|
|
<RadzenText Anchor="toggle-button#shade" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
|
ToggleButton Shade
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
Use <code>ToggleButtonShade</code> to define the shade of the ToggleButton's toggled active state.
|
|
</RadzenText>
|
|
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonShade">
|
|
<ToggleButtonShade />
|
|
</RadzenExample>
|
|
|
|
<RadzenText Anchor="toggle-button#style" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
|
ToggleButton Style
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
Use <code>ToggleButtonStyle</code> to define the style of the ToggleButton's toggled active state.
|
|
</RadzenText>
|
|
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonStyle">
|
|
<ToggleButtonStyle />
|
|
</RadzenExample>
|
|
|
|
<RadzenText Anchor="toggle-button#variants" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
|
ToggleButton Variants
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
Use <code>Variant</code> for different button variants.
|
|
</RadzenText>
|
|
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonVariants">
|
|
<ToggleButtonVariants />
|
|
</RadzenExample>
|
|
|
|
<RadzenText Anchor="toggle-button#content" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
|
Content in ToggleButtons
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
Text, icons and images can be added to a button. Use <code>ToggleIcon</code> in case you need to change the icon when the button is toggled.
|
|
</RadzenText>
|
|
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonContent">
|
|
<ToggleButtonContent />
|
|
</RadzenExample>
|
|
|
|
<RadzenText Anchor="toggle-button#sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
|
ToggleButton Sizes
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
Use the <code>Size</code> property to set button size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
|
|
</RadzenText>
|
|
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonSizes">
|
|
<ToggleButtonSizes />
|
|
</RadzenExample>
|
|
|
|
<RadzenText Anchor="toggle-button#disabled" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
|
Disabled ToggleButton
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
Use <code>Disabled="true"</code> to disable a button.
|
|
</RadzenText>
|
|
<RadzenExample ComponentName="ToggleButton" Example="ToggleButtonDisabled">
|
|
<ToggleButtonDisabled />
|
|
</RadzenExample>
|
|
|
|
<RadzenText Anchor="toggle-button#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
|
Keyboard Navigation
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor ToggleButton component.
|
|
</RadzenText>
|
|
|
|
<KeyboardNavigationDataGrid Data="@shortcuts" />
|
|
|
|
@code {
|
|
public List<KeyboardShortcut> shortcuts = new()
|
|
{
|
|
new KeyboardShortcut { Key = "Tab", Action = "Navigate to a ToggleButton." },
|
|
new KeyboardShortcut { Key = "Enter", Action = "Click and toggle the focused ToggleButton." },
|
|
new KeyboardShortcut { Key = "Space", Action = "Click and toggle the focused ToggleButton." }
|
|
};
|
|
} |