You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+22-22Lines changed: 22 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
-
#vue-formly-bootstrap
1
+
#vue-formly-bootstrap
2
2
A plugin for [Vue Formly](https://github.com/matt-sanders/vue-formly) which adds multiple form fields according to Twitter Bootstrap.
3
3
4
-
##Version 2
4
+
##Version 2
5
5
Note that this is version 2 of Vue Formly Bootstrap, compatible with Vue Formly 2 and Vue 2. If you are looking for version 1 compatibility check out the [Version 1 Branch](https://github.com/formly-js/vue-formly-bootstrap/tree/1.0).
6
6
7
-
##Installation
7
+
##Installation
8
8
```
9
9
npm install vue-formly-bootstrap
10
10
```
@@ -15,7 +15,7 @@ or if you can just include the script:
@@ -77,36 +77,36 @@ For more advanced details about how to use Vue Formly check out the [docs](https
77
77
78
78
Note that this is still a work in progress so some fields are under construction. See the [To Do](#to-do) section for what's on the watchlist.
79
79
80
-
##Options & Attributes
80
+
##Options & Attributes
81
81
82
-
###Form Attributes
82
+
###Form Attributes
83
83
The form object is used to track the state of the form. Whether it is valid or not, whether there are any errors etc. The following attributes will be set under each field key. e.g. if you had a field with the key of `name` you could access these under `form.name`
84
84
85
85
| Attribute | Type | Default | Description |
86
86
| --- | --- | --- | --- |
87
87
| $dirty |`boolean`|`false`|***RESTRICTED*** This is set by the system and is just there for your reference. It gets set to `true` upon blur or change, whichever happens first. |
88
88
| $active |`boolean`|`false`|***RESTRICTED*** Also set by the system and is set to true on focus. |
89
89
90
-
###Global options
90
+
###Global options
91
91
These options are used by all the different field types. Some fields may have special options and these will be specified below. Check the [Vue Formly docs](https://matt-sanders.gitbooks.io/vue-formly/content/v/2.0/) for more info.
92
92
93
93
| Property | Type | Default | Description |
94
94
| --- | --- | --- | --- |
95
95
| type | `string` | `null` | ***REQUIRED*** this is the input type. Check the [Available Inputs](#available-inputs) section for a list of currently available inputs.
96
96
97
-
####Select options
97
+
####Select options
98
98
99
99
| Property | Type | Default | Description |
100
100
| --- | --- | --- | --- |
101
101
| options |`array`|`null`| Pass either an array of strings or objects. Objects require a `label` and `value` property. If a string is passed then it will be used for the value and the label. eg: `options: ['Foo', 'Bar']` or `options: [{ label: 'Foo', value: 'bar'},{label: 'Bar', value: 'foo'}]`|
102
102
103
-
####List options
103
+
####List options
104
104
105
105
| Property | Type | Default | Description |
106
106
| --- | --- | --- | --- |
107
107
| options |`array`|`null`| Pass either an array of strings or objects. Objects require a `label` and `value` property. If a string is passed then it will be used for the value and the label. eg: `options: ['Foo', 'Bar']` or `options: [{ label: 'Foo', value: 'bar'},{label: 'Bar', value: 'foo'}]`|
108
108
109
-
###Template Options
109
+
###Template Options
110
110
These should be added to the `templateOptions` property. Some input types may have specific options which can be used here and will be specified below.
111
111
112
112
| Property | Type | Default | Description |
@@ -122,26 +122,26 @@ These should be added to the `templateOptions` property. Some input types may ha
122
122
| classes |`object`|`null`| Pass an object of classes to be added to the element. Follows the Vue bindings where each key matches a boolean value. eg `{ 'class-a': true, 'class-b': false }` In this case class-a will be attached. |
123
123
| id |`string`|`null`| An ID string to attach to the element |
124
124
125
-
####Input options
125
+
####Input options
126
126
127
127
| Property | Type | Default | Description |
128
128
| --- | --- | --- | --- |
129
129
| inputType |`string`|`text`| The 'type' attribute to pass to the input. Can be any valid input type. |
130
130
131
-
####List options
131
+
####List options
132
132
133
133
| Property | Type | Default | Description |
134
134
| --- | --- | --- | --- |
135
135
| inputType |`string`|`checkbox`| The 'type' attribute to pass to each input. Can be either 'checkbox' or 'radio' |
136
136
137
137
138
-
##Available Inputs
138
+
##Available Inputs
139
139
* input
140
140
* select
141
141
* textarea
142
142
* list ( radio/checkbox )
143
143
144
-
###Datepickers & Select2 style selects
144
+
###Datepickers & Select2 style selects
145
145
Given that there are so many different datepickers and select boxes out there I've decided not to implement one natively. This is a) to reduce bloat and b) so that you can implement whichever one you want. When you do want to add one, simply [create your own Formly Field](https://matt-sanders.gitbooks.io/vue-formly/content/v/2.0/how_to_use/creating_formly_fields.html).
146
146
147
147
To help you out a bit, here is an example of how you would go about doing this using [vuejs datepicker](https://github.com/charliekassel/vuejs-datepicker)
0 commit comments