All Projects → microsoft → fast-blazor

microsoft / fast-blazor

Licence: MIT license
Blazor component library for FluentUI. Microsoft's official lightweight wrapper around the FluentUI Web Components for use with .NET 6.0 Blazor applications

Programming Languages

C#
18002 projects
HTML
75241 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to fast-blazor

Fast
The adaptive interface system for modern web experiences.
Stars: ✭ 6,532 (+603.88%)
Mutual labels:  components, design-systems, web-components, web-standards, component-library, front-end-framework, component-architecture, development-tools, adaptive-ui
Storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Stars: ✭ 67,445 (+7167.78%)
Mutual labels:  components, design-systems, web-components
Components
Example Components (Built with Tonic)
Stars: ✭ 42 (-95.47%)
Mutual labels:  components, web-components, component-library
Neumorphic Ui
📚 A library of components based on the concept of neumorphism
Stars: ✭ 82 (-91.16%)
Mutual labels:  components, design-systems, component-library
Clarity
Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
Stars: ✭ 6,398 (+589.44%)
Mutual labels:  components, web-components, component-library
Vue Design System
An open source tool for building UI Design Systems with Vue.js
Stars: ✭ 2,077 (+123.81%)
Mutual labels:  components, design-systems, component-library
design-systems
A list of famous design systems, design languages and guidelines
Stars: ✭ 403 (-56.57%)
Mutual labels:  design-systems, component-library
website
Fully responsive website built with NextJS, React and Fluent UI, with the aim of providing services and access to all groups of didactic courses and general purposes to students of the University of Milan.
Stars: ✭ 29 (-96.87%)
Mutual labels:  fluent, fluentui
esl
Lightweight and flexible UI component library based on web components technology for creating basic UX modules
Stars: ✭ 53 (-94.29%)
Mutual labels:  web-components, component-library
components
Example Components (Built with Tonic)
Stars: ✭ 62 (-93.32%)
Mutual labels:  web-components, component-library
Viewui
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 2,487 (+168%)
Mutual labels:  components, design-systems
toast ui.blazor calendar
Toast UI Calendar Wrapper For Blazor
Stars: ✭ 42 (-95.47%)
Mutual labels:  component-library, blazor
blockml-component
A component-based virtual DOM system (similar to React) for blockml.
Stars: ✭ 23 (-97.52%)
Mutual labels:  components, web-components
web-components
A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
Stars: ✭ 322 (-65.3%)
Mutual labels:  design-systems, web-components
MudBlazor
Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
Stars: ✭ 4,539 (+389.12%)
Mutual labels:  component-library, blazor
Panel
Web Components + Virtual DOM: web standards for powerful UIs
Stars: ✭ 206 (-77.8%)
Mutual labels:  components, web-components
RazorComponents.Markdown
Razor component for Markdown rendering.
Stars: ✭ 30 (-96.77%)
Mutual labels:  component-library, blazor
fyndiq-ui
Library of reusable web frontend components for Fyndiq
Stars: ✭ 39 (-95.8%)
Mutual labels:  design-systems, component-library
blazor.jwttest
Quick test using JWT authentication for a blazor hosted (Client/Serverside) app with API and Authentication.
Stars: ✭ 30 (-96.77%)
Mutual labels:  front-end-framework, blazor
nativeweb
🤳 Tiny library for simple web components. [1kB]
Stars: ✭ 93 (-89.98%)
Mutual labels:  components, web-components

Microsoft.Fast

License: MIT .NET C# Nuget Nuget

Validate PRs Validate Security

Discord Twitter

We appreciate your star, it helps!

Introduction

The Microsoft.Fast.Components.FluentUI package provides a lightweight set of Blazor component wrappers around Microsoft's official FluentUI Web Components. The FluentUI Web Components are built on FAST and work in every major browser. To get up and running with Microsoft.Fast.Components.FluentUI see the Getting Started section below.

The source for @fluentui/web-components is hosted in the Fluent UI mono-repository. Documentation on the components is available on docs.microsoft.com.

Getting Started

To get started using the Fluent UI Web Components for Blazor, you will first need to install the official Nuget package for Fluent UI. You can use the following command:

dotnet add package Microsoft.Fast.Components.FluentUI

Next, you need to add the web components script. You can either add the script from CDN directly, or you can install it with NPM, whichever you prefer.

To add the script from CDN use the following markup:

<script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"></script>

The markup above always references the latest release of the components. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:

<script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/[email protected]/dist/web-components.min.js"></script>

The best place to put the script tag is typically in your index.html (_Layout.cshtml for blazor server project) file in the script section at the bottom of the <body>.

If you wish to leverage NPM instead, run the following command:

npm install --save @fluentui/web-components

You can locate the single file script build in the following location:

