Fluid Angular
Fluid Angular components for Angular v14 framework.
Documentation
Angular storybook documentation
Installation
To consume Fluid Design System with Angular, the best way is via npm
(or yarn
if you prefer).
npm install @engie-group/fluid-design-system-angular@rc
Fonts and icons
The Fluid Design System uses the Lato font as global font family, read more about the typography bias on the dedicated section.
ENGIE has selected the Google material font as default icons pack, read more on the icons documentation.
If you don’t already import Lato and Google material icons font, you can do so by:
- Including these fonts into the main CSS file
src/style.scss
(orcss
,less
, etc… according to your project configurations).
/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap');
- Including these fonts to your base
index.html
file
<link href="https://fonts.googleapis.com/css family=Material+Icons|Lato:300,400,700,900&display=swap" rel="stylesheet"/>
Stylesheets
In order to add stylesheets of the library in your project you have to include them in your angular.json
file (which is at angular’s root directory).
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss",
"node_modules/@engie-group/fluid-design-tokens/lib/css/tokens.css",
// Only if you want to use engie icons
"node_modules/@engie-group/fluid-design-system/lib/components/icon/fluid.css"
],
JSON imports
In Fluid angular lib some types are generated using tokens, to get to these tokens we import a json file tokens.json
provided by @engie-group/fluid-design-tokens
. Since we rely on these import you’ll need add json imports support in your tsconfig
file.
You’ll need to add the following in your tsconfig.json
file:
"resolveJsonModule": true
in the compilerOptions
section.
"compilerOptions": {
"resolveJsonModule": true
},
Usage
In the angular module where you need to use a fluid component (usually in src/app.module.ts
), you’ll need to import FluidModule
import {FluidModule} from '@engie-group/fluid-design-system-angular/lib';
@NgModule({
declarations: [
],
imports: [
FluidModule
],
exports: [
],
providers: [
]
})
export class ModuleName {
}
Troubleshooting
If you have any issues while getting set up with Fluid Design System, please create an issue or a request on our library git repository. No newline at end of file