Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select bar orientation parameter #1905

Merged
merged 3 commits into from
Jan 13, 2025
Merged

Select bar orientation parameter #1905

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b4913d
Select bar:
Cosmatevs Jan 12, 2025
3f2a971
Select bar:
Cosmatevs Jan 12, 2025
3a2e61c
Select bar: add whitespace in .razor file to make it more comprehensible
Cosmatevs Jan 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions Radzen.Blazor/RadzenSelectBar.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,27 @@
{
<div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
@foreach (var item in allItems.Where(i => i.Visible))
{<div @ref="@item.Element" id="@item.GetItemId()" @onclick="@(args => SelectItem(item))" @onkeypress="@(args => OnKeyPress(args, SelectItem(item)))" @onkeypress:preventDefault=preventKeyPress @onkeypress:stopPropagation @attributes="item.Attributes" style="@item.Style"
class=@ButtonClassList(item) aria-label="@item.Text" tabindex="@(Disabled || item.Disabled ? "-1" : $"{TabIndex}")">@if(item.Template != null){ @item.Template(item)}else{@if (!string.IsNullOrEmpty(item.Icon)){<i class="notranslate rzi rz-navigation-item-icon" style="margin-right:2px;@(!string.IsNullOrEmpty(item.IconColor) ? $"color:{item.IconColor}" : "")">@((MarkupString)item.Icon)</i>}@if (!string.IsNullOrEmpty(item.Image)){<img class="rz-navigation-item-icon" src="@item.Image" style="@item.ImageStyle" [email protected]/>}<span class="rz-button-text">@item.Text</span>}</div>}
{
<div @ref="@item.Element" id="@item.GetItemId()"
@onclick="@(args => SelectItem(item))" @onkeypress="@(args => OnKeyPress(args, SelectItem(item)))" @onkeypress:preventDefault=preventKeyPress @onkeypress:stopPropagation
@attributes="item.Attributes" style="@item.Style" class=@ButtonClassList(item) aria-label="@item.Text" tabindex="@(Disabled || item.Disabled ? "-1" : $"{TabIndex}")">
@if (item.Template != null)
{
@item.Template(item)
}
else
{
@if (!string.IsNullOrEmpty(item.Icon))
{
<i class="notranslate rzi rz-navigation-item-icon" style="margin-right:2px;@(!string.IsNullOrEmpty(item.IconColor) ? $"color:{item.IconColor}" : "")">@((MarkupString)item.Icon)</i>
}
@if (!string.IsNullOrEmpty(item.Image))
{
<img class="rz-navigation-item-icon" src="@item.Image" style="@item.ImageStyle" [email protected]/>
}
<span class="rz-button-text">@item.Text</span>
}
</div>
}
</div>
}
26 changes: 17 additions & 9 deletions Radzen.Blazor/RadzenSelectBar.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;
using Radzen.Blazor.Rendering;
using System;
using System.Collections;
Expand Down Expand Up @@ -34,16 +33,24 @@ private string getButtonSize()
}

/// <summary>
/// Gets or sets the size.
/// Gets or sets the size. Set to <c>ButtonSize.Medium</c> by default.
/// </summary>
/// <value>The size.</value>
[Parameter]
public ButtonSize Size { get; set; } = ButtonSize.Medium;

/// <summary>
/// Gets or sets the orientation. Set to <c>Orientation.Horizontal</c> by default.
/// </summary>
/// <value>The orientation.</value>
[Parameter]
public Orientation Orientation { get; set; } = Orientation.Horizontal;

ClassList ButtonClassList(RadzenSelectBarItem item) => ClassList.Create($"rz-button rz-button-{getButtonSize()} rz-button-text-only")
.Add("rz-state-active", IsSelected(item))
.AddDisabled(Disabled || item.Disabled);

ClassList ButtonClassList(RadzenSelectBarItem item)
=> ClassList.Create($"rz-button rz-button-{getButtonSize()} rz-button-text-only")
.Add("rz-state-active", IsSelected(item))
.AddDisabled(Disabled || item.Disabled);

/// <summary>
/// Gets or sets the value property.
Expand Down Expand Up @@ -98,9 +105,10 @@ public virtual IEnumerable Data

/// <inheritdoc />
protected override string GetComponentCssClass()
{
return GetClassList("rz-selectbutton rz-buttonset").Add($"rz-buttonset-{items.Count}").ToString();
}
=> GetClassList("rz-selectbutton rz-buttonset")
.Add($"rz-selectbutton-{(Orientation == Orientation.Vertical ? "vertical" : "horizontal")}")
.Add($"rz-buttonset-{items.Count}")
.ToString();