node_modules/@fluentui/web-components/dist/web-components.min.js

Copy this to your wwwroot/script folder and reference it with a script tag as described above.

📓 Note

If you are setting up Fluent UI Web Components on a Blazor Server project, you will need to escape the @ character by repeating it in the source link. For more information check out the Razor Pages syntax documentation.

In your Program.cs file you need to add the following:

builder.Services.AddFluentUIComponents();

if you are using Blazor Server, you need to make sure the HttpClient service is added:

builder.Services.AddHttpClient();

Using the FluentUI Web Components

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

@using Microsoft.Fast.Components.FluentUI

Here's a small example of a FluentCard with a FluentButton that uses the Fluent "Accent" appearance:

@using Microsoft.Fast.Components.FluentUI

<FluentCard>
  <h2>Hello World!</h2>
  <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>

💡 Tip

You can add @using Microsoft.Fast.Components.FluentUI to the namespace collection in _Imports.razor, so that you can avoid repeating it in every single razor page.

Configuring the Design System

The Fluent UI Web Components are built on FAST's Adaptive UI technology, which enables design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various "Design Tokens". As of version 1.4 you can use all of the (160) individual Design Tokens, both from code as in a declarative way in your .razor pages. See https://docs.microsoft.com/en-us/fluent-ui/web-components/design-system/design-tokens for more information on how Design Tokens work

Option 1: Using Design Tokens from C# code

Given the following .razor page fragment:

<FluentButton @ref="ref1" Appearance="Appearance.Filled">A button</FluentButton>
<FluentButton @ref="ref2" Appearance="Appearance.Filled">Another button</FluentButton>
<FluentButton @ref="ref3" Appearance="Appearance.Filled">And one more</FluentButton>
<FluentButton @ref="ref4" Appearance="Appearance.Filled" @onclick=OnClick>Last button</FluentButton>

You can use Design Tokens to manipulate the styles from C# code as follows:

[Inject]
private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!;

[Inject]
private AccentBaseColor AccentBaseColor { get; set; } = default!;

[Inject]
private BodyFont BodyFont { get; set; } = default!;

[Inject]
private StrokeWidth StrokeWidth { get; set; } = default!;

[Inject]
private ControlCornerRadius ControlCornerRadius { get; set; } = default!;

private FluentButton? ref1;
private FluentButton? ref2;
private FluentButton? ref3;
private FluentButton? ref4;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (firstRender)
	{
		//Set to dark mode
		await BaseLayerLuminance.SetValueFor(ref1!.Element, (float)0.15);

		//Set to Excel color
		await AccentBaseColor.SetValueFor(ref2!.Element, "#185ABD".ToSwatch());

		//Set the font
		await BodyFont.SetValueFor(ref3!.Element, "Comic Sans MS");

		//Set 'border' width for ref4
		await StrokeWidth.SetValueFor(ref4!.Element, 7);
		//And change conrner radius as well
		await ControlCornerRadius.SetValueFor(ref4!.Element, 15);

		StateHasChanged();
	}

}

public async Task OnClick()
{
	//Remove the wide border
	await StrokeWidth.DeleteValueFor(ref4!.Element);
}

As can be seen in the code above (with the ref4.Element), it is posible to apply multiple tokens to the same component.

For Design Tokens that work with a color value, you must call the ToSwatch() extension method on a string value or use one of the Swatch constructors. This makes sure the color is using a format that Design Tokens can handle. A Swatch has a lot of commonality with the System.Drawing.Color struct. Instead of the values of the components being between 0 and 255, in a Swatch they are expressed as a value between 0 and 1.

📓 Note

The Design Tokens are manipulated through JavaScript interop working with an ElementReference. There is no JavaScript element until after the component is rendered. This means you can only work with the Design Tokens from code after the component has been rendered in OnAfterRenderAsync and not in any earlier lifecycle methods.

Option 2: Using Design Tokens as components

The Design Tokens can also be used as components in a .razor page directely. It looks like this:

<BaseLayerLuminance Value="(float?)0.15">
	<FluentCard BackReference="@context">
		<div class="contents">
			Dark
			<FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
			<FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
			<FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
			<FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
		</div>
	</FluentCard>
</BaseLayerLuminance>

To make this work, a link needs to be created between the Design Token component and its child components. This is done with the BackReference="@context" construct.

📓 Note

Only one Design Token component at a time can be used this way. If you need to set more tokens, use the code approach as described in Option 1 above.

Option 3: Using the <FluentDesignSystemProvider>

The third way to customize the design in Blazor is to wrap the entire block you want to manipulate in a <FluentDesignSystemProvider>. This special element has a number of properties you can set to configure a subset of the tokens. Not all tokens are available/supported and we recommend this to only be used as a fall-back mechanism. The preferred mehod of working with the desgn tokens is to manipulate them from code as described in option 1.

