@page "/selectbar"
@page "/docs/guides/components/selectbar.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    SelectBar
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>SelectBar</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a segmented button bar with two-way data binding, single or multiple selection modes, data-bound items, statically declared items, programmatically populated items with disabled states, icon and image support, custom templates, configurable sizes, and horizontal/vertical orientation options.
</RadzenText>

<RadzenText Anchor="selectbar#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of SelectBar
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>SelectBar</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarBindValue">
    <SelectBarBindValue />
</RadzenExample>

<RadzenText Anchor="selectbar#value-and-change-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of SelectBar using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarChangeEvent">
    <SelectBarChangeEvent />
</RadzenExample>

<RadzenText Anchor="selectbar#multiple-selection" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Multiple selection
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Multiple="true"</code> to enable selection of multiple items in the SelectBar.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarMultiple">
    <SelectBarMultiple />
</RadzenExample>

<RadzenText Anchor="selectbar#populate-from-data" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Populate SelectBar items from data
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Data</code> property to dynamically populate SelectBar items from a collection.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarItemsFromData">
    <SelectBarItemsFromData />
</RadzenExample>

<RadzenText Anchor="selectbar#populate-items-statically" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Statically declared and populated SelectBar items from data
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Combine statically declared items with data-bound items for flexible SelectBar configurations.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarDeclaredAndItemsFromData">
    <SelectBarDeclaredAndItemsFromData />
</RadzenExample>

<RadzenText Anchor="selectbar#populate-items-programmatically" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Populate items programmatically and disable item
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use loops to programmatically create SelectBar items and set individual items as disabled.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarForEach">
    <SelectBarForEach />
</RadzenExample>

<RadzenText Anchor="selectbar#icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    SelectBar with icons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Icon</code> property on SelectBar items to display icons alongside or instead of text.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarIcons">
    <SelectBarIcons />
</RadzenExample>

<RadzenText Anchor="selectbar#images" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    SelectBar with images
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>ImageUrl</code> property on SelectBar items to display images in the selection buttons.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarImages">
    <SelectBarImages />
</RadzenExample>

<RadzenText Anchor="selectbar#template" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    SelectBar with template
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Template</code> property to fully customize the appearance of SelectBar items.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarTemplate">
    <SelectBarTemplate />
</RadzenExample>

<RadzenText Anchor="selectbar#size" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    SelectBar Size
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Size</code> property to control the size of the SelectBar buttons (ExtraSmall, Small, Medium, Large).
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarSize">
    <SelectBarSize />
</RadzenExample>

<RadzenText Anchor="selectbar#orientation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    SelectBar Orientation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Orientation</code> property to display SelectBar items horizontally or vertically.
</RadzenText>
<RadzenExample ComponentName="SelectBar" Example="SelectBarOrientation">
    <SelectBarOrientation />
</RadzenExample>

<RadzenText Anchor="selectbar#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 SelectBar component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a SelectBar item." },
        new KeyboardShortcut { Key = "Shift + Tab", Action = "Navigate to a previous SelectBar item." },
        new KeyboardShortcut { Key = "Space or Enter", Action = "Select the focused SelectBar item." },
        new KeyboardShortcut { Key = "Space or Enter with multiple selection enabled", Action = "Toggle selection of the focused SelectBar item." }
    };
}
