@flywheel-io/vision
v1.11.0
Published
Flywheel UI elements provided as Angular components and native web components
Downloads
383
Keywords
Readme
Vision Component Library
Vision is Flywheel's Design System with the goal of unifying the look and feel of all applications throughout Flywheel. This is a collection of scss styles and angular components for aiding and simplifying frontend work.
Installation
To use vision first install it from npm
$ npm install --save @flywheel-io/vision
Then you need to do some scss setup, in your global scss stylesheet add:
@use '@flywheel-io/vision' as vision;
@include vision.icons; // adds the icon font face and glyph classes
@include vision.colors; // defines the colors vision relies on
// optional inclusions
@include vision.mat-theme; // uses the vision angular material theme
@include vision.global-typography; // adds global styles for text elements
For more info on colors and theming check out the colors docs
And just like that, you're ready to use vision! 🥳
Using Components
To use the components, you just need to import their module into the module you're working in
import { FwAlertModule } from '@flywheel-io/vision';
@NgModule({
imports: [
FwAlertModule,
...anyOtherFwModulesYouMightNeed,
...
Then add it to your html
<fw-alert description="Look I'm an alert"></fw-alert>
For more details on using specific components, including their module name and selector, you can check out its docs page in the storybook