number field

BlazorFluentUI/Components/Pages/FormInputs/FormInputNumberField.razor

@@ -44,9 +44,105 @@
     </p>
 </FluentCard>
 
+<FluentLabel class="my-3" Typo="Typography.H4">Types</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <p>
+        <FluentNumberField @bind-Value="exampleLong">Long</FluentNumberField><br />
+        Example long: @exampleLong
+        <br />
+        Minimum value: -999999999999, Maximum value: 999999999999
+    </p>
+    <p>
+        <FluentNumberField @bind-Value="shortMin">Short</FluentNumberField>
+        <br />
+        Minimum value: @(short.MinValue), Maximum value: @(short.MaxValue)
+    </p>
+
+    <p>
+        <FluentNumberField @bind-Value="@exampleFloat">Float</FluentNumberField><br />
+        Example float: @exampleFloat
+        <br />
+        Minimum value: @(float.MinValue), Maximum value: @(float.MaxValue)
+    </p>
+    <p>
+        <FluentNumberField Step=0.25 @bind-Value="@exampleFloat">Float</FluentNumberField><br />
+        Example float: @exampleFloat (step=0.25)
+        <br />
+        Minimum value: @(float.MinValue), Maximum value: @(float.MaxValue)
+    </p>
+    <p>
+        <FluentNumberField @bind-Value="@exampleDouble">Double</FluentNumberField><br />
+        Example double: @exampleDouble
+        <br />
+        Minimum value: @(double.MinValue), Maximum value: @(double.MaxValue)
+    </p>
+    <p>
+        <FluentNumberField @bind-Value="@exampleDecimal">Decimal</FluentNumberField><br />
+        Example decimal: @exampleDecimal
+        <br />
+        Minimum value: @(decimal.MinValue), Maximum value: @(decimal.MaxValue)
+    </p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Displays</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <h4 class="mt-3">Full Width</h4>
+    <FluentNumberField @bind-Value="value1" Style="width:100%"/>
+
+    <h4 class="mt-3">Placeholder</h4>
+    <FluentNumberField @bind-Value="value2" Placeholder="This is placeholder" />
+
+    <h4 class="mt-3">Hide Up/Down steps</h4>
+    <FluentNumberField @bind-Value="value3" HideStep="true" />
+
+    <h4 class="mt-3">Required</h4>
+    <FluentNumberField @bind-Value="value4" Required="true" />
+
+    <h4 class="mt-3">Disabled</h4>
+    <FluentNumberField @bind-Value="value5" Disabled="true" />
+    <FluentNumberField @bind-Value="value6" Disabled="true" Label="This is label" />
+    <FluentNumberField @bind-Value="value7" Disabled="true" Placeholder="This is placeholder"/>
+
+    <h4 class="mt-3">Read Only</h4>
+    <FluentNumberField @bind-Value=value8 ReadOnly="true"></FluentNumberField>
+    <FluentNumberField @bind-Value=value9 ReadOnly="true" Label="This is label"></FluentNumberField>
+
+    <h4 class="mt-3">Icons</h4>
+    <FluentNumberField @bind-Value="value2" Label="start" Placeholder="This is placeholder">
+        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Accent" Slot="start"/>
+    </FluentNumberField>
+    <FluentNumberField @bind-Value="value2" Label="end" Placeholder="This is placeholder">
+        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Accent" Slot="end" />
+    </FluentNumberField>
+    <FluentNumberField @bind-Value="value2" Label="start / end" Placeholder="This is placeholder">
+        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Accent" Slot="start" />
+        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Accent" Slot="end" />
+    </FluentNumberField>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Focus</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <h4>Focus Async</h4>
+    <p style="display:flex">
+        <FluentNumberField @ref="focusTest" @bind-Value="value"/>
+        <FluentButton Class="ms-1" @onclick="() => focusTest?.FocusAsync()">FocusAsync</FluentButton>
+    </p>
+</FluentCard>
+
 @code {
     int exampleInt { get; set; } = 123;
     int? exampleNullableInt = null;
     int exampleInt2 = 345;
     int? exampleNullableInt2 = null;
+
+    short shortMin = short.MinValue;
+    long exampleLong { get; set; } = 999999999999;
+    float exampleFloat { get; set; } = 123.45f;
+    double exampleDouble { get; set; } = 456.32d;
+    decimal exampleDecimal { get; set; } = Decimal.One / 3;
+
+    int? value1, value2, value3, value4, value5, value6, value7, value8 = 1, value9 = 2;
+
+    FluentNumberField<int?>? focusTest;
+    int? value;
 }