Angular Schema Form Bootstrap Panel Decorator v1.0.0

Adds support for Bootstrap's custom panel component in Angular Schema Form

View the Live Demo on CodePen for examples.

Installation

Install angular-schema-form-panel via npm or bower.

NPM

npm install angular-schema-form-panel

Bower

bower install angular-schema-form-panel

Usage

Include angular-schema-form-panel.min.js (or the un-minified angular-schema-form-panel.js) file in your HTML document(s):

<script src="node_modules/angular-schema-form-panel/dist/angular-schema-form-panel.min.js"></script>

Add schemaFormPanel as an Angular dependency in your application module:

var app = angular.module('myApp', [..., 'schemaForm', 'schemaFormPanel']);

Then use panel as the type in your form's JSON definition:

$scope.form = [
    ...,
    {
        type: "panel",
        items: [...],
        ...options
    }
]

You can also make an accordion of panels by using panel-group as the type (make sure the items of your panel-group are panel objects) in your form's JSON definition:

$scope.form = [
    ...,
    {
        type: "panel-group",
        items: [
            {
                type: "panel",
                items: [...],
                ...options
            },
            {
                type: "panel",
                items: [...],
                ...options
            },
            {
                type: "panel",
                items: [...],
                ...options
            }
        ]
    }
]

Options

You can use the following options on each panel object. All options are optional unless specified.