This package has been deprecated

Author message:

WARNING: Package renamed to ng-bcomponents

angular2-bootstrap-components

0.1.0 • Public • Published

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:

textstring
dismissibleboolean = false
hiddenboolean = false
typeDisplayType = success

Badge

Class: BadgeBComponent
Selector: badge-bcomponent
Inputs:

valuenumber = 0

Api:

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

Breadcrumb

Class: BreadcrumbBComponent
Selector: breadcrumb-bcomponent
BreadcrumbItem:

linkstring
textstring
constructor(linkstring, textstring)

Inputs:

itemsBreadcrumbItem[]
activestring

Button

Class: ButtonBComponent
Selector: button-bcomponent
Inputs:

textstring
typeDisplayType
click: () => void

Dropdown

Class: ButtonBComponent
Selector: dropdown-bcomponent
DropdownType:

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

DropdownItem:

typeDropdownType
textstring
linkstring

Inputs:

itemsDropdownItem[]
titlestring

Heading

Class: HeadingBComponent
Selector: heading-bcomponent
Inputs:

titlestring
subtitlestring
sizenumber = 1

Input Group

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

placeholderstring
modelstring
sizeDisplaySize
frontTextstring
backTextstring
frontClick: () => void
backClick: () => void
frontTypeDisplayType = "default"
backTypeDisplayType = "default"

Jumbotron

Class: JumbotronBComponent
Selector: Jumbotron-bcomponent
Inputs:

titlestring
subtitlestring
bodystring
sizenumber

Label

Class: LabelBComponent
Selector: label-bcomponent
Inputs:

textstring
typeDisplayType

Link

Class: LinkBComponent
Selector: link-bcomponent
Inputs:

textstring
linkstring

Panel

Class: PanelBComponent
Selector: panel-bcomponent
Inputs:

headerstring
bodystring
footerstring
typeDisplayType = "default"

Progressbar

Class: ProgressbarBComponent
Selector: progressbar-bcomponent
Inputs:

valuenumber = 0
typeDisplayType = "success"
displaystring = "%"
displayPercentboolean = true
stripedboolean = false
animatedboolean = false
minValuenumber = 0
maxValuenumber = 100

Table

Class: TableBComponent
Selector: table-bcomponent
Inputs:

itemsany[]
headersany[]
stripedboolean

Thumbnail

Class: ThumbnailBComponent
Selector: thumbnail-bcomponent
Inputs:

linkstring
headerstring
bodystring
footerstring
srcstring
altstring
sizenumber = 3

Well

Class: WellBComponent
Selector: well-bcomponent
Inputs:

textstring
sizeDisplaySize

Keywords

none

install

npm i angular2-bootstrap-components

Downloadsweekly downloads

14

version

0.1.0

license

ISC

last publish

collaborators

  • avatar
Report a vulnerability