Fuel-ui NPM | npm.io

#Fuel-UI

A set of UI components for use with Angular 2 and Bootstrap 4.

See Fuel-UI homepage for live demo and documentation.

##Dependencies

Node
Gulp

##Build Execute the following commands to run the demo in your local environment. A browser window pops up with the demo running at http://localhost:3000

npm install
npm run sass
npm run build
npm run server

##Installation

####Fork our Quickstart! https://github.com/coryshaw1/ng2-play/ ####Fork our angular-cli Quickstart! https://github.com/FuelInteractive/fuel-ui-cli-quickstart/

###Manually with Webpack

If you would like to add Fuel-UI to your Angular2 project through npm manually, do the following:

npm install fuel-ui --save

Then simply add the proper module(s) to your base component

import { FuelUiModule } from 'fuel-ui';

@NgModule({
  bootstrap: [ YourBaseComponent ],
  declarations: [ YourBaseComponent, ... ],
  imports: [ FuelUiModule, ... ],
  providers: [ ... ]
})

You then need to make sure you add references to the following:

Bootstrap 4
Font Awesome
Fuel-UI CSS Bundle (for Tooltips and CodeHighlighter, will be in node_modules/fuel-ui/bundles/fuel-ui.css)

There are different ways of doing adding these. In our Github project, we use Webpack loaders to achieve this where we can (see bootstrap-loader and font-awesome-webpack). You may also just simply add the vendor CSS files to the head. You do not need the javascript for these

###Manually with angular-cli

ng new example-project
cd example-project
npm install fuel-ui font-awesome bootstrap@^4.0.0-alpha.5 --save

Go to your angular-cli.json file, and add the following to your styles array:

"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/fuel-ui/bundles/fuel-ui.css"

Next, still within your angular-cli.json file, add the following to your addons array:

"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"

Now build the project to copy over the necessary files

ng build

Then simply add the proper module(s) to your base component

import { FuelUiModule } from 'fuel-ui';

@NgModule({
  bootstrap: [ YourBaseComponent ],
  declarations: [ YourBaseComponent, ... ],
  imports: [ FuelUiModule, ... ],
  providers: [ ... ]
})

###Manually with SystemJs

npm install fuel-ui --save

Go to your SystemJs config file, and add the following to your map array:

"moment": "node_modules/moment/moment.js",
"fuel-ui": "node_modules/fuel-ui/bundles/fuel-ui.umd.js",

Then the proper link tags to your index.html's <head>

<head>
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="node_modules/fuel-ui/bundles/fuel-ui.css" />
</head>

Then simply add the proper module(s) to your base component

import { FuelUiModule } from 'fuel-ui';

@NgModule({
  bootstrap: [ YourBaseComponent ],
  declarations: [ YourBaseComponent, ... ],
  imports: [ FuelUiModule, ... ],
  providers: [ ... ]
})

##Animations