aurelia-bs: Bootstrap UI components for Aurelia JS

This project provides Bootstrap UI v3 (CSS framework) components for Aurelia JS.

Demo

We open-sourced our internally implemented Aurelia JS components so that everyone can use and improve them. We would be very glad if you contribute your own components, improvements and bug fixes.

Installation

1. Create Aurelia project (webpack based, here sample with ASP.NET Core):

dotnet new --install "Microsoft.AspNetCore.SpaTemplates::*"
dotnet new aurelia

2. Install required NPM packages:

npm install aurelia-bs --save
npm install aurelia-validation --save

3. Register both plugins in boot.ts:

import { Aurelia, PLATFORM } from 'aurelia-framework';

...

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName('aurelia-validation'))
    .plugin(PLATFORM.moduleName('aurelia-bs'));

4. Use bs-aurelia components and start application

dotnet run

Usage

• Dialogs
• Validation

Components

• bs-accordion
• bs-button
• bs-checkbox
• bs-datepicker
• bs-expander
• bs-grid-filter
• bs-grid
• bs-label-collection
• bs-loader
• bs-navbar-header
• bs-resize-container
• bs-scroll
• bs-searchbox
• bs-select-grid
• bs-select
• bs-tabs
• bs-textbox

Development

How to add a component

• Implement component
• Register component in "main.ts" as globalResources()
• Add component name to package.json in the path "aurelia.build.resources"
• Export view model class from "index.ts"