Installation

For getting started a new project use Angular CLI and for an existing one follow the next steps.

Please note that as of version 2.9.0 you have support for Angular 8. If your project uses Angular 7, then use version 2.7.8

Angular CLI

Using with the Angular CLI command will update your Angular project so that it is ready to be used.

ng add @alyle/ui

Manually

Step 1: Install Alyle UI

yarn add @alyle/ui

or

npm install --save @alyle/ui

Step 2: Import Alyle UI in AppModule

Note: the themes must be added in the root module of the application, not in sub modules.

... /** Import animations */ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; /** Import Alyle UI */ import { LyThemeModule, LY_THEME } from '@alyle/ui'; /** Import the component modules */ import { LyButtonModule } from '@alyle/ui/button'; import { LyToolbarModule } from '@alyle/ui/toolbar'; import { LyResizingCroppingImageModule } from '@alyle/ui/resizing-cropping-images'; ... /** Import themes */ import { MinimaLight, MinimaDark } from '@alyle/ui/themes/minima'; @NgModule({ ... imports: [ ... // Animations BrowserAnimationsModule, // Set main theme LyThemeModule.setTheme('minima-light'), // Add components LyButtonModule, LyToolbarModule, LyResizingCroppingImageModule ... ], /** Add themes */ providers: [ { provide: LY_THEME, useClass: MinimaLight, multi: true }, // name: `minima-light` { provide: LY_THEME, useClass: MinimaDark, multi: true } // name: `minima-dark` ] ... }) export class AppModule { }

This library uses Roboto Font & Google's Material Icons, you can add this in src/index.html

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons" rel="stylesheet">

Step 3: Install HammerJs

The ly-carousel and ly-img-cropper components require HammerJs for gestures.

yarn add hammerjs

or

npm install --save hammerjs

Import in src/main.ts

import 'hammerjs';

Step 4: Install Chroma.js

Chroma.js is necessary to create the shadows for the [ly-button], ly-paper, ly-card and others.

yarn add chroma-js

or

npm install --save chroma-js

Step 5: Applies styles to AppComponent

This applies styles using the theme variables to the <body> element.

... import { LyTheme2, ThemeVariables } from '@alyle/ui'; const styles = (theme: ThemeVariables) => ({ '@global': { body: { // Styles for `<body>` element backgroundColor: theme.background.default, color: theme.text.default, fontFamily: theme.typography.fontFamily, margin: 0, direction: theme.direction } } }); @Component({...}) export class AppComponent { readonly classes = this.theme.addStyleSheet(styles); constructor( private theme: LyTheme2 ) { } }

Step 6: Use the components

<button ly-button raised>Hello World</button>

Made withfavoriteby Enlcxx

Currently v2.9.4. Released under the MIT License