Skip to content

Files

Latest commit

author
Fluent UI Build
Jun 10, 2021
3a08bca · Jun 10, 2021

History

History
This branch is 2 commits ahead of, 7928 commits behind microsoft/fluentui:master.

web-components

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Jan 15, 2021
Feb 2, 2021
Mar 31, 2021
Jun 10, 2021
Jul 30, 2020
Feb 2, 2021
Jul 30, 2020
Jul 30, 2020
Jun 10, 2021
Jun 8, 2021
Aug 28, 2020
Jul 30, 2020
Jul 30, 2020
Jun 8, 2021
Aug 6, 2020
Jul 30, 2020
Jul 30, 2020

Fluent UI Web Components

License: MIT npm version

@fluentui/web-components is a library of Web Components that composes @microsoft/fast-foundation and supports Microsoft's Fluent design language.

Installation

From NPM

To install the web-components library, use either npm or yarn as follows:

npm install --save @fluentui/web-components
yarn add @fluentui/web-components

Within your JavaScript or TypeScript code, you can then import library APIs like this:

import { FluentAnchor } from '@fluentui/web-components';

Looking for a setup that integrates with a particular front-end framework or bundler? Check out our integration docs.

From CDN

A pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding type="module" to the script element and then importing from the CDN.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
  </head>
  <!-- ... -->
</html>

The above CDN location points to the latest release of @fluentui/web-components. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.

For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.

Development

To start the component development environment, run yarn start.

Known issue with Storybook site hot-reloading during development

Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the CustomElementsRegistry once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message: Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry

This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.