2.30.6 • Published 2 years ago

@microsoft/fast-components v2.30.6

Weekly downloads
682
License
MIT
Repository
github
Last release
2 years ago

FAST Components

License: MIT npm version

@microsoft/fast-components is a library of Web Components that composes the exports of @microsoft/fast-foundation with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the quick start to get started using the components.

Installation

From NPM

To install the @microsoft/fast-components library, use either npm or yarn as follows:

npm install --save @microsoft/fast-components @microsoft/fast-foundation
yarn add @microsoft/fast-components @microsoft/fast-foundation

Within your JavaScript or TypeScript code, import and register desired components with the DesignSystem:

import { DesignSystem } from "@microsoft/fast-foundation"
import { fastAnchor } from '@microsoft/fast-components';

DesignSystem.getOrCreate().register(
    fastAnchor()
);

Alternatively you can easily register all components:

import { DesignSystem } from "@microsoft/fast-foundation"
import { allComponents } from '@microsoft/fast-components';

DesignSystem.getOrCreate().register(
    Object.values(allComponents).map(definition => definition())
);

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://cdn.jsdelivr.net/npm/@microsoft/fast-components/dist/fast-components.min.js"></script>
    </head>
    <!-- ... -->
</html>

The markup above always references the latest release. 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/@microsoft/fast-components@2.16.0/dist/fast-components.min.js"></script>

:::note 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

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.

@microsoft/fast-colors@microsoft/fast-element@microsoft/fast-foundation@microsoft/fast-web-utilitiestslib
@genesislcap/foundation-layoutpnp-modern-search-core@everything-registry/sub-chunk-602ecc-client-ga4gh-tes-anuragmst-team-cmpmy-fast-comps@elixir-cloud/tesecc-client-ga4gh-tes-jaejae-tes@m4thieulavoie/design-system@wcd/plainjs-kf2c5z9t@uvalib/site-components@zalastax/nolb-_microsaxe-browser-reporter@backlight-dev/wygin.furious-li5sak92@backlight-dev/another-one.furious-kwnnsfs2@backlight-dev/another-one.starter-furious-fork-kt05pkjj@backlight-dev/clementh.worker-admit-4kp25.furious-l76c3o4d@pnp/modern-search-core@microsoft/fast-tooling@microsoft/fast-tooling-react@azure/video-analyzer-widgets@divriots/starter-furiousconway-simulation2@ecos/ecos-design-system@genesislcap/design-system-configurator@genesislcap/documentation-components@genesislcap/foundation-alerts@genesislcap/foundation-auth@genesislcap/foundation-cli@genesislcap/alpha-design-system@genesislcap/foundation-forms@genesislcap/foundation-ui@genesislcap/foundation-utils@genesislcap/foundation-zero@genesislcap/foundation-zero-grid-next@genesislcap/foundation-zero-grid-pro@genesislcap/foundation-progress-overlay@genesislcap/foundation-reporting@genesislcap/foundation-entity-management@genesislcap/foundation-login@genesislcap/foundation-zero-grid-tabulator@genesislcap/grid-next@genesislcap/grid-pro@genesislcap/foundation-settings@genesislcap/web-core@genesislcap/grid-tabulator@genesislcap/pbc-reconciliation-ui@genesislcap/rapid-design-system@genesislcap/rapid-grid-pro@geometryzen/fast-components@iyulab/lit@infinitebrahmanuniverse/nolb-_micros@jupyter-notebook/web-components
2.30.4

2 years ago

2.30.3

2 years ago

2.30.6

2 years ago

2.30.5

2 years ago

2.27.1

2 years ago

2.27.0

2 years ago

2.30.2

2 years ago

2.30.1

2 years ago

2.30.0

2 years ago

2.26.2

2 years ago

2.26.1

2 years ago

2.26.0

2 years ago

2.29.0

2 years ago

2.25.4

2 years ago

2.25.3

2 years ago

2.29.1

2 years ago

2.25.2

2 years ago

2.28.1

2 years ago

2.28.0

