From 1ebdde86869c0ceb27619020ff63452c2e1072c2 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 11 Jul 2024 15:27:23 +0200 Subject: [PATCH] [Docs] Better column distribution for homepage (#2360) - Better column distibution for homepage --- README.md | 2 +- examples/Demo/Shared/Pages/Home/Home.razor | 28 +++++++++++++------ .../Demo/Shared/Shared/DemoMainLayout.razor | 2 +- examples/Demo/Shared/wwwroot/css/site.css | 9 ++++-- 4 files changed, 29 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index ddcbd07d33..49bf1cb0ea 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ ## Introduction -The `Microsoft.FluentUI.AspNetCore.Components` package provides a set of [Blazor](https://blazor.net) components which are used to build applications that have a Fluent design (i.e. have the look and feel or modern Microsoft applications). +The `Microsoft.FluentUI.AspNetCore.Components` package provides a set of [Blazor](https://blazor.net) components which are used to build applications that have a Fluent design (i.e. have the look and feel of modern Microsoft applications). Some of the components in the library are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent Design System or make it easier to work with Fluent UI. To get up and running with the library, see the **Getting Started** section below. diff --git a/examples/Demo/Shared/Pages/Home/Home.razor b/examples/Demo/Shared/Pages/Home/Home.razor index 90d3a370e0..3af1cc9914 100644 --- a/examples/Demo/Shared/Pages/Home/Home.razor +++ b/examples/Demo/Shared/Pages/Home/Home.razor @@ -6,7 +6,7 @@ - +

Welcome!

The Fluent UI Blazor library provides a robust and extensive set of Blazor components. Some of those @@ -25,7 +25,7 @@

- +

This is the demo and documentation site for version @_version of the library. This version supports .NET 8 only


@@ -40,8 +40,20 @@ If you are already up-and-running and upgrading from an earlier version of the library, please go to the What's new page for information on additions, fixes and (breaking) changes.

+

Components & render modes

+

+ As described in the Blazor documentation: +

+
+ By default, components use Static Server-side rendering (SSR). The component renders to the response stream and there is no interactivity. +
+

+ A component inherits its render mode from its parent. So unless a render mode is specified on the app, page or component level, every + component (including ours) is statically rendered on the server and will not be interactive. For the + Fluent UI Blazor library this means most components will display correctly but will not offer complete, if any, functionality. +

- +

Getting Started

By far rhe easiest way to get started is by using our templates. Setting them up is quick and easy. See the templates page @@ -60,7 +72,7 @@

- +

Scripts

As mentioned, we wrap the Fluent UI Web Components for some of our compnents. The needed script is included in the library and will @@ -86,7 +98,7 @@

- +

Using the Fluent UI Blazor components

With the package installed, you can begin using the Fluent UI Blazor components in the same way as any other Blazor component. Just be sure to add the following using statement to your views:

@@using Microsoft.FluentUI.AspNetCore.Components @@ -114,7 +126,7 @@ - +

Configuring the Design System

The Fluent UI Blazor components are built on FAST's Adaptive UI technology, which enables design customization and personalization, while @@ -127,7 +139,7 @@ - +

Support

The Microsoft Fluent UI Blazor library is an open-source project. The source code (including this demo site) is hosted in the fluentui-blazor @@ -141,7 +153,7 @@

- +

Joining the Community

Looking to get answers to questions or engage with us in real-time? diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor b/examples/Demo/Shared/Shared/DemoMainLayout.razor index fa8da51d8f..20c7a3520e 100644 --- a/examples/Demo/Shared/Shared/DemoMainLayout.razor +++ b/examples/Demo/Shared/Shared/DemoMainLayout.razor @@ -36,7 +36,7 @@

+ title="Fluent UI Blazor library source on GitHub" aria-label="Fluent UI Blazor library source on GitHub">
diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css index 54e62183b6..633043e1f3 100644 --- a/examples/Demo/Shared/wwwroot/css/site.css +++ b/examples/Demo/Shared/wwwroot/css/site.css @@ -399,14 +399,19 @@ kbd { } } -@media (min-width: 768px) and (max-width: 1024px) { +@media (min-width: 768px) and (max-width: 1279px) { fluent-select::part(control) { width: 150px; } + .content { + flex-direction: column; + } aside { padding: 1.5em 0.75em 1em 0.75em; - width: 12rem; + width: 100%; + height: 100%!important; + max-height: 100% !important; } article {