Adds support for Bootstrap's custom panel component in Angular Schema Form
View the Live Demo on CodePen for examples.
Install angular-schema-form-panel via npm or bower.
npm install angular-schema-form-panelbower install angular-schema-form-panelInclude 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 } ] } ]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. |