A set of UI components for use with Angular 2 and Bootstrap 4.
See Fuel-UI homepage for live demo and documentation.
Execute the following commands to run the demo in your local environment. A browser window pops up with the demo running at http://localhost:8001
npm install
gulp
If you would like to add Fuel-UI to your Angular2 project through npm manually, do the following:
npm install fuel-ui font-awesome bootstrap@^4.0.0-alpha.2 --save
Then simply add the proper script tags to your index.html
<head>
<link rel="stylesheet" href="https://github.com/FuelInteractive/fuel-ui/blob/master/node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://github.com/FuelInteractive/fuel-ui/blob/master/node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://github.com/FuelInteractive/fuel-ui/blob/master/node_modules/fuel-ui/bundles/fuel-ui.min.css" />
</head>
...
<!-- All your SystemJS, Angular2, Rx, etc. scripts first! -->
<script src="https://github.com/FuelInteractive/fuel-ui/raw/master/node_modules/fuel-ui/bundles/fuel-ui.min.js"></script>
ng new example-project
cd example-project
npm install fuel-ui font-awesome bootstrap@^4.0.0-alpha.2 --save
Go to your angular-cli-build.js
file, and add the following to your vendorNpmFiles
array:
'bootstrap/**/bootstrap.min.css',
'font-awesome/**/font-awesome.min.css',
'font-awesome/fonts/*',
'fuel-ui/bundles/*'
Now build the project to copy over the necessary files to your vendor directory
ng build
Then simply add the proper script tags to your index.html
<head>
<link rel="stylesheet" href="https://github.com/FuelInteractive/fuel-ui/blob/master/vendor/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://github.com/FuelInteractive/fuel-ui/blob/master/vendor/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://github.com/FuelInteractive/fuel-ui/blob/master/vendor/fuel-ui/bundles/fuel-ui.min.css" />
</head>
...
<!-- All your SystemJS, Angular2, Rx, zone, etc. scripts first! -->
<script src="https://github.com/FuelInteractive/fuel-ui/raw/master/vendor/fuel-ui/bundles/fuel-ui.min.js"></script>