diff --git a/BlazorFluentUI/Components/App.razor b/BlazorFluentUI/Components/App.razor index 8918ae8..9a92bd8 100644 --- a/BlazorFluentUI/Components/App.razor +++ b/BlazorFluentUI/Components/App.razor @@ -7,22 +7,22 @@ - - + + + - - - + - + + diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor index e1f4443..10fd007 100644 --- a/BlazorFluentUI/Components/Layout/NavMenu.razor +++ b/BlazorFluentUI/Components/Layout/NavMenu.razor @@ -24,6 +24,7 @@ Overview Checkbox + InputFile diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FormInputFile.razor b/BlazorFluentUI/Components/Pages/FormInputs/FormInputFile.razor new file mode 100644 index 0000000..f9329d0 --- /dev/null +++ b/BlazorFluentUI/Components/Pages/FormInputs/FormInputFile.razor @@ -0,0 +1,139 @@ +@page "/forminputfile" +@using System.Text + +@rendermode RenderMode.InteractiveServer + +InputFile + + + The FluentInputFile wrap the native Blazor InputFile component and extends it with drag/drop zone support. + + +Default Example + + + + +
+ Drag files here you wish to upload, + or + for them*. +
+ Maximum of 4 files allowed. +
+ + + + + @if (inputFiles.Any()) + { + File(s) uploaded: +
    + @foreach (var file in inputFiles) + { +
  • + @file.Name 🔸 + @($"{Decimal.Divide(file.Size, 1024):N} KB") 🔸 + @file.ContentType 🔸 + @file.LocalFile?.FullName + @file.ErrorMessage +
    • + } +
+ } + + @message + + +Manual Upload + + + + @progressTitle + Upload files + @if (inputFiles.Any()) + { + File(s) uploaded: +
    + @foreach (var file in inputFiles) + { +
  • + @file.Name 🔸 + @($"{Decimal.Divide(file.Size, 1024):N} KB") 🔸 + @file.ContentType 🔸 + @file.LocalFile?.FullName + @file.ErrorMessage +
    • + } +
+ } + + +Buffer, Stream Mode + + Please refers Officail FluentUI-Blazor page. + + + +@code { + int progressPercent = 0; + FluentInputFileEventArgs[] inputFiles = Array.Empty(); + string message = "Message console: "; + + StringBuilder stringBuilder = new StringBuilder(); + private async Task OnCompletedAsync(IEnumerable files) + { + stringBuilder.Clear(); + stringBuilder.Append("Meesage console: "); + inputFiles = files.ToArray(); + foreach (var file in inputFiles) + { + stringBuilder.Append($"{file.Name} is handled. "); + message = stringBuilder.ToString(); + } + + await Task.Delay(3000); + progressPercent = 0; + } + + FluentInputFile? fileUploader = default; + string? progressTitle; + + private void OnCompleted(IEnumerable files) + { + stringBuilder.Clear(); + stringBuilder.Append("Meesage console: "); + inputFiles = files.ToArray(); + progressPercent = fileUploader!.ProgressPercent; + progressTitle = fileUploader!.ProgressTitle; + foreach (var file in inputFiles) + { + stringBuilder.Append($"{file.Name} is handled. "); + message = stringBuilder.ToString(); + } + } +} diff --git a/BlazorFluentUI/Components/Pages/Home.razor b/BlazorFluentUI/Components/Pages/Home.razor index cac4954..1c10e51 100644 --- a/BlazorFluentUI/Components/Pages/Home.razor +++ b/BlazorFluentUI/Components/Pages/Home.razor @@ -31,11 +31,14 @@ - + Example of content - Outline + Neutral Accent + Stealth + Outline + Lightweight diff --git a/BlazorFluentUI/Components/Pages/Layouts/LayoutGrid.razor b/BlazorFluentUI/Components/Pages/Layouts/LayoutGrid.razor index 660cc98..d2d6740 100644 --- a/BlazorFluentUI/Components/Pages/Layouts/LayoutGrid.razor +++ b/BlazorFluentUI/Components/Pages/Layouts/LayoutGrid.razor @@ -20,50 +20,50 @@ Spacing - + - - + xs="12" - + xs="12" sm="6" HiddenWhen="GridItemHidden.SmAndDown" - + xs="12" sm="6" - + xs="6" sm="3" - + xs="6" sm="3" - + xs="6" sm="3" - + xs="6" sm="3" - + xs="3" diff --git a/BlazorFluentUI/Components/Pages/Layouts/LayoutSplitter.razor b/BlazorFluentUI/Components/Pages/Layouts/LayoutSplitter.razor index 8405170..0756d8c 100644 --- a/BlazorFluentUI/Components/Pages/Layouts/LayoutSplitter.razor +++ b/BlazorFluentUI/Components/Pages/Layouts/LayoutSplitter.razor @@ -24,14 +24,14 @@ OnResized="@OnResizedChanged" OnCollapsed="@OnCollapsedChanged" OnExpanded="@OnExpandedChanged" BarSize="6" Panel1MinSize="15%" Panel2MinSize="50px"> -
+
Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci dapibus ultrices in iaculis.
-
+
Panel 2 - Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam.
diff --git a/BlazorFluentUI/Components/Pages/Layouts/LayoutStack.razor b/BlazorFluentUI/Components/Pages/Layouts/LayoutStack.razor index 6ab89b1..1bf5dfa 100644 --- a/BlazorFluentUI/Components/Pages/Layouts/LayoutStack.razor +++ b/BlazorFluentUI/Components/Pages/Layouts/LayoutStack.razor @@ -48,22 +48,22 @@
Result
- -
Item1
-
Item2
-
-

