次の方法で共有

Tutorial: Install the Fluent UI Web Component packages

  • [アーティクル]

In this tutorial, you learn how to:

  • Install the packages with NPM or Yarn
  • Register & use individual web components
  • Register and use all the components

Prerequisites

Running locally on your machine, you should have:

  • Node.js
  • Node Package Manager (NPM) and/or Yarn
  • A Typescript pre-processor - not strictly necessary but most of our examples are in TypeScript. Recommended

Install the Fluent UI Web Component packages with NPM or Yarn

To install the component packages using NPM:

npm install --save @fluentui/web-components

Or with yarn:

yarn add @fluentui/web-components

Register & use the web components

To use a Fluent UI Web Component as a custom element in HTML, the custom element must be registered for the browser to recognize it. The two steps to registering the custom component are Importing the component definition into your JavaScript bundle, and registering it with a DesignSystem.

Here is a fluent Button getting imported and registered:

import { fluentButton, provideFluentDesignSystem } from '@fluentui/web-components';

provideFluentDesignSystem().register(fluentButton());

Register & use all web components

As a shortcut, if you wish to easily register all available components, rather than registering each one separately, you can use the following pattern with either design system:

import { allComponents, provideFluentDesignSystem } from '@fluentui/web-components';

provideFluentDesignSystem().register(allComponents);

Note

When working with a tree-shaking bundler like Webpack or [Rollup])(https://rollupjs.org/guide/en/), you will want to import and register the individual components, as in the first example above. This will ensure that any unused components are tree-shaken out of your builds.

Looking to integrate with a front-end framework or bundler? Check out the integration docs.

Next steps

Learn how to customize the look of the components

Style your components