Skip to content

Commit e47f897

Browse files
authored
fixed formatting
1 parent 70ea29b commit e47f897

File tree

1 file changed

+22
-22
lines changed

1 file changed

+22
-22
lines changed

README.md

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
#vue-formly-bootstrap
1+
# vue-formly-bootstrap
22
A plugin for [Vue Formly](https://github.com/matt-sanders/vue-formly) which adds multiple form fields according to Twitter Bootstrap.
33

4-
##Version 2
4+
## Version 2
55
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).
66

7-
##Installation
7+
## Installation
88
```
99
npm install vue-formly-bootstrap
1010
```
@@ -15,7 +15,7 @@ or if you can just include the script:
1515
<script src="/path_to_folder/vue-formly-bootstrap/dist/vue-formly-bootstrap.min.js"></script>
1616
```
1717

18-
##Usage
18+
## Usage
1919
```js
2020
import VueFormly from 'vue-formly';
2121
import VueFormlyBootstrap from 'vue-formly-bootstrap';
@@ -77,36 +77,36 @@ For more advanced details about how to use Vue Formly check out the [docs](https
7777

7878
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.
7979

80-
##Options & Attributes
80+
## Options & Attributes
8181

82-
###Form Attributes
82+
### Form Attributes
8383
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`
8484

8585
| Attribute | Type | Default | Description |
8686
| --- | --- | --- | --- |
8787
| $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. |
8888
| $active | `boolean` | `false` | ***RESTRICTED*** Also set by the system and is set to true on focus. |
8989

90-
###Global options
90+
### Global options
9191
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.
9292

9393
| Property | Type | Default | Description |
9494
| --- | --- | --- | --- |
9595
| type | `string` | `null` | ***REQUIRED*** this is the input type. Check the [Available Inputs](#available-inputs) section for a list of currently available inputs.
9696

97-
####Select options
97+
#### Select options
9898

9999
| Property | Type | Default | Description |
100100
| --- | --- | --- | --- |
101101
| 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'}]` |
102102

103-
####List options
103+
#### List options
104104

105105
| Property | Type | Default | Description |
106106
| --- | --- | --- | --- |
107107
| 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'}]` |
108108

109-
###Template Options
109+
### Template Options
110110
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.
111111

112112
| Property | Type | Default | Description |
@@ -122,26 +122,26 @@ These should be added to the `templateOptions` property. Some input types may ha
122122
| 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. |
123123
| id | `string` | `null` | An ID string to attach to the element |
124124

125-
####Input options
125+
#### Input options
126126

127127
| Property | Type | Default | Description |
128128
| --- | --- | --- | --- |
129129
| inputType | `string` | `text` | The 'type' attribute to pass to the input. Can be any valid input type. |
130130

131-
####List options
131+
#### List options
132132

133133
| Property | Type | Default | Description |
134134
| --- | --- | --- | --- |
135135
| inputType | `string` | `checkbox` | The 'type' attribute to pass to each input. Can be either 'checkbox' or 'radio' |
136136

137137

138-
##Available Inputs
138+
## Available Inputs
139139
* input
140140
* select
141141
* textarea
142142
* list ( radio/checkbox )
143143

144-
###Datepickers & Select2 style selects
144+
### Datepickers & Select2 style selects
145145
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).
146146

147147
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)
@@ -156,20 +156,20 @@ vueFormly.addType('datepicker', datepicker);
156156
```js
157157
//datepicker.vue
158158
<template>
159-
<div class="form-group formly-datepicker" :class="[ to.inputType, {'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error': hasError}]">
160-
<datepicker v-model="model[field.key]"></datepicker>
161-
<error-display :form="form" :field="field.key"></error-display>
162-
</div>
159+
<div class="form-group formly-datepicker" :class="[ to.inputType, {'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active, 'has-error': hasError}]">
160+
<datepicker v-model="model[field.key]"></datepicker>
161+
<error-display :form="form" :field="field.key"></error-display>
162+
</div>
163163
</template>
164164

165165
<script>
166166
import baseField from 'vue-formly-bootstrap/src/fields/baseField';
167167
import datepicker from 'vuejs-datepicker';
168168
export default {
169-
mixins: [baseField],
170-
components: {
171-
datepicker
172-
}
169+
mixins: [baseField],
170+
components: {
171+
datepicker
172+
}
173173
}
174174
</script>
175175
```

0 commit comments

Comments
 (0)