Item3-1

-

Item3-2

+
Item1
+
Item2
+
+

Item3-1

+

Item3-2

-
Item4
-
Item5
-
-

Item4-1

-

Item4-2

+
Item4
+
Item5
+
+

Item4-1

+

Item4-2

diff --git a/BlazorFluentUI/wwwroot/app-cutom.css b/BlazorFluentUI/wwwroot/app-cutom.css new file mode 100644 index 0000000..9bee22b --- /dev/null +++ b/BlazorFluentUI/wwwroot/app-cutom.css @@ -0,0 +1,23 @@ +.fluent-slider-w300px { + max-width: 300px; + margin-top: 10px +} + +.fluent-border-s1 { + border-style: solid; + border-color: var(--accent-fill-rest); + border-width: 1px +} + +.fluent-border-s1-r10 { + border-radius: 10px; + border-style: solid; + border-color: var(--accent-fill-rest); + border-width: 1px +} + +.fluent-border-d1 { + border-style: dashed; + border-color: var(--accent-fill-rest); + border-width: 1px +} \ No newline at end of file diff --git a/BlazorFluentUI/wwwroot/app.css b/BlazorFluentUI/wwwroot/app.css index 288d428..7d8ea77 100644 --- a/BlazorFluentUI/wwwroot/app.css +++ b/BlazorFluentUI/wwwroot/app.css @@ -2,10 +2,15 @@ body { --body-font: "Segoe UI Variable", "Segoe UI", sans-serif; + margin: 0; + padding: 0; + height: 100vh; font-family: var(--body-font); font-size: var(--type-ramp-base-font-size); line-height: var(--type-ramp-base-line-height); - margin: 0; + font-weight: var(--font-weight); + color: var(--neutral-foreground-rest); + background: var(--neutral-fill-layer-rest); } .navmenu-icon { @@ -188,4 +193,4 @@ code { left: 20px; right: unset; } -} +} \ No newline at end of file diff --git a/BlazorFluentUI/wwwroot/fluentcustom.css b/BlazorFluentUI/wwwroot/fluentcustom.css deleted file mode 100644 index 440bd7a..0000000 --- a/BlazorFluentUI/wwwroot/fluentcustom.css +++ /dev/null @@ -1,15 +0,0 @@ -.fluentslider-300 { - max-width: 300px; - margin-top: 10px -} - -.round-edge { - border-radius: 10px; - border-style: solid; - border-width: 1px -} - -.dashed-edge { - border-style: dashed; - border-width: 1px -} \ No newline at end of file