angular2-bootstrap-components v0.1.0

angular2-bootstrap-components

This project is a collection of bootstrap components (bcomponents) as angular 2 components. Instead of having to write nested markup for a bootstrap heading, you would use <heading-bcomponent [title]="'My awesome heading'"></heading-bcomponent>. One major drawback to this approach is that it does not handle nested components. For example, you can not use a heading bcomponent within the body of your panel bcomponent body text. You can, however, provide the raw HTML for a heading within the panel body.

You can visit the angular2-bootstrap-components-demo project for a complete usage example.

Installation and Usage

npm

To install with npm run the following command:
npm i angular2-bootstrap-components

For SystemJS add this to your systemjs.config.js file:

var map = {
    // Your other libraries here
    'bcomponents':                'node_modules/angular2-bootstrap-components'
};
var packages = {
    // Your other libraries here
    'bcomponents':                { main: 'bcomponents.js', defaultExtension: 'js' }
};
var config = {
    map: map,
    packages: packages,
    defaultJSExtensions: true
};
System.config(config);

Usage

To import a component simply import the one of the classes listed below like this:

import {ButtonBComponent} from 'bcomponents`;  
import {LinkBComponent} from 'bcomponents`;  

BComponents

The components in this project are called bcomponents and all tags are suffixed with -bcomponent.

DisplayType

Many components accept an input type of type DisplayType. DisplayType can be any of the following values, but note that some components do not use default or primary and will instead default to success: default, primary, success, info, warning, danger.

DisplaySize

Many components accept an input size of type DisplaySize. Display size can be any of the following values: sm, lg.

Alert

Class: AlertBComponent
Selector: alert-bcomponent
Inputs:

text: string
dismissible: boolean = false
hidden: boolean = false
type: DisplayType = success

Badge

Class: BadgeBComponent
Selector: badge-bcomponent
Inputs:

value: number = 0

Api:

setValue: (value: number) => void
increment: (by: number = 1) => void
decrement: (by: number = 1) => void

Breadcrumb

Class: BreadcrumbBComponent
Selector: breadcrumb-bcomponent
BreadcrumbItem:

link: string
text: string
constructor(link: string, text: string)

Inputs:

items: BreadcrumbItem[]
active: string

Button

Class: ButtonBComponent
Selector: button-bcomponent
Inputs:

text: string
type: DisplayType
click: () => void

Dropdown

Class: ButtonBComponent
Selector: dropdown-bcomponent
DropdownType:

type DropdownType = "separator" | "header" | "default"

DropdownItem:

type: DropdownType
text: string
link: string

Inputs:

items: DropdownItem[]
title: string

Heading

Class: HeadingBComponent
Selector: heading-bcomponent
Inputs:

title: string
subtitle: string
size: number = 1

Input Group

Class: InputGroupBComponent
Selector: input-group-bcomponent
Inputs:

placeholder: string
model: string
size: DisplaySize
frontText: string
backText: string
frontClick: () => void
backClick: () => void
frontType: DisplayType = "default"
backType: DisplayType = "default"

Jumbotron

Class: JumbotronBComponent
Selector: Jumbotron-bcomponent
Inputs:

title: string
subtitle: string
body: string
size: number

Label

Class: LabelBComponent
Selector: label-bcomponent
Inputs:

text: string
type: DisplayType

Link

Class: LinkBComponent
Selector: link-bcomponent
Inputs:

text: string
link: string

Panel

Class: PanelBComponent
Selector: panel-bcomponent
Inputs:

header: string
body: string
footer: string
type: DisplayType = "default"

Progressbar

Class: ProgressbarBComponent
Selector: progressbar-bcomponent
Inputs:

value: number = 0
type: DisplayType = "success"
display: string = "%"
displayPercent: boolean = true
striped: boolean = false
animated: boolean = false
minValue: number = 0
maxValue: number = 100

Table

Class: TableBComponent
Selector: table-bcomponent
Inputs:

items: any[]
headers: any[]
striped: boolean

Thumbnail

Class: ThumbnailBComponent
Selector: thumbnail-bcomponent
Inputs:

link: string
header: string
body: string
footer: string
src: string
alt: string
size: number = 3

Well

Class: WellBComponent
Selector: well-bcomponent
Inputs:

text: string
size: DisplaySize