la-ngx-library - Sample component library of one awesome development team

Status

• click on a label to see issues

| Label | Description | |-------|-------------| | not-started | Work on issue/component is not yet started | | in-progress | Work in progress | | pull-request-pending | Pull request has been created and is waiting for peer review | | finished | Work on issue is finished, but may not yet be included into library release | | deployed | Component is now a part of the library release, and can be used by other users | | in-use | Component is being used in the Web frontend at least on one screen |

Demo

View all the directives in action at https://LIFEAI.github.io/la-ngx-library

How To Videos

• la-ngx-library Overview
  • Library overview
  • Wiki
  • Git Issues
  • components as modules
  • src, tmp, dist, demo folders
  • gulpfile.js - example
  • angular.json - example
  • How to work with Zeplin, SCSS module for Zeplin, colors, icons
• la-ngx-library live coding icons release
  • Live coding on icon component
  • working with SVG icons, optimizing, making SVG sprites, fixing SVG icons
  • How to make new library release, demo, docs, npmjs

Dependencies

• Angular (requires Angular 2 or higher, tested with 2.0.0)

Installation

Install above dependencies via npm.

Now install @lifeai/la-ngx-library via:

npm install --save @lifeai/la-ngx-library

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for la-ngx-library:

map: {
  'la-ngx-library': 'node_modules/@lifeai/la-ngx-library/bundles/la-ngx-library.umd.js',
}

Once installed you need to import the main module:

import { LaButtonModule } from '@lifeai/la-ngx-library';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice LaButtonModule .forRoot()):

import { LaButtonModule } from '@lifeai/la-ngx-library';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [LaButtonModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import LaButtonModule :

import { LaButtonModule } from '@lifeai/la-ngx-library';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [LaButtonModule, ...], 
})
export class OtherModule {
}

Add Support for Icons

• update your angular.json to ship library icons during build

"assets": [
  ...,
  {
    "glob": "**/*",
    "input": "./node_modules/@lifeai/la-ngx-library/assets/",
    "output": "./assets/"
  },
  {
    "glob": "**/*",
    "input": "./node_modules/@lifeai/la-ngx-library/sprites/",
    "output": "./assets/"
  }
],
"styles": [
  ...,
  "node_modules/@lifeai/la-ngx-library/style/colors.scss",
  ...,
  "src/styles.scss"
],

Usage

Button

<la-button [kind]="'primary'" [isDisabled]="true" [isHover]="true" [isWide]="true">Button</la-button>

Empty State

 <la-empty [name]="'messages'">
          <la-text [kind]="'title-2'">No Items found</la-text>
          <la-text [kind]="'title-2'">Create new message to start filling up space</la-text>
 </la-empty>

License

Copyright (c) 2019 LifeAI