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. |