bootstrap_form 2.0.1 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/MIT-LICENSE +1 -1
- data/README.md +207 -35
- data/app/assets/stylesheets/rails_bootstrap_forms.css +10 -0
- data/lib/bootstrap_form.rb +5 -0
- data/lib/bootstrap_form/bootstrap_helpers.rb +66 -0
- data/lib/bootstrap_form/form_builder.rb +176 -75
- data/lib/bootstrap_form/helper.rb +9 -3
- data/lib/bootstrap_form/version.rb +1 -1
- data/test/bootstrap_form_test.rb +320 -75
- data/test/dummy/app/models/user.rb +1 -0
- data/test/dummy/db/migrate/20140327190145_add_terms_to_user.rb +5 -0
- data/test/dummy/db/schema.rb +2 -1
- data/test/dummy/db/test.sqlite3 +0 -0
- data/test/dummy/log/development.log +0 -0
- data/test/dummy/log/test.log +11185 -1123
- metadata +27 -21
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 311b2d08aa1d52ca0c3dc819c1f061916aa59708
|
4
|
+
data.tar.gz: 05a500f081ca6e0cfe8f452120d50f564ef0c353
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d2cafdbe6823b47db0a1ee71ad330d9086a1c37d5eeda88a3e4c6764b0c25d948886ab76f25ec7fb5b82f3927e9a4a0bc44a610cfd37e41ea9209491f015ca7a
|
7
|
+
data.tar.gz: 8cfc0f84c79178a5f9da7706d0a93397544213d8e69a7096aa9dffeefe154e472514a90644091907d7cf4c9a6749492cc9fdd932c273d69589dbbc04cd67eda5
|
data/MIT-LICENSE
CHANGED
data/README.md
CHANGED
@@ -1,14 +1,14 @@
|
|
1
|
-
[](https://travis-ci.org/bootstrap-ruby/rails-bootstrap-forms) [](https://codeclimate.com/github/bootstrap-ruby/rails-bootstrap-forms)
|
2
2
|
|
3
|
-
#
|
3
|
+
# Rails Bootstrap Forms
|
4
4
|
|
5
|
-
**
|
5
|
+
**Rails Bootstrap Forms** is a rails form builder that makes it super easy to integrate
|
6
6
|
twitter bootstrap-style forms into your rails application.
|
7
7
|
|
8
8
|
## Requirements
|
9
9
|
|
10
10
|
* Ruby 1.9+
|
11
|
-
* Rails
|
11
|
+
* Rails 4.0+
|
12
12
|
* Twitter Bootstrap 3.0+
|
13
13
|
|
14
14
|
## Installation
|
@@ -21,16 +21,20 @@ Then:
|
|
21
21
|
|
22
22
|
`bundle`
|
23
23
|
|
24
|
+
Then require the CSS on your `application.css` file:
|
25
|
+
|
26
|
+
`//= require rails_bootstrap_forms`
|
27
|
+
|
24
28
|
## Usage
|
25
29
|
|
26
|
-
To get started, just use the
|
30
|
+
To get started, just use the `bootstrap_form_for` helper. Here's an example:
|
27
31
|
|
28
32
|
```erb
|
29
33
|
<%= bootstrap_form_for(@user) do |f| %>
|
30
34
|
<%= f.email_field :email %>
|
31
35
|
<%= f.password_field :password %>
|
32
36
|
<%= f.check_box :remember_me %>
|
33
|
-
<%= f.submit
|
37
|
+
<%= f.submit %>
|
34
38
|
<% end %>
|
35
39
|
```
|
36
40
|
|
@@ -56,25 +60,50 @@ This generates the following HTML:
|
|
56
60
|
</form>
|
57
61
|
```
|
58
62
|
|
63
|
+
### bootstrap_form_tag
|
64
|
+
|
65
|
+
If your form is not backed by a model, use the `bootstrap_form_tag`. Usage of this helper is the same as `bootstrap_form_for`, except no model object is passed in as the first argument. Here's an example:
|
66
|
+
|
67
|
+
```erb
|
68
|
+
<%= bootstrap_form_tag url: '/subscribe' do |f| %>
|
69
|
+
<%= f.email_field :email %>
|
70
|
+
<%= f.submit %>
|
71
|
+
<% end %>
|
72
|
+
```
|
73
|
+
|
59
74
|
### Supported Form Helpers
|
60
75
|
|
61
76
|
This gem wraps the following Rails form helpers:
|
62
77
|
|
63
|
-
*
|
64
|
-
*
|
65
|
-
* text_area
|
66
|
-
* file_field
|
67
|
-
* number_field
|
68
|
-
* email_field
|
69
|
-
* telephone_field / phone_field
|
70
|
-
* url_field
|
71
|
-
* select
|
78
|
+
* check_box
|
79
|
+
* check_boxes_collection
|
72
80
|
* collection_select
|
81
|
+
* color_field
|
82
|
+
* date_field
|
73
83
|
* date_select
|
74
|
-
*
|
84
|
+
* datetime_field
|
85
|
+
* datetime_local_field
|
75
86
|
* datetime_select
|
76
|
-
*
|
87
|
+
* email_field
|
88
|
+
* file_field
|
89
|
+
* grouped_collection_select
|
90
|
+
* hidden_field (not wrapped, but supported)
|
91
|
+
* month_field
|
92
|
+
* number_field
|
93
|
+
* password_field
|
94
|
+
* phone_field
|
77
95
|
* radio_button
|
96
|
+
* radio_buttons_collection
|
97
|
+
* range_field
|
98
|
+
* search_field
|
99
|
+
* select
|
100
|
+
* telephone_field
|
101
|
+
* text_area
|
102
|
+
* text_field
|
103
|
+
* time_field
|
104
|
+
* time_select
|
105
|
+
* url_field
|
106
|
+
* week_field
|
78
107
|
|
79
108
|
### Default Form Style
|
80
109
|
|
@@ -83,48 +112,65 @@ will grow to 100% of the available width.
|
|
83
112
|
|
84
113
|
### Inline Forms
|
85
114
|
|
86
|
-
To use an inline-
|
115
|
+
To use an inline-layout form, use the `layout: :inline` option. To hide labels,
|
87
116
|
use the `hide_label: true` option, which keeps your labels accessible to those
|
88
117
|
using screen readers.
|
89
118
|
|
90
119
|
```erb
|
91
|
-
<%= bootstrap_form_for(@user,
|
120
|
+
<%= bootstrap_form_for(@user, layout: :inline) do |f| %>
|
92
121
|
<%= f.email_field :email, hide_label: true %>
|
93
122
|
<%= f.password_field :password, hide_label: true %>
|
94
123
|
<%= f.check_box :remember_me %>
|
95
|
-
<%= f.submit
|
124
|
+
<%= f.submit %>
|
96
125
|
<% end %>
|
97
126
|
```
|
98
127
|
|
99
128
|
### Horizontal Forms
|
100
129
|
|
101
|
-
To use a horizontal-
|
102
|
-
`
|
103
|
-
classes as well (they default to `col-sm-2` and `col-sm-10`).
|
130
|
+
To use a horizontal-layout form with labels to the left of the control, use the
|
131
|
+
`layout: :horizontal` option. You should specify both `label_col` and
|
132
|
+
`control_col` css classes as well (they default to `col-sm-2` and `col-sm-10`).
|
104
133
|
|
105
134
|
In the example below, the checkbox and submit button have been wrapped in a
|
106
135
|
`form_group` to keep them properly aligned.
|
107
136
|
|
108
137
|
```erb
|
109
|
-
<%= bootstrap_form_for(@user,
|
138
|
+
<%= bootstrap_form_for(@user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %>
|
110
139
|
<%= f.email_field :email %>
|
111
140
|
<%= f.password_field :password %>
|
112
141
|
<%= f.form_group do %>
|
113
142
|
<%= f.check_box :remember_me %>
|
114
143
|
<% end %>
|
115
144
|
<%= f.form_group do %>
|
116
|
-
<%= f.submit
|
145
|
+
<%= f.submit %>
|
117
146
|
<% end %>
|
118
147
|
<% end %>
|
119
148
|
```
|
120
149
|
|
121
|
-
|
150
|
+
The `label_col` and `control_col` css classes can also be changed per control:
|
122
151
|
|
123
152
|
```erb
|
124
|
-
<%=
|
125
|
-
|
126
|
-
|
127
|
-
|
153
|
+
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
154
|
+
<%= f.email_field :email %>
|
155
|
+
<%= f.text_field :age, control_col: "col-sm-3" %>
|
156
|
+
<%= f.form_group do %>
|
157
|
+
<%= f.submit %>
|
158
|
+
<% end %>
|
159
|
+
<% end %>
|
160
|
+
```
|
161
|
+
|
162
|
+
### Custom Field Layout
|
163
|
+
|
164
|
+
The `layout` can be overriden per field:
|
165
|
+
|
166
|
+
```erb
|
167
|
+
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
168
|
+
<%= f.email_field :email %>
|
169
|
+
<%= f.text_field :feet, layout: :inline %>
|
170
|
+
<%= f.text_field :inches, layout: :inline %>
|
171
|
+
<%= f.form_group do %>
|
172
|
+
<%= f.submit %>
|
173
|
+
<% end %>
|
128
174
|
<% end %>
|
129
175
|
```
|
130
176
|
|
@@ -157,13 +203,20 @@ The `btn btn-default` css classes are automatically added to your submit
|
|
157
203
|
buttons.
|
158
204
|
|
159
205
|
```erb
|
160
|
-
<%= f.submit
|
206
|
+
<%= f.submit %>
|
207
|
+
```
|
208
|
+
|
209
|
+
You can also use the `primary` helper, which adds `btn btn-primary` to your
|
210
|
+
submit button **(master branch only)**:
|
211
|
+
|
212
|
+
```erb
|
213
|
+
<%= f.primary "Optional Label" %>
|
161
214
|
```
|
162
215
|
|
163
216
|
You can specify your own classes like this:
|
164
217
|
|
165
218
|
```erb
|
166
|
-
<%= f.submit "Log In", class: "btn btn-
|
219
|
+
<%= f.submit "Log In", class: "btn btn-success" %>
|
167
220
|
```
|
168
221
|
|
169
222
|
### Checkboxes and Radios
|
@@ -204,6 +257,22 @@ To display checkboxes and radios inline, pass the `inline: true` option:
|
|
204
257
|
<% end %>
|
205
258
|
```
|
206
259
|
|
260
|
+
#### Collections
|
261
|
+
|
262
|
+
BootstrapForms also provide helpful helpers that automatically creates the
|
263
|
+
`form_group` and the `radio_button`s or `check_box`es for you:
|
264
|
+
|
265
|
+
```erb
|
266
|
+
<%= f.radio_buttons_collection :skill_level, Skill.all, :id, :name %>
|
267
|
+
<%= f.check_boxes_collection :skills, Skill.all, :id, :name %>
|
268
|
+
```
|
269
|
+
|
270
|
+
Collection methods accept these options:
|
271
|
+
* `:label`: Customize the `form_group`'s label;
|
272
|
+
* `:hide_label`: Pass true to hide the `form_group`'s label;
|
273
|
+
* `:help`: Add a help span to the `form_group`;
|
274
|
+
* Other options will be forwarded to the `radio_button`/`check_box` method;
|
275
|
+
|
207
276
|
### Prepending and Appending Inputs
|
208
277
|
|
209
278
|
You can pass `prepend` and/or `append` options to input fields:
|
@@ -212,6 +281,41 @@ You can pass `prepend` and/or `append` options to input fields:
|
|
212
281
|
<%= f.text_field :price, prepend: "$", append: ".00" %>
|
213
282
|
```
|
214
283
|
|
284
|
+
### Static Controls **(master branch only)**
|
285
|
+
|
286
|
+
You can create a static control like this:
|
287
|
+
|
288
|
+
```erb
|
289
|
+
<%= f.static_control :email %>
|
290
|
+
```
|
291
|
+
|
292
|
+
Here's the output:
|
293
|
+
|
294
|
+
```html
|
295
|
+
<div class="form-group">
|
296
|
+
<label class="col-sm-2 control-label" for="user_email">Email</label>
|
297
|
+
<div class="col-sm-10">
|
298
|
+
<p class="form-control-static">test@email.com</p>
|
299
|
+
</div>
|
300
|
+
</div>
|
301
|
+
```
|
302
|
+
|
303
|
+
You can also create a static control that isn't based on a model attribute:
|
304
|
+
|
305
|
+
```erb
|
306
|
+
<%= f.static_control nil, label: "Custom Static Control" do %>
|
307
|
+
Content Here
|
308
|
+
<% end %>
|
309
|
+
```
|
310
|
+
|
311
|
+
### Date helpers
|
312
|
+
|
313
|
+
The multiple selects that the date and time helpers (`date_select`,
|
314
|
+
`time_select`, `datetime_select`) generate are wrapped inside a
|
315
|
+
`div.rails-bootstrap-forms-[date|time|datetime]-select` tag. This is because
|
316
|
+
Boostrap automatically stylizes ours controls as `block`s. This wrapper fix
|
317
|
+
this defining these selects as `inline-block` and a width of `auto`.
|
318
|
+
|
215
319
|
### Validation Errors
|
216
320
|
|
217
321
|
When a validation error is triggered, the field will be outlined and the error
|
@@ -219,20 +323,88 @@ will be displayed below the field. Rails normally wraps the fields in a div
|
|
219
323
|
(field_with_errors), but this behavior is suppressed.
|
220
324
|
|
221
325
|
To display an error message wrapped in `.alert` and `.alert-danger`
|
222
|
-
classes, you can use the `alert_message` helper
|
326
|
+
classes, you can use the `alert_message` helper. This won't output anything
|
327
|
+
unless a model validation has failed.
|
223
328
|
|
224
329
|
```erb
|
225
330
|
<%= f.alert_message "Please fix the errors below." %>
|
226
331
|
```
|
227
332
|
|
333
|
+
You can turn off inline errors with the option `inline_errors: false`. Combine
|
334
|
+
this with `alert_message` to display an alert message with an error summary.
|
335
|
+
|
336
|
+
```erb
|
337
|
+
<%= bootstrap_form_for(@user, inline_errors: false) do |f| %>
|
338
|
+
<%= f.alert_message "Please fix the following errors:" %>
|
339
|
+
<% end %>
|
340
|
+
```
|
341
|
+
|
342
|
+
If you don't want an error summary, just send the `error_summary: false` option
|
343
|
+
to `alert_message`.
|
344
|
+
|
345
|
+
```erb
|
346
|
+
<%= bootstrap_form_for(@user, inline_errors: false) do |f| %>
|
347
|
+
<%= f.alert_message "Please fix the following errors", error_summary: false %>
|
348
|
+
<% end %>
|
349
|
+
```
|
350
|
+
|
351
|
+
To output a simple unordered list of errors, use `error_summary`.
|
352
|
+
|
353
|
+
```erb
|
354
|
+
<%= bootstrap_form_for(@user, inline_errors: false) do |f| %>
|
355
|
+
<%= f.error_summary %>
|
356
|
+
<% end %>
|
357
|
+
```
|
358
|
+
|
359
|
+
If you want to display a custom inline error for a specific attribute not represented by a form field, use the `errors_on` helper.
|
360
|
+
|
361
|
+
```erb
|
362
|
+
<%= f.errors_on :tasks %>
|
363
|
+
```
|
364
|
+
|
365
|
+
The error will be wrapped in a div with `.alert` and `.alert-danger`
|
366
|
+
classes.
|
367
|
+
|
368
|
+
```html
|
369
|
+
<div class="alert alert-danger">Tasks must be added (at least one).</div>
|
370
|
+
```
|
371
|
+
|
372
|
+
### Internationalization
|
373
|
+
|
374
|
+
bootstrap_form follows standard rails conventions so it's i18n-ready. See more
|
375
|
+
here: http://guides.rubyonrails.org/i18n.html#translations-for-active-record-models
|
376
|
+
|
228
377
|
## Code Triage page
|
229
378
|
|
230
379
|
http://www.codetriage.com/potenza/bootstrap_form
|
231
380
|
|
381
|
+
## Contributing
|
382
|
+
|
383
|
+
We love pull requests! Here's a quick guide for contributing:
|
384
|
+
|
385
|
+
1. Fork the repo.
|
386
|
+
|
387
|
+
2. Run the existing test suite:
|
388
|
+
|
389
|
+
`$ cd test/dummy && bundle exec rake db:create db:migrate RAILS_ENV=test && cd ../../`
|
390
|
+
`$ bundle exec rake`
|
391
|
+
|
392
|
+
3. Add tests for your change.
|
393
|
+
|
394
|
+
4. Add your changes and make your test(s) pass. Following the conventions you
|
395
|
+
see used in the source will increase the chance that your pull request is
|
396
|
+
accepted right away.
|
397
|
+
|
398
|
+
5. Update the README if necessary.
|
399
|
+
|
400
|
+
6. Add a line to the CHANGELOG for your bug fix or feature.
|
401
|
+
|
402
|
+
7. Push to your fork and submit a pull request.
|
403
|
+
|
232
404
|
## Contributors
|
233
405
|
|
234
|
-
https://github.com/
|
406
|
+
https://github.com/bootstrap-ruby/rails-bootstrap-forms/graphs/contributors
|
235
407
|
|
236
408
|
## License
|
237
409
|
|
238
|
-
MIT License. Copyright 2012-
|
410
|
+
MIT License. Copyright 2012-2014 Stephen Potenza (https://github.com/potenza)
|
data/lib/bootstrap_form.rb
CHANGED
@@ -1,7 +1,12 @@
|
|
1
|
+
require 'bootstrap_form/bootstrap_helpers'
|
1
2
|
require 'bootstrap_form/form_builder'
|
2
3
|
require 'bootstrap_form/helper'
|
3
4
|
|
4
5
|
module BootstrapForm
|
6
|
+
module Rails
|
7
|
+
class Engine < ::Rails::Engine
|
8
|
+
end
|
9
|
+
end
|
5
10
|
end
|
6
11
|
|
7
12
|
ActionView::Base.send :include, BootstrapForm::Helper
|
@@ -0,0 +1,66 @@
|
|
1
|
+
module BootstrapForm
|
2
|
+
module BootstrapHelpers
|
3
|
+
def submit(name = nil, options = {})
|
4
|
+
options.merge! class: "btn btn-default" unless options.has_key? :class
|
5
|
+
super(name, options)
|
6
|
+
end
|
7
|
+
|
8
|
+
def primary(name = nil, options = {})
|
9
|
+
options.merge! class: "btn btn-primary"
|
10
|
+
submit(name, options)
|
11
|
+
end
|
12
|
+
|
13
|
+
def alert_message(title, options = {})
|
14
|
+
css = options[:class] || "alert alert-danger"
|
15
|
+
|
16
|
+
if object.respond_to?(:errors) && object.errors.full_messages.any?
|
17
|
+
content_tag :div, class: css do
|
18
|
+
concat content_tag :p, title
|
19
|
+
concat error_summary unless inline_errors || options[:error_summary] == false
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
23
|
+
|
24
|
+
def error_summary
|
25
|
+
content_tag :ul, class: "rails-bootstrap-forms-error-summary" do
|
26
|
+
object.errors.full_messages.each do |error|
|
27
|
+
concat content_tag(:li, error)
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
31
|
+
|
32
|
+
def errors_on(name)
|
33
|
+
if has_error?(name)
|
34
|
+
content_tag :div, class: "alert alert-danger" do
|
35
|
+
object.errors.full_messages_for(name).join(", ")
|
36
|
+
end
|
37
|
+
end
|
38
|
+
end
|
39
|
+
|
40
|
+
def static_control(name, options = {}, &block)
|
41
|
+
html = if block_given?
|
42
|
+
capture(&block)
|
43
|
+
else
|
44
|
+
object.send(name)
|
45
|
+
end
|
46
|
+
|
47
|
+
form_group_builder(name, options) do
|
48
|
+
content_tag(:p, html, class: static_class)
|
49
|
+
end
|
50
|
+
end
|
51
|
+
|
52
|
+
def prepend_and_append_input(options, &block)
|
53
|
+
options = options.extract!(:prepend, :append)
|
54
|
+
input = capture(&block)
|
55
|
+
|
56
|
+
input = content_tag(:span, options[:prepend], class: "input-group-addon") + input if options[:prepend]
|
57
|
+
input << content_tag(:span, options[:append], class: "input-group-addon") if options[:append]
|
58
|
+
input = content_tag(:div, input, class: "input-group") if options[:prepend] || options[:append]
|
59
|
+
input
|
60
|
+
end
|
61
|
+
|
62
|
+
def static_class
|
63
|
+
"form-control-static"
|
64
|
+
end
|
65
|
+
end
|
66
|
+
end
|