2 years ago

2.23.1

2 years ago

2.22.1

2 years ago

2.22.0

2 years ago

2.22.2

2 years ago

2.21.9

2 years ago

2.25.0

2 years ago

2.25.1

2 years ago

2.24.0

2 years ago

2.23.0

2 years ago

2.19.0

2 years ago

2.19.1

2 years ago

2.18.0

2 years ago

2.21.0

2 years ago

2.16.10

2 years ago

2.21.2

2 years ago

2.21.1

2 years ago

2.21.8

2 years ago

2.21.7

2 years ago

2.21.4

2 years ago

2.21.3

2 years ago

2.21.6

2 years ago

2.21.5

2 years ago

2.17.0

2 years ago

2.17.1

2 years ago

2.20.2

2 years ago

2.20.0

2 years ago

2.20.1

2 years ago

2.15.2

3 years ago

2.16.9

2 years ago

2.16.7

2 years ago

2.16.8

2 years ago

2.16.5

2 years ago

2.16.6

2 years ago

2.16.3

3 years ago

2.16.4

2 years ago

2.16.1

3 years ago

2.16.2

3 years ago

2.16.0

3 years ago

2.15.0

3 years ago

2.15.1

3 years ago

2.14.3

3 years ago

2.14.4

3 years ago

2.14.2

3 years ago

2.11.10

3 years ago

2.11.11

3 years ago

2.11.12

3 years ago

2.14.1

3 years ago

2.14.0

3 years ago

2.13.0

3 years ago

2.13.1

3 years ago

2.12.0

3 years ago

2.11.8

3 years ago

2.11.9

3 years ago

2.11.7

3 years ago

2.11.6

3 years ago

2.11.5

3 years ago

2.11.4

3 years ago

2.11.2

3 years ago

2.11.3

3 years ago

2.11.1

3 years ago

2.11.0

3 years ago

2.9.2

3 years ago

2.10.1

3 years ago

2.10.0

3 years ago

2.9.1

3 years ago

2.9.0

3 years ago

2.8.3

3 years ago

2.8.1

3 years ago

2.8.0

3 years ago

2.8.2

3 years ago

2.7.3

3 years ago

2.7.2

3 years ago

2.7.1

3 years ago

2.7.0

3 years ago

2.6.2

3 years ago

2.6.1

3 years ago

2.6.0

3 years ago

2.5.8

3 years ago

2.5.7

3 years ago

2.5.6

3 years ago

2.5.5

3 years ago

2.5.4

3 years ago

2.5.3

3 years ago

2.5.2

3 years ago

2.5.1

3 years ago

2.5.0

3 years ago

2.4.0

3 years ago

2.3.0

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.1.0

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.21.8

3 years ago

1.21.7

3 years ago

1.21.6

3 years ago

1.21.5

3 years ago

1.21.4

3 years ago

1.21.2

3 years ago

1.21.3

3 years ago

1.21.1

3 years ago

1.21.0

3 years ago

1.20.9

3 years ago

1.20.8

3 years ago

1.20.7

3 years ago

1.20.6

3 years ago

1.20.5

3 years ago

1.20.4

3 years ago

1.20.3

3 years ago

1.20.1

3 years ago

1.20.2

3 years ago

1.20.0

3 years ago

1.19.1

3 years ago

1.19.0

3 years ago

1.18.1

3 years ago

1.18.0

3 years ago

1.17.0

3 years ago

1.16.0

3 years ago

1.15.0

3 years ago

1.14.1

3 years ago

1.14.0

3 years ago

1.13.0

3 years ago

1.12.0

4 years ago

1.11.1

4 years ago

1.11.0

4 years ago

1.10.0

4 years ago

1.9.0

4 years ago

1.8.0

4 years ago

1.7.0

4 years ago

1.6.0

4 years ago

1.5.0

4 years ago

1.4.0

4 years ago

1.3.0

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.0

4 years ago

0.10.1

4 years ago

0.10.0

4 years ago

0.9.0

4 years ago

0.8.0

4 years ago