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

npm install bulma angular2-bulma --save

Import Bulma CSS

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

@import '~bulma';

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

$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.

<!-- Add fontawesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

Import Angular2BulmaModule

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

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.