Here's an example of changing the "accent base color" and switching the system into dark mode (in the file app.razor):

<FluentDesignSystemProvider AccentBaseColor="#464EB8" BaseLayerLuminance="0">
	<Router AppAssembly="@typeof(App).Assembly">
		<Found Context="routeData">
			<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
		</Found>
		<NotFound>
			<PageTitle>Not found</PageTitle>
			<LayoutView Layout="@typeof(MainLayout)">
				<p role="alert">Sorry, there's nothing at this address.</p>
			</LayoutView>
		</NotFound>
	</Router>
</FluentDesignSystemProvider>

📓 Note

FluentDesignSystemProvider token attributes can be changed on-the-fly like any other Blazor component attribute.

Colors for integration with specific Microsoft products

If you are attempting to configure the components for integration into a specific Microsoft product, the following table provides AccentBaseColor values you can use:

Product AccentBaseColor
Office #D83B01
Word #185ABD
Excel #107C41
PowerPoint #C43E1C
Teams #6264A7
OneNote #7719AA
SharePoint #03787C
Stream #BC1948

For a list of all available token attributes, see here. More examples for other components can be found in the examples folder of this repository.

Web components / Blazor components mapping, implementation status and remarks

Web component Blazor component Status Remarks
<fluent-accordion> <FluentAccordion> ✔️ -
<fluent-accordion-item> <FluentAccordionItem> ✔️ -
<fluent-anchor> <FluentAnchor> ✔️ -
<fluent-anchored-region> <FluentAnchoredRegion> ✔️ -
<fluent-badge> <FluentBadge> ✔️ -
<fluent-breadcrumb> <FluentBreadcrumb> ✔️ -
<fluent-breadcrumb-item> <FluentBreadcrumbItem> ✔️ -
<fluent-button> <FluentButton> ✔️ -
<fluent-card> <FluentCard> ✔️ -
<fluent-checkbox> <FluentCheckbox> ✔️ -
<fluent-combobox> <FluentCombobox> ✔️ -
<fluent-data-grid> <FluentDataGrid> ✔️ -
<fluent-data-grid-cell> <FluentDataGridCell> ✔️ -
<fluent-data-grid-row> <FluentDataGridRow> ✔️ -
<fluent-design-system-provider> <FluentDesignSystemProvider> ✔️ -
<fluent-dialog> <FluentDialog> ✔️ -
<fluent-divider> <FluentDivider> ✔️ -
<fluent-flipper> <FluentFlipper> ✔️ -
<fluent-horizontal-scroll> <FluentHorizontalScroll> ✔️ -
No web component <FluentIcon> ✔️ -
<fluent-listbox> <FluentListbox> ✔️ -
<fluent-menu> <FluentMenu> ✔️ -
<fluent-menu-item> <FluentMenuItem> ✔️ -
<fluent-number-field> <FluentNumberField> ✔️ -
<fluent-option> <FluentOption> ✔️ -
<fluent-progress> <FluentProgress> ✔️ -
<fluent-progress-ring> <FluentProgressRing> ✔️ -
<fluent-radio> <FluentRadio> ✔️ -
<fluent-radio-group> <FluentRadioGroup> ✔️ -
<fluent-select> <FluentSelect> ✔️ -
<fluent-skeleton> <FluentSkeleton> ✔️ -
<fluent-slider> <FluentSlider> ✔️ -
<fluent-slider-label> <FluentSliderLabel> ✔️ -
<fluent-switch> <FluentSwitch> ✔️ -
<fluent-tabs> <FluentTabs> ✔️ -
<fluent-tab> <FluentTab> ✔️ -
<fluent-tab-panel> <FluentTabPanel> ✔️ -
<fluent-text-area> <FluentTextArea> ✔️ -
<fluent-text-field> <FluentTextField> ✔️ -
<fluent-toolbar> <FluentToolbar> ✔️ -
<fluent-tooltip> <FluentTooltip> ✔️ -
<fluent-tree-view> <FluentTreeView> ✔️ -
<fluent-tree-item> <FluentTreeItem> ✔️ -

Joining the Community

Looking to get answers to questions or engage with us in realtime? Our community is most active on Discord. Submit requests and issues on GitHub, or join us by contributing on some good first issues via GitHub.

If you don't find a component you're looking for, it's best to create the issue in our FAST repo here and limit issues on this repo to bugs in the Blazor component wrappers or Blazor-specific features.

We look forward to building an amazing open source community with you!

Contact

  • Join the community and chat with us in real-time on Discord.
  • Submit requests and issues on GitHub.
  • Contribute by helping out on some of our recommended first issues on GitHub.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].