Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

angular-schema-form-panel

1.0.0 • Public • Published

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.


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.

install

npm i angular-schema-form-panel

Downloadsweekly downloads

4

version

1.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability