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):
Add schemaFormPanel
as an Angular dependency in your application module:
var app = angular;
Then use panel
as the type
in your form's JSON definition:
$scopeform = ... 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:
$scopeform = ... 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 . |