Skip to content

Commit 7867f4a

Browse files
committed
Documentation for tags
1 parent f16c8d0 commit 7867f4a

File tree

2 files changed

+101
-4
lines changed

2 files changed

+101
-4
lines changed

README.md

+38-1
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,12 @@ manually)
7373

7474
It depends on AngularJS (duh!), [tv4](https://github.com/geraintluff/tv4), and
7575
if you like to use the date picker you also need jQuery and
76-
[pickadate.js](http://amsul.ca/pickadate.js/)
76+
[pickadate.js](http://amsul.ca/pickadate.js/). Also if you use the ```help```
77+
type to inject HTML you'll want to use ngSanitize as well.
7778

7879
The minified files also includes all templates so they are all you need.
7980

81+
8082
Addons
8183
------
8284
Currently there is only one addon, a date picker using
@@ -85,6 +87,41 @@ the excellent [pickadate.js](http://amsul.ca/pickadate.js/).
8587
See the [docs](docs/datepicker.md) for usage.
8688

8789

90+
Building
91+
--------
92+
The files in the ```dist``` plus dependencies are all you need to use Schema
93+
Form, but if you like to build it yourself we use [gulp](http://gulpjs.com/).
94+
95+
First off you need to have nodejs installed. Then install all dev dependencies
96+
of the project with npm, install gulp and run the default task.
97+
98+
```bash
99+
$ npm install
100+
$ sudo npm install -g gulp
101+
$ gulp
102+
```
103+
104+
The default task uses [gulp-angular-templatecache](https://github.com/miickel/gulp-angular-templatecache)
105+
to compile all html templates to js and then concatenates and minifies them with
106+
the rest of the sources.
107+
108+
You can also run ```gulp watch``` to have it rebuild on change.
109+
110+
Tests
111+
-----
112+
Unit tests are run with [karma](http://karma-runner.github.io) and written using
113+
[mocha](http://visionmedia.github.io/mocha/), [chai](http://chaijs.com/)
114+
and [sinon](http://sinonjs.org/)
115+
116+
To run the tests first install all dependencies with npm (if you haven't done it
117+
already) and install the karma cli to run the test.
118+
119+
```bash
120+
$ npm install
121+
$ sudo npm install -g karma-cli
122+
$ karma start karma.conf.js
123+
```
124+
88125
Contributing
89126
------------
90127

docs/index.md

+63-3
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@ Documentation
99
1. [onChange](#onchange)
1010
1. [Validation Messages](#validation-messages)
1111
1. [Inline feedback icons](#inline-feedback-icons)
12-
1. [Specific options per type](#specific-options-per-type)
12+
1. [Specific options and types](#specific-options-and-types)
1313
1. [fieldset and section](#fieldset-and-section)
1414
1. [conditional](#conditional)
1515
1. [select and checkboxes](#select-and-checkboxes)
1616
1. [actions](#actions)
1717
1. [button](#button)
1818
1. [radios and radiobuttons](#radios-and-radiobuttons)
1919
1. [help](#help)
20+
1. [tabs](#tabs)
2021
1. [Post process function](#post-process-function)
2122

2223
Form types
@@ -40,6 +41,7 @@ Schema Form currently supports the following form field types out of the box:
4041
| radios | radio buttons |
4142
| radiobuttons | radio buttons with bootstrap buttons |
4243
| help | insert arbitrary html |
44+
| tab | tabs with content |
4345

4446
More field types can be added, for instance a "datepicker" type can be added by
4547
including the [datepicker addon](datepicker.md)
@@ -226,8 +228,8 @@ Useful things in the decorators scope are
226228

227229

228230

229-
Specific options per type
230-
-------------------------
231+
Specific options and types
232+
--------------------------
231233

232234
### fieldset and section
233235

@@ -403,6 +405,64 @@ function FormCtrl($scope) {
403405
}
404406
```
405407

408+
### tabs
409+
The ```tabs``` form type lets you split your form into tabs. It is similar to
410+
```fieldset``` in that it just changes the presentation of the form. ```tabs```
411+
takes a option, also called ```tabs```, that is a list of tab objects. Each tab
412+
object consist of a *title* and a *items* list of form objects.
413+
414+
Ex.
415+
```javascript
416+
function FormCtrl($scope) {
417+
$scope.schema = {
418+
type: "object",
419+
properties: {
420+
name: {
421+
title: "Name",
422+
type: "string"
423+
},
424+
nick: {
425+
title: "Nick",
426+
type: "string"
427+
}
428+
alias: {
429+
title: "Alias",
430+
type: "string"
431+
}
432+
tag: {
433+
title: "Tag",
434+
type: "string"
435+
}
436+
}
437+
};
438+
439+
$scope.form = [
440+
"name",
441+
{
442+
type: "tabs",
443+
tabs: [
444+
{
445+
title: "Tab 1",
446+
items: [
447+
"nick",
448+
"alias"
449+
]
450+
},
451+
{
452+
title: "Tab 2",
453+
items: [
454+
"tag"
455+
]
456+
}
457+
]
458+
}
459+
];
460+
}
461+
```
462+
463+
464+
465+
406466
Post process function
407467
---------------------
408468

0 commit comments

Comments
 (0)