From a8026b2c529bd449dcdea933c209f47295e6f42c Mon Sep 17 00:00:00 2001
From: Mohammad Hossein Rastegarinia <mh.rastegari@outlook.com>
Date: Wed, 31 Jul 2024 18:28:20 +0330
Subject: [PATCH] feat(blazorui): add RTL support to BitSpinButton #8166
(#8168)
---
.../Inputs/SpinButton/BitSpinButton.razor | 3 ++-
.../Inputs/SpinButton/BitSpinButtonDemo.razor | 14 ++++++++++++++
.../Inputs/SpinButton/BitSpinButtonDemo.razor.cs | 5 +++++
3 files changed, 21 insertions(+), 1 deletion(-)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SpinButton/BitSpinButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SpinButton/BitSpinButton.razor
index 0080b438e7..0d73410147 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SpinButton/BitSpinButton.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SpinButton/BitSpinButton.razor
@@ -4,7 +4,8 @@
<div @ref="RootElement" @attributes="HtmlAttributes"
id="@_Id"
style="@StyleBuilder.Value"
- class="@ClassBuilder.Value">
+ class="@ClassBuilder.Value"
+ dir="@Dir?.ToString().ToLower()">
@if (IconName.HasValue() || Label.HasValue() || LabelTemplate is not null)
{
<div style="@Styles?.LabelContainer" class="bit-spb-lct @Classes?.LabelContainer">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor
index 88f791f3e1..86b2186e2b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor
@@ -218,4 +218,18 @@
</div>
</ExamplePreview>
</ComponentExampleBox>
+
+ <ComponentExampleBox Title="RTL" RazorCode="@example11RazorCode" Id="example11">
+ <ExamplePreview>
+ <div>Use BitSpinButton in right-to-left (RTL).</div>
+ <br />
+ <div dir="rtl">
+ <div class="example-box">
+ <BitSpinButton Dir="BitDir.Rtl" Label="برچسب" />
+ <br />
+ <BitSpinButton Dir="BitDir.Rtl" LabelPosition="BitLabelPosition.Start" Label="برچسب درخط" />
+ </div>
+ </div>
+ </ExamplePreview>
+ </ComponentExampleBox>
</ComponentDemo>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor.cs
index 2ac57c42e9..07b73c4ddb 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor.cs
@@ -622,4 +622,9 @@ public class BitSpinButtonValidationModel
private async Task HandleValidSubmit() { }
private void HandleInvalidSubmit() { }";
+
+ private readonly string example11RazorCode = @"
+<BitSpinButton Dir=""BitDir.Rtl"" Label=""برچسب"" />
+
+<BitSpinButton Dir=""BitDir.Rtl"" LabelPosition=""BitLabelPosition.Start"" Label=""برچسب درخط"" />";
}