diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index ecb5197..631dad4 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -21,6 +21,10 @@
Splitter
Stack
+
+ Overview
+
+
diff --git a/BlazorFluentUI/Components/Pages/FormInputOverView.razor b/BlazorFluentUI/Components/Pages/FormInputOverView.razor
new file mode 100644
index 0000000..8b5da90
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/FormInputOverView.razor
@@ -0,0 +1,110 @@
+@page "/forminputoverview"
+
+@inject CountryService countryService;
+
+@rendermode RenderMode.InteractiveServer
+
+Basic Fluent UI Form
+
+
+ This is an example of the Fluent UI.
+ The FluentValidationSummary and FluentValidationMessage give feedback on the state of the form.
+ Is uses Starship model form Standard Documentation.
+
+
+ Starfleet Starship Database
+
+ This form uses the Fluent UI input components.
+ It uses a DataAnnotationsValidator, a FluentValidationSummary and FluentValidationMessages.;
+
+
+ New Ship Entry Form
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select classification...
+ Exploration
+ Commerce
+ Diplomacy
+ Defense
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Submit
+
+
+
+
+
+@code {
+ [SupplyParameterFromForm]
+ Starship starship { get; set; } = new Starship();
+
+ string message = "";
+
+ protected override void OnInitialized()
+ {
+ starship.ProductionDate = DateTime.Now;
+ }
+
+ private async Task OnSearchCountryAsync(OptionsSearchEventArgs e)
+ {
+ var allCountry = await countryService.GetAllCountriesAsync();
+ e.Items = allCountry.Where(c => c.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
+ .OrderBy(c => c.Name);
+ }
+
+ private void HandleValidSubmit()
+ {
+ message = $"Message: HandleValidSubmit called.";
+ }
+
+ private void OnSubmit(Starship e)
+ {
+
+ }
+}
diff --git a/BlazorFluentUI/Components/Pages/LayoutStack.razor b/BlazorFluentUI/Components/Pages/LayoutStack.razor
index 6636d2e..6ab89b1 100644
--- a/BlazorFluentUI/Components/Pages/LayoutStack.razor
+++ b/BlazorFluentUI/Components/Pages/LayoutStack.razor
@@ -12,7 +12,9 @@
Characteristics
1. Orientation: The child components are controlled via the Horizontal(default) or Vertical.
+
2. Alignment: The child components are controlled via the HorizontalAlignment and VerticalAlignment.
+
3. Spacing: The child components are controlled via the HorizontalGap and VerticalGap.
diff --git a/BlazorFluentUI/Components/_Imports.razor b/BlazorFluentUI/Components/_Imports.razor
index 759c981..4eb366f 100644
--- a/BlazorFluentUI/Components/_Imports.razor
+++ b/BlazorFluentUI/Components/_Imports.razor
@@ -9,4 +9,6 @@
@using Microsoft.JSInterop
@using BlazorFluentUI
@using BlazorFluentUI.Components
+@using BlazorFluentUI.Models
+@using BlazorFluentUI.Services
diff --git a/BlazorFluentUI/Models/Country.cs b/BlazorFluentUI/Models/Country.cs
new file mode 100644
index 0000000..41be865
--- /dev/null
+++ b/BlazorFluentUI/Models/Country.cs
@@ -0,0 +1,11 @@
+namespace BlazorFluentUI.Models
+{
+ public class Country
+ {
+ public int Id { get; set; }
+
+ public string Name { get; set; }
+
+ public string Code { get; set; }
+ }
+}
diff --git a/BlazorFluentUI/Models/Starship.cs b/BlazorFluentUI/Models/Starship.cs
new file mode 100644
index 0000000..f804ed1
--- /dev/null
+++ b/BlazorFluentUI/Models/Starship.cs
@@ -0,0 +1,35 @@
+using System.ComponentModel.DataAnnotations;
+using System.Diagnostics.CodeAnalysis;
+
+namespace BlazorFluentUI.Models
+{
+ [RequiresUnreferencedCode("Necessary because of RangeAttribute usage")]
+ public class Starship
+ {
+ [Required]
+ [MinLength(3, ErrorMessage = "Identifier is too short")]
+ [StringLength(16, ErrorMessage = "Identifier is too long (16 character limit)")]
+ public string? Identifier { get; set; }
+
+ public string? Description { get; set; }
+
+ [Required(ErrorMessage = "Countries are required")]
+ public IEnumerable Countries { get; set; }
+
+ [Required(ErrorMessage = "A classification is required")]
+ public string? Classification { get; set; }
+
+ [Required]
+ [Range(1, 100000, ErrorMessage = "Accomodation invalid (1-100000)")]
+ public int MaximumAccomodation { get; set; }
+
+ [Required]
+ [Range(typeof(bool), "true", "true", ErrorMessage = "This form disallows unapproved ships")]
+ public bool IsValidatedDesign { get; set; }
+
+ [Required]
+ public DateTime? ProductionDate { get; set; }
+
+ public bool HasTeleporter { get; set; }
+ }
+}
diff --git a/BlazorFluentUI/Program.cs b/BlazorFluentUI/Program.cs
index c4f4a23..4b6e627 100644
--- a/BlazorFluentUI/Program.cs
+++ b/BlazorFluentUI/Program.cs
@@ -1,5 +1,6 @@
using Microsoft.FluentUI.AspNetCore.Components;
using BlazorFluentUI.Components;
+using BlazorFluentUI.Services;
var builder = WebApplication.CreateBuilder(args);
@@ -14,6 +15,8 @@ builder.Services.AddRazorComponents(options =>
});
builder.Services.AddFluentUIComponents();
+builder.Services.AddSingleton();
+
var app = builder.Build();
// Configure the HTTP request pipeline.
diff --git a/BlazorFluentUI/Services/CountryService.cs b/BlazorFluentUI/Services/CountryService.cs
new file mode 100644
index 0000000..18c7d95
--- /dev/null
+++ b/BlazorFluentUI/Services/CountryService.cs
@@ -0,0 +1,74 @@
+using BlazorFluentUI.Models;
+
+namespace BlazorFluentUI.Services
+{
+ public class CountryService
+ {
+ private readonly List _countries = new List();
+ private readonly SemaphoreSlim _semaphore = new SemaphoreSlim(1, 1);
+ private readonly Random _random = new Random();
+ private readonly string[] _countryNames = { "Korea", "USA", "Canada", "Mexico", "Brazil", "UK", "Germany", "France", "Italy", "China", "Japan", "India", "Australia", "Russia", "Spain", "South Africa", "New Zealand", "Argentina", "Egypt", "Thailand", "Sweden", "Norway", "Denmark", "Finland", "Netherlands", "Belgium" };
+
+ public CountryService()
+ {
+ var randomCountryNames = _countryNames.OrderBy(x => Guid.NewGuid()).ToArray();
+
+ for (int i = 0; i < randomCountryNames.Length; i++)
+ {
+ var country = new Country
+ {
+ Id = i + 1,
+ Name = randomCountryNames[i],
+ };
+ _countries.Add(country);
+ }
+ }
+
+ public async Task GetCountryAsync(int id)
+ {
+ await _semaphore.WaitAsync();
+ try
+ {
+ return _countries.FirstOrDefault(c => c.Id == id);
+ }
+ finally
+ {
+ _semaphore.Release();
+ }
+ }
+
+ public async Task> GetAllCountriesAsync()
+ {
+ await _semaphore.WaitAsync();
+ try
+ {
+ return _countries.ToList();
+ }
+ finally
+ {
+ _semaphore.Release();
+ }
+ }
+
+ //public async Task GenerateRandomCountriesAsync(int count)
+ //{
+ // await _semaphore.WaitAsync();
+ // try
+ // {
+ // for (int i = 0; i < count; i++)
+ // {
+ // var country = new Country
+ // {
+ // Id = _countries.Any() ? _countries.Max(c => c.Id) + 1 : 1,
+ // Name = _countryNames[_random.Next(_countryNames.Length)],
+ // };
+ // _countries.Add(country);
+ // }
+ // }
+ // finally
+ // {
+ // _semaphore.Release();
+ // }
+ //}
+ }
+}