Angular2-Bulma

Angular2-Bulma is providing Bulma CSS Framework components to Angular developers for fast and easy development.

Content

- Installation and setup
- Install
- Import Bulma CSS
- Add Font Awesome Icons
- Import Angular2BulmaModule

- Components
- bu-columns : Columns
- bu-section : Section
- bu-hero : Hero
- bu-container : Container
- bu-conent : Content
- bu-footer : Footer
- bu-box : Box
- bu-button : Button
- bu-delete : Delete
- bu-icon : Icon
- bu-image : Image
- bu-notification : Notification
- bu-progress : Progress
- bu-tag : Tag
- bu-breadcrumb : Breadcrumb
- bu-card : Card
- bu-dropdown : Dropdown
- bu-menu : Menu
- bu-message : Message
- bu-navbar : Navbar
- bu-tabs : Tabs

Installation and setup

``bash
npm install bulma angular2-bulma --save
`

Import Bulma CSS

In your main style.css file import Bulma CSS styles:

`css
@import '~bulma';
`

If you want to change values for some of bulma css variables define them before @import.

`css
$menu-item-color: #3573D6;
$menu-item-radius: 7px;

@import '~bulma';
`

Font Awesome Icons


If you want to use icons add into your index.html file.
`html


`

Import Angular2BulmaModule

Import Angular2BulmaModule in your app.module.ts file and add it into imports array.

`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Angular2BulmaModule } from 'angular2-bulma';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Angular2BulmaModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
``
This will import all of the Angular2-Bulma component modules. But you can also import any of the individual component modules. Maybe you need only Tabs for your application so you can import only BuTabsModule without any other.