feat(blazorui): add RTL support to BitSpinButton #8166 (#8168)

bitfoundation · Jul 31, 2024 · a8026b2 · a8026b2
1 parent 8a0f242
commit a8026b2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git 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/.../Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor b/.../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/...t.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SpinButton/BitSpinButtonDemo.razor.cs b/...t.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=""برچسب درخط"" />";
 }