Skip to content
Bootstrap Panel Decorator for Angular Schema Form
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
demo
dist
src
test
.editorconfig
.eslintrc.json
.gitignore
.markdownlint.json
.travis.yml
LICENSE
README.md
bower.json
gulpfile.js
karma.conf.js
package.json
sources.json

README.md

Angular Schema Form Bootstrap Panel Decorator v1.0.0

Greenkeeper badge

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

View the Live Demo on CodePen for examples.


Build status Dependencies status NPM version Bower version

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.
You can’t perform that action at this time.