@@ -9,14 +9,15 @@ Documentation
9
9
1 . [ onChange] ( #onchange )
10
10
1 . [ Validation Messages] ( #validation-messages )
11
11
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 )
13
13
1 . [ fieldset and section] ( #fieldset-and-section )
14
14
1 . [ conditional] ( #conditional )
15
15
1 . [ select and checkboxes] ( #select-and-checkboxes )
16
16
1 . [ actions] ( #actions )
17
17
1 . [ button] ( #button )
18
18
1 . [ radios and radiobuttons] ( #radios-and-radiobuttons )
19
19
1 . [ help] ( #help )
20
+ 1 . [ tabs] ( #tabs )
20
21
1 . [ Post process function] ( #post-process-function )
21
22
22
23
Form types
@@ -40,6 +41,7 @@ Schema Form currently supports the following form field types out of the box:
40
41
| radios | radio buttons |
41
42
| radiobuttons | radio buttons with bootstrap buttons |
42
43
| help | insert arbitrary html |
44
+ | tab | tabs with content |
43
45
44
46
More field types can be added, for instance a "datepicker" type can be added by
45
47
including the [ datepicker addon] ( datepicker.md )
@@ -226,8 +228,8 @@ Useful things in the decorators scope are
226
228
227
229
228
230
229
- Specific options per type
230
- -------------------------
231
+ Specific options and types
232
+ --------------------------
231
233
232
234
### fieldset and section
233
235
@@ -403,6 +405,64 @@ function FormCtrl($scope) {
403
405
}
404
406
```
405
407
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
+
406
466
Post process function
407
467
---------------------
408
468
0 commit comments