dorknstein / angular-schema-form-panel

Bootstrap Panel Decorator for Angular Schema Form

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.

Option Name	Type	Description
items	array	Specifies all items to include in the panel body. Technically optional but without it your panel will be empty.
style	string	Specifies the panel's contextual style (e.g. success, info, danger, etc.). Defaults to default.
title	string	Specifies the title displayed in the header of the panel. This is required for collapsible panels.
footer	string	Specifies the HTML content added to the panel's footer.
collapsible	bool	Specifies if the panel can be collapsed. Remember to specify a title for collapsible panels. Defaults to false.
collapsed	bool	Specifies if the panel should be collapsed initially. This only applies to collapsible panels. Defaults to false.
panelClass	string	Specifies additional class(es) to add to the main panel element.
headingClass	string	Specifies additional class(es) to add to the panel's heading element.
bodyClass	string	Specifies additional class(es) to add to the panel's body element.
footerClass	string	Specifies additional class(es) to add to the panel's footer element.
list	bool	Specifies if the items should be rendered as elements of a list group. Defaults to false.