/// <summary>
/// Gets or sets a value indicating whether this <see cref="RadzenSelectBar{TValue}"/> is multiple.
Expand Down Expand Up @@ -180,7 +188,7 @@ public override bool HasValue
/// Selects the item.
/// </summary>
/// <param name="item">The item.</param>
protected async System.Threading.Tasks.Task SelectItem(RadzenSelectBarItem item)
protected async Task SelectItem(RadzenSelectBarItem item)
{
if (Disabled || item.Disabled)
return;
Expand Down
76 changes: 56 additions & 20 deletions Radzen.Blazor/themes/components/blazor/_selectbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,73 @@ $selectbar-sizes: xs, sm, md, lg;
box-sizing: border-box;
display: inline-flex;

&.rz-selectbutton-horizontal {
flex-direction: row;
}

&.rz-selectbutton-vertical {
flex-direction: column;
}

.rz-button {
&:focus-visible {
z-index: 1;
}
}
}

@each $size in $selectbar-sizes { //.rz-selectbutton .rz-button.rz-button-md
.rz-selectbutton .rz-button.rz-button-#{$size} {
margin-inline-start: -1px;
display: inline-block;
background-color: var(--rz-selectbar-background-color);
color: var(--rz-selectbar-color);
border: var(--rz-selectbar-border);
border-radius: 0;

&:first-child {
margin-inline-start: 0;
border-start-start-radius: var(--rz-selectbar-border-radius);
border-end-start-radius: var(--rz-selectbar-border-radius);
@each $size in $selectbar-sizes {
.rz-selectbutton {
.rz-button.rz-button-#{$size} {
display: inline-block;
background-color: var(--rz-selectbar-background-color);
color: var(--rz-selectbar-color);
border: var(--rz-selectbar-border);
border-radius: 0;

&.rz-state-active {
background-color: var(--rz-selectbar-selected-background-color);
color: var(--rz-selectbar-selected-color);
border: var(--rz-selectbar-selected-border);
}
}

&:last-child {
border-start-end-radius: var(--rz-selectbar-border-radius);
border-end-end-radius: var(--rz-selectbar-border-radius);
&.rz-selectbutton-horizontal {
.rz-button.rz-button-#{$size} {
&:first-child {
border-start-start-radius: var(--rz-selectbar-border-radius);
border-end-start-radius: var(--rz-selectbar-border-radius);
}

&:not(:first-child) {
border-inline-start: none;
}

&:last-child {
border-start-end-radius: var(--rz-selectbar-border-radius);
border-end-end-radius: var(--rz-selectbar-border-radius);
}
}
}

&.rz-state-active {
background-color: var(--rz-selectbar-selected-background-color);
color: var(--rz-selectbar-selected-color);
border: var(--rz-selectbar-selected-border);
&.rz-selectbutton-vertical {
.rz-button.rz-button-#{$size} {
text-align: center;

&:first-child {
border-top-left-radius: var(--rz-selectbar-border-radius);
border-top-right-radius: var(--rz-selectbar-border-radius);
}

&:not(:first-child) {
border-top: none;
}

&:last-child {
border-bottom-left-radius: var(--rz-selectbar-border-radius);
border-bottom-right-radius: var(--rz-selectbar-border-radius);
}
}
}
}
}
18 changes: 18 additions & 0 deletions RadzenBlazorDemos/Pages/SelectBarOrientation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="1rem" Wrap="FlexWrap.Wrap" class="rz-p-12">
<RadzenSelectBar Orientation="Orientation.Horizontal" @bind-Value=@value TValue="bool">
<Items>
<RadzenSelectBarItem Text="On" Value="true" />
<RadzenSelectBarItem Text="Off" Value="false" />
</Items>
</RadzenSelectBar>
<RadzenSelectBar Orientation="Orientation.Vertical" @bind-Value=@value TValue="bool">
<Items>
<RadzenSelectBarItem Text="On" Value="true" />
<RadzenSelectBarItem Text="Off" Value="false" />
</Items>
</RadzenSelectBar>
</RadzenStack>

@code {
bool value;
}
7 changes: 7 additions & 0 deletions RadzenBlazorDemos/Pages/SelectBarPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,13 @@
<SelectBarSize />
</RadzenExample>

<RadzenText Anchor="selectbar#orientation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
SelectBar Orientation
</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>
Expand Down
3 changes: 3 additions & 0 deletions RadzenBlazorDemos/RadzenBlazorDemos.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,8 @@
<Content Update="Pages\DataGridRowDragSchedulerPage.razor">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</Content>
<Content Update="Pages\SelectBarOrientation.razor">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</Content>
</ItemGroup>
</Project>
1 change: 1 addition & 0 deletions RadzenBlazorDemos/Services/ExampleService.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1474,6 +1474,7 @@ public class ExampleService
{
Name = "SelectBar",
Path = "selectbar",
Updated = true,
Description = "Demonstration and configuration of the Radzen Blazor SelectBar component.",
Icon = "&#xf8e8",
Tags = new [] { "form", "edit" }
Expand Down
Loading