comfy_bootstrap_form 4.0.0.beta1 → 4.0.0.beta2
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 +5 -5
- data/.gitignore +12 -0
- data/.travis.yml +14 -0
- data/CONTRIBUTING.md +40 -0
- data/Gemfile +14 -0
- data/{MIT-LICENSE → LICENSE.md} +1 -1
- data/README.md +130 -495
- data/Rakefile +5 -15
- data/bootstrap_form.gemspec +25 -0
- data/demo/README.md +18 -0
- data/demo/Rakefile +6 -0
- data/demo/app/controllers/application_controller.rb +2 -0
- data/demo/app/controllers/bootstrap_controller.rb +12 -0
- data/demo/app/models/application_record.rb +3 -0
- data/demo/app/models/user.rb +3 -0
- data/demo/app/views/bootstrap/form.html.erb +82 -0
- data/demo/app/views/layouts/application.html.erb +43 -0
- data/demo/bin/bundle +3 -0
- data/{test/dummy → demo}/bin/rails +1 -1
- data/{test/dummy → demo}/bin/rake +0 -0
- data/demo/bin/setup +36 -0
- data/demo/bin/update +31 -0
- data/demo/bin/yarn +11 -0
- data/{test/dummy → demo}/config.ru +2 -1
- data/demo/config/application.rb +24 -0
- data/demo/config/boot.rb +5 -0
- data/{test/dummy → demo}/config/database.yml +8 -12
- data/demo/config/environment.rb +5 -0
- data/demo/config/environments/development.rb +60 -0
- data/{test/dummy → demo}/config/environments/test.rb +15 -20
- data/demo/config/initializers/application_controller_renderer.rb +8 -0
- data/demo/config/initializers/assets.rb +14 -0
- data/{test/dummy → demo}/config/initializers/backtrace_silencers.rb +0 -0
- data/demo/config/initializers/cookies_serializer.rb +5 -0
- data/{test/dummy → demo}/config/initializers/filter_parameter_logging.rb +0 -0
- data/{test/dummy → demo}/config/initializers/inflections.rb +0 -0
- data/{test/dummy → demo}/config/initializers/mime_types.rb +0 -1
- data/{test/dummy → demo}/config/initializers/wrap_parameters.rb +2 -2
- data/{test/dummy → demo}/config/locales/en.yml +10 -0
- data/demo/config/puma.rb +56 -0
- data/{test/dummy → demo}/config/routes.rb +2 -0
- data/demo/config/spring.rb +6 -0
- data/demo/config/storage.yml +35 -0
- data/demo/db/schema.rb +11 -0
- data/{test/dummy/public/favicon.ico → demo/log/.keep} +0 -0
- data/demo/package.json +5 -0
- data/demo/public/favicon.ico +0 -0
- data/lib/bootstrap_form.rb +2 -2
- data/lib/bootstrap_form/form_builder.rb +367 -346
- data/lib/bootstrap_form/version.rb +1 -1
- data/lib/bootstrap_form/view_helper.rb +33 -0
- data/lib/comfy_bootstrap_form.rb +1 -1
- data/test/bootstrap_form/fields_test.rb +304 -0
- data/test/bootstrap_form/fields_with_errors_test.rb +109 -0
- data/test/bootstrap_form/form_builder_test.rb +49 -0
- data/test/bootstrap_form/horizontal_form_test.rb +159 -0
- data/test/bootstrap_form/inline_form_test.rb +68 -0
- data/test/bootstrap_form/input_group_test.rb +53 -0
- data/test/bootstrap_form/radios_and_checkboxes_test.rb +208 -0
- data/test/bootstrap_form/submit_test.rb +59 -0
- data/test/bootstrap_form/view_helpers_test.rb +99 -0
- data/test/gemfiles/5.2.gemfile +13 -0
- data/test/test_helper.rb +31 -69
- metadata +71 -258
- data/app/assets/stylesheets/rails_bootstrap_forms.css +0 -10
- data/lib/bootstrap_form/aliasing.rb +0 -35
- data/lib/bootstrap_form/helper.rb +0 -36
- data/lib/bootstrap_form/helpers/bootstrap.rb +0 -94
- data/lib/bootstrap_form/helpers/nested_form.rb +0 -33
- data/test/bootstrap_checkbox_test.rb +0 -144
- data/test/bootstrap_fields_test.rb +0 -152
- data/test/bootstrap_form_group_test.rb +0 -313
- data/test/bootstrap_form_test.rb +0 -276
- data/test/bootstrap_other_components_test.rb +0 -86
- data/test/bootstrap_radio_button_test.rb +0 -124
- data/test/bootstrap_selects_test.rb +0 -160
- data/test/dummy/Gemfile +0 -45
- data/test/dummy/Gemfile.lock +0 -120
- data/test/dummy/README.rdoc +0 -28
- data/test/dummy/Rakefile +0 -10
- data/test/dummy/app/assets/javascripts/application.js +0 -16
- data/test/dummy/app/assets/stylesheets/application.css +0 -13
- data/test/dummy/app/controllers/application_controller.rb +0 -5
- data/test/dummy/app/helpers/application_helper.rb +0 -2
- data/test/dummy/app/models/address.rb +0 -3
- data/test/dummy/app/models/faux_user.rb +0 -9
- data/test/dummy/app/models/super_user.rb +0 -2
- data/test/dummy/app/models/user.rb +0 -9
- data/test/dummy/app/views/layouts/application.html.erb +0 -14
- data/test/dummy/bin/bundle +0 -3
- data/test/dummy/config/application.rb +0 -23
- data/test/dummy/config/boot.rb +0 -4
- data/test/dummy/config/environment.rb +0 -5
- data/test/dummy/config/environments/development.rb +0 -29
- data/test/dummy/config/environments/production.rb +0 -80
- data/test/dummy/config/initializers/generic_migration.rb +0 -6
- data/test/dummy/config/initializers/secret_token.rb +0 -12
- data/test/dummy/config/initializers/session_store.rb +0 -3
- data/test/dummy/db/migrate/20130703191909_create_users.rb +0 -13
- data/test/dummy/db/migrate/20130703191937_create_addresses.rb +0 -13
- data/test/dummy/db/migrate/20130912171202_add_preferences_to_user.rb +0 -5
- data/test/dummy/db/migrate/20140327190145_add_terms_to_user.rb +0 -5
- data/test/dummy/db/migrate/20140922133133_add_type_to_users.rb +0 -5
- data/test/dummy/db/schema.rb +0 -38
- data/test/dummy/db/seeds.rb +0 -7
- data/test/dummy/db/test.sqlite3 +0 -0
- data/test/dummy/log/test.log +0 -18394
- data/test/dummy/public/404.html +0 -58
- data/test/dummy/public/422.html +0 -58
- data/test/dummy/public/500.html +0 -57
- data/test/dummy/public/robots.txt +0 -5
- data/test/dummy/test/fixtures/addresses.yml +0 -15
- data/test/dummy/test/fixtures/users.yml +0 -15
- data/test/dummy/test/models/address_test.rb +0 -7
- data/test/dummy/test/models/user_test.rb +0 -7
- data/test/dummy/test/test_helper.rb +0 -15
- data/test/special_form_class_models_test.rb +0 -43
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: 7189d09fd03c20905ee8e5a3d6cdfa81585f88670186ff34f13abf221402e4f0
|
|
4
|
+
data.tar.gz: 6158e79226dddbfc05bf62930d740da938c7aa76db5a8823647138299e8e8a53
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b948ce024eecd7b758eb7bac1a52ebaba4d5f492a01edd22856a29c4445d011c2ffe51e112479952a7fcdff98c1ef28ba44a5296d6ad56930c17d7778a1af7d7
|
|
7
|
+
data.tar.gz: 231c0dd82d743e5040959b8d92cc0ce17b6440d203a5c69625c239eca7961a28563b22434e7742153863d2b01ad50902d0430e88c2b3917a9c7e8cb7a087c10b
|
data/.gitignore
ADDED
data/.travis.yml
ADDED
data/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# Contributing
|
|
2
|
+
|
|
3
|
+
### 1. Check if issue or feature is available to work on
|
|
4
|
+
|
|
5
|
+
Make sure no one else is working on the same issue or feature. Search the issues
|
|
6
|
+
and pull requests for anything that looks like the issue or feature you want to
|
|
7
|
+
address. If no one else is working on your issue or feature, carry on with the
|
|
8
|
+
following steps.
|
|
9
|
+
|
|
10
|
+
### 2. Fork the repo
|
|
11
|
+
|
|
12
|
+
For the project. Optionally, create a branch you want to work on
|
|
13
|
+
|
|
14
|
+
### 3. Get it running locally
|
|
15
|
+
|
|
16
|
+
- Install the required dependencies with `bundle install`
|
|
17
|
+
- Run tests via: `bundle exec rake`
|
|
18
|
+
|
|
19
|
+
### 4. Hack away
|
|
20
|
+
|
|
21
|
+
- Try to keep your changes small. Consider making several smaller pull requests.
|
|
22
|
+
- Don't forget to add necessary tests.
|
|
23
|
+
- Update the README if necessary.
|
|
24
|
+
|
|
25
|
+
You may find using demo application useful for development and debugging.
|
|
26
|
+
|
|
27
|
+
- `cd demo`
|
|
28
|
+
- `rake db:schema:load`
|
|
29
|
+
- `rails s`
|
|
30
|
+
- Navigate to http://localhost:3000
|
|
31
|
+
|
|
32
|
+
### 5. Make a Pull Request
|
|
33
|
+
|
|
34
|
+
- If you never done it before read this: https://help.github.com/articles/about-pull-requests/
|
|
35
|
+
- When PR is submitted check if TravisCI ran all tests successfully didn't raise any issues
|
|
36
|
+
|
|
37
|
+
### 6. Done!
|
|
38
|
+
|
|
39
|
+
Somebody will shortly review your pull request and if everything is good will be
|
|
40
|
+
merged into master brach. Eventually gem will be published with your changes.
|
data/Gemfile
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
source "http://rubygems.org"
|
|
2
|
+
|
|
3
|
+
gemspec
|
|
4
|
+
|
|
5
|
+
# Uncomment and change rails version for testing purposes
|
|
6
|
+
# gem "rails", "~> 5.2.0.beta2"
|
|
7
|
+
|
|
8
|
+
group :test do
|
|
9
|
+
gem "minitest"
|
|
10
|
+
gem "diffy"
|
|
11
|
+
gem "equivalent-xml"
|
|
12
|
+
gem "sqlite3"
|
|
13
|
+
gem "coveralls", require: false
|
|
14
|
+
end
|
data/{MIT-LICENSE → LICENSE.md}
RENAMED
data/README.md
CHANGED
|
@@ -1,41 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
[](http://badge.fury.io/rb/comfy_bootstrap_form)
|
|
1
|
+
# ComfyBootstrapForm
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
**bootstrap_form** is a Rails form builder that makes it super easy to integrate
|
|
4
|
+
[Bootstrap 4](https://getbootstrap.com/) forms into your Rails application.
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
[](http://rubygems.org/gems/comfy_bootstrap_form)
|
|
7
|
+
[](http://rubygems.org/gems/comfy_bootstrap_form)
|
|
8
|
+
[](https://travis-ci.org/comfy/comfy-bootstrap-form)
|
|
9
|
+
[](https://gemnasium.com/comfy/comfy-bootstrap-form)
|
|
10
|
+
[](https://codeclimate.com/github/comfy/comfy-bootstrap-form)
|
|
11
|
+
[](https://coveralls.io/r/comfy/comfy-bootstrap-form?branch=master)
|
|
12
|
+
[](https://gitter.im/comfy/comfortable-mexican-sofa)
|
|
8
13
|
|
|
9
14
|
## Requirements
|
|
10
15
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
* Twitter Bootstrap 4.0+
|
|
16
|
+
- Rails 5.2+
|
|
17
|
+
- Bootstrap 4.0.0+
|
|
14
18
|
|
|
15
19
|
## Installation
|
|
16
20
|
|
|
17
|
-
Add
|
|
21
|
+
Add gem to your Gemfile and run `bundle install`
|
|
18
22
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Then:
|
|
22
|
-
|
|
23
|
-
`bundle`
|
|
24
|
-
|
|
25
|
-
Then require the CSS in your `application.css` file:
|
|
26
|
-
|
|
27
|
-
```css
|
|
28
|
-
/*
|
|
29
|
-
*= require rails_bootstrap_forms
|
|
30
|
-
*/
|
|
23
|
+
```ruby
|
|
24
|
+
gem "comfy_bootstrap_form", "~> 4.0.0"
|
|
31
25
|
```
|
|
32
26
|
|
|
33
27
|
## Usage
|
|
34
28
|
|
|
35
|
-
|
|
29
|
+
Here's a simple example:
|
|
36
30
|
|
|
37
31
|
```erb
|
|
38
|
-
<%=
|
|
32
|
+
<%= bootstrap_form_with model: @user do |f| %>
|
|
39
33
|
<%= f.email_field :email %>
|
|
40
34
|
<%= f.password_field :password %>
|
|
41
35
|
<%= f.check_box :remember_me %>
|
|
@@ -43,579 +37,220 @@ To get started, just use the `bootstrap_form_for` helper. Here's an example:
|
|
|
43
37
|
<% end %>
|
|
44
38
|
```
|
|
45
39
|
|
|
46
|
-
This
|
|
40
|
+
This will generate HTML similar to this:
|
|
47
41
|
|
|
48
42
|
```html
|
|
49
|
-
<form
|
|
43
|
+
<form action="/users" accept-charset="UTF-8" data-remote="true" method="post">
|
|
44
|
+
<input name="utf8" type="hidden" value="✓" />
|
|
45
|
+
<input type="hidden" name="authenticity_token" value="AUTH_TOKEN" />
|
|
50
46
|
<div class="form-group">
|
|
51
47
|
<label for="user_email">Email</label>
|
|
52
|
-
<input class="form-control"
|
|
48
|
+
<input class="form-control" type="email" name="user[email]" id="user_email" />
|
|
53
49
|
</div>
|
|
54
50
|
<div class="form-group">
|
|
55
51
|
<label for="user_password">Password</label>
|
|
56
|
-
<input class="form-control"
|
|
52
|
+
<input class="form-control" type="password" name="user[password]" id="user_password" />
|
|
57
53
|
</div>
|
|
58
|
-
<
|
|
59
|
-
<
|
|
60
|
-
<input name="user[remember_me]" type="hidden" value="0"
|
|
61
|
-
<input
|
|
62
|
-
|
|
54
|
+
<fieldset class="form-group">
|
|
55
|
+
<div class="form-check">
|
|
56
|
+
<input name="user[remember_me]" type="hidden" value="0" />
|
|
57
|
+
<input class="form-check-input" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me" />
|
|
58
|
+
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
|
59
|
+
</div>
|
|
60
|
+
</fieldset>
|
|
61
|
+
<div class="form-group">
|
|
62
|
+
<input type="submit" name="commit" value="Log In" class="btn" data-disable-with="Log In" />
|
|
63
63
|
</div>
|
|
64
|
-
<input class="btn btn-secondary" name="commit" type="submit" value="Log In">
|
|
65
64
|
</form>
|
|
66
65
|
```
|
|
67
66
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
use `bootstrap_nested_form_for` instead of `bootstrap_form_for`.
|
|
72
|
-
|
|
73
|
-
### bootstrap_form_tag
|
|
74
|
-
|
|
75
|
-
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:
|
|
76
|
-
|
|
77
|
-
```erb
|
|
78
|
-
<%= bootstrap_form_tag url: '/subscribe' do |f| %>
|
|
79
|
-
<%= f.email_field :email, value: 'name@example.com' %>
|
|
80
|
-
<%= f.submit %>
|
|
81
|
-
<% end %>
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
## Form Helpers
|
|
85
|
-
|
|
86
|
-
This gem wraps the following Rails form helpers:
|
|
87
|
-
|
|
88
|
-
* check_box
|
|
89
|
-
* collection_check_boxes
|
|
90
|
-
* collection_select
|
|
91
|
-
* color_field
|
|
92
|
-
* date_field
|
|
93
|
-
* date_select
|
|
94
|
-
* datetime_field
|
|
95
|
-
* datetime_local_field
|
|
96
|
-
* datetime_select
|
|
97
|
-
* email_field
|
|
98
|
-
* file_field
|
|
99
|
-
* grouped_collection_select
|
|
100
|
-
* hidden_field (not wrapped, but supported)
|
|
101
|
-
* month_field
|
|
102
|
-
* number_field
|
|
103
|
-
* password_field
|
|
104
|
-
* phone_field
|
|
105
|
-
* radio_button
|
|
106
|
-
* collection_radio_buttons
|
|
107
|
-
* range_field
|
|
108
|
-
* search_field
|
|
109
|
-
* select
|
|
110
|
-
* telephone_field
|
|
111
|
-
* text_area
|
|
112
|
-
* text_field
|
|
113
|
-
* time_field
|
|
114
|
-
* time_select
|
|
115
|
-
* time_zone_select
|
|
116
|
-
* url_field
|
|
117
|
-
* week_field
|
|
118
|
-
|
|
119
|
-
These helpers accept the same options as the standard Rails form helpers, with
|
|
120
|
-
a few extra options:
|
|
121
|
-
|
|
122
|
-
### Labels
|
|
123
|
-
|
|
124
|
-
Use the `label` option if you want to specify the field's label text:
|
|
125
|
-
|
|
126
|
-
```erb
|
|
127
|
-
<%= f.password_field :password_confirmation, label: "Confirm Password" %>
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
To hide a label, use the `hide_label: true` option. This adds the `sr-only`
|
|
131
|
-
class, which keeps your labels accessible to those using screen readers.
|
|
132
|
-
|
|
133
|
-
```erb
|
|
134
|
-
<%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %>
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
To add custom classes to the field's label:
|
|
138
|
-
|
|
139
|
-
```erb
|
|
140
|
-
<%= f.text_field :email, label_class: "custom-class" %>
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
#### Required Fields
|
|
144
|
-
|
|
145
|
-
A label that is associated with a required field is automatically annotated with
|
|
146
|
-
a `required` CSS class. You are free to add any appropriate CSS to style
|
|
147
|
-
required fields as desired. One example would be to automatically add an
|
|
148
|
-
asterisk to the end of the label:
|
|
149
|
-
|
|
150
|
-
```css
|
|
151
|
-
label.required:after {
|
|
152
|
-
content:" *";
|
|
153
|
-
}
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
The label `required` class is determined based on the definition of a presence
|
|
157
|
-
validator with the associated model attribute. Presently this is one of:
|
|
158
|
-
ActiveRecord::Validations::PresenceValidator or
|
|
159
|
-
ActiveModel::Validations::PresenceValidator.
|
|
160
|
-
|
|
161
|
-
In cases where this behavior is undesirable, use the `skip_required` option:
|
|
162
|
-
|
|
163
|
-
```erb
|
|
164
|
-
<%= f.password_field :password, label: "New Password", skip_required: true %>
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
### Input Elements / Controls
|
|
168
|
-
|
|
169
|
-
To specify the class of the generated input, use the `control_class` option:
|
|
170
|
-
|
|
171
|
-
```erb
|
|
172
|
-
<%= f.text_field :email, control_class: "custom-class" %>
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
### Help Text
|
|
176
|
-
|
|
177
|
-
To add help text, use the `help` option:
|
|
178
|
-
|
|
179
|
-
```erb
|
|
180
|
-
<%= f.password_field :password, help: "Must be at least 6 characters long" %>
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
This gem is also aware of help messages in locale translation files (i18n):
|
|
184
|
-
|
|
185
|
-
```yml
|
|
186
|
-
en:
|
|
187
|
-
activerecord:
|
|
188
|
-
help:
|
|
189
|
-
user:
|
|
190
|
-
password: "A good password should be at least six characters long"
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
If your model name has multiple words (like `SuperUser`), the key on the
|
|
194
|
-
translation file should be underscored (`super_user`).
|
|
195
|
-
|
|
196
|
-
You can override help translations for a particular field by passing the `help`
|
|
197
|
-
option or turn them off completely by passing `help: false`.
|
|
67
|
+
Feel free to take a look at the [Demo App](/demo) to see how everything renders.
|
|
68
|
+
Specifically see [form.html.erb](/demo/app/views/bootstrap/form.html.erb) template
|
|
69
|
+
for all kinds of different form configurations you can have.
|
|
198
70
|
|
|
199
|
-
|
|
71
|
+
## Supported form field helpers
|
|
200
72
|
|
|
201
|
-
|
|
202
|
-
*without* the 'glyphicon' prefix:
|
|
73
|
+
This gem wraps most of the default form field helpers. Here's the current list:
|
|
203
74
|
|
|
204
|
-
```erb
|
|
205
|
-
<%= f.text_field :login, icon: "user" %>
|
|
206
75
|
```
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
<label class="form-control-label" for="user_login">Login</label>
|
|
213
|
-
<input class="form-control" id="user_login" name="user[login]" type="text" />
|
|
214
|
-
<span class="glyphicon glyphicon-user form-control-feedback"></span>
|
|
215
|
-
</div>
|
|
76
|
+
color_field file_field phone_field text_field
|
|
77
|
+
date_field month_field range_field time_field
|
|
78
|
+
datetime_field number_field search_field url_field
|
|
79
|
+
email_field password_field text_area week_field
|
|
80
|
+
collection_radio_buttons collection_check_boxes
|
|
216
81
|
```
|
|
217
82
|
|
|
218
|
-
|
|
83
|
+
Helpers for DateTime selects are not implemented as it's better to choose one of
|
|
84
|
+
many Javascript timepickers out there. For example, [Flatpickr](https://github.com/chmln/flatpickr)
|
|
85
|
+
is a good one.
|
|
219
86
|
|
|
220
|
-
|
|
87
|
+
Singular `radio_button` is not implemented as it doesn't make sense to wrap one
|
|
88
|
+
radio button input in Bootstrap markup.
|
|
221
89
|
|
|
222
|
-
|
|
223
|
-
<%= f.text_field :price, prepend: "$", append: ".00" %>
|
|
224
|
-
```
|
|
90
|
+
#### Radio Buttons and Checkboxes
|
|
225
91
|
|
|
226
|
-
|
|
227
|
-
|
|
92
|
+
To render collection of radio buttons or checkboxes we use the same helper that
|
|
93
|
+
comes with Rails. The only difference is that it doesn't accept a block. This
|
|
94
|
+
gem takes care of rendering of labels and inputs for you.
|
|
228
95
|
|
|
229
96
|
```erb
|
|
230
|
-
<%=
|
|
97
|
+
<%= form.collection_radio_buttons :choices, ["red", "green", "blue"], :to_s, :to_s %>
|
|
98
|
+
<%= form.collection_check_boxes :choices, Choices.all, :id, :label %>
|
|
231
99
|
```
|
|
232
100
|
|
|
233
|
-
|
|
101
|
+
You may choose to render inputs inline:
|
|
234
102
|
|
|
235
103
|
```erb
|
|
236
|
-
<%=
|
|
104
|
+
<%= form.collection_check_boxes :choices, Choices.all, :id, :label, bootstrap: {inline: true} %>
|
|
237
105
|
```
|
|
238
106
|
|
|
239
|
-
|
|
107
|
+
#### Submit
|
|
240
108
|
|
|
241
|
-
|
|
242
|
-
the `wrapper: { class: 'additional-class', data: { foo: 'bar' } }` option.
|
|
109
|
+
Submit button is automatically wrapped with Bootstrap markup. Here's how it looks:
|
|
243
110
|
|
|
244
111
|
```erb
|
|
245
|
-
<%=
|
|
112
|
+
<%= form.submit %>
|
|
113
|
+
<%= form.submit "Submit" %>
|
|
114
|
+
<%= form.primary %>
|
|
246
115
|
```
|
|
247
116
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
```erb
|
|
251
|
-
<div class="form-group has-warning" data-foo="bar">
|
|
252
|
-
<label class="form-control-label" for="user_name">Id</label>
|
|
253
|
-
<input class="form-control" id="user_name" name="user[name]" type="text">
|
|
254
|
-
</div>
|
|
255
|
-
```
|
|
256
|
-
|
|
257
|
-
You still can use `wrapper_class` option to set only a css class. This is just a short form of `wrapper: { class: 'additional-class' }`.
|
|
258
|
-
|
|
259
|
-
### Selects
|
|
260
|
-
|
|
261
|
-
Our select helper accepts the same arguments as the [default Rails helper](http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select). Here's an example of how you pass both options and html_options hashes:
|
|
262
|
-
|
|
263
|
-
```erb
|
|
264
|
-
<%= f.select :product, [[1, "Apple"], [2, "Grape"]], { label: "Choose your favorite fruit:" }, { class: "selectpicker" } %>
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
### Checkboxes and Radios
|
|
268
|
-
|
|
269
|
-
Checkboxes and radios should be placed inside of a `form_group` to render
|
|
270
|
-
properly. The following example ensures that the entire form group will display
|
|
271
|
-
an error if an associated validations fails:
|
|
117
|
+
You can also pass in a block of content that will be appended next to the button:
|
|
272
118
|
|
|
273
119
|
```erb
|
|
274
|
-
<%=
|
|
275
|
-
|
|
276
|
-
<%= f.radio_button :skill_level, 1, label: "Intermediate" %>
|
|
277
|
-
<%= f.radio_button :skill_level, 2, label: "Advanced" %>
|
|
278
|
-
<% end %>
|
|
279
|
-
|
|
280
|
-
<%= f.form_group :terms do %>
|
|
281
|
-
<%= f.check_box :terms, label: "I agree to the Terms of Service" %>
|
|
282
|
-
<% end %>
|
|
283
|
-
```
|
|
284
|
-
|
|
285
|
-
You can also create a checkbox using a block:
|
|
286
|
-
|
|
287
|
-
```erb
|
|
288
|
-
<%= f.form_group :terms, label: { text: "Optional Label" } do %>
|
|
289
|
-
<%= f.check_box :terms do %>
|
|
290
|
-
You need to check this box to accept our terms of service and privacy policy
|
|
291
|
-
<% end %>
|
|
292
|
-
<% end %>
|
|
293
|
-
```
|
|
294
|
-
|
|
295
|
-
To display checkboxes and radios inline, pass the `inline: true` option:
|
|
296
|
-
|
|
297
|
-
```erb
|
|
298
|
-
<%= f.form_group :skill_level, label: { text: "Skill" } do %>
|
|
299
|
-
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true %>
|
|
300
|
-
<%= f.radio_button :skill_level, 1, label: "Intermediate", inline: true %>
|
|
301
|
-
<%= f.radio_button :skill_level, 2, label: "Advanced", inline: true %>
|
|
120
|
+
<%= form.submit "Save" do %>
|
|
121
|
+
<a href="/" class="btn btn-link">Cancel</a>
|
|
302
122
|
<% end %>
|
|
303
123
|
```
|
|
304
124
|
|
|
305
|
-
####
|
|
125
|
+
#### Plaintext helper
|
|
306
126
|
|
|
307
|
-
|
|
308
|
-
`form_group` and the `radio_button`s or `check_box`es for you:
|
|
127
|
+
There's an additional field helper that render read-only plain text values:
|
|
309
128
|
|
|
310
129
|
```erb
|
|
311
|
-
<%=
|
|
312
|
-
<%= f.collection_check_boxes :skills, Skill.all, :id, :name %>
|
|
130
|
+
<%= form.plaintext :value %>
|
|
313
131
|
```
|
|
314
132
|
|
|
315
|
-
|
|
316
|
-
* `:label`: Customize the `form_group`'s label
|
|
317
|
-
* `:hide_label`: Pass true to hide the `form_group`'s label
|
|
318
|
-
* `:help`: Add a help span to the `form_group`
|
|
319
|
-
* Other options will be forwarded to the `radio_button`/`check_box` method
|
|
320
|
-
|
|
321
|
-
### Static Controls
|
|
322
|
-
|
|
323
|
-
You can create a static control like this:
|
|
324
|
-
|
|
325
|
-
```erb
|
|
326
|
-
<%= f.static_control :email %>
|
|
327
|
-
```
|
|
328
|
-
|
|
329
|
-
Here's the output:
|
|
330
|
-
|
|
331
|
-
```html
|
|
332
|
-
<div class="form-group">
|
|
333
|
-
<label class="col-sm-2 form-control-label" for="user_email">Email</label>
|
|
334
|
-
<div class="col-sm-10">
|
|
335
|
-
<p class="form-control-static">test@email.com</p>
|
|
336
|
-
</div>
|
|
337
|
-
</div>
|
|
338
|
-
```
|
|
133
|
+
#### Form Group
|
|
339
134
|
|
|
340
|
-
|
|
135
|
+
When you need to wrap arbitrary content in markup that renders correctly in
|
|
136
|
+
Bootstrap form:
|
|
341
137
|
|
|
342
138
|
```erb
|
|
343
|
-
<%=
|
|
344
|
-
|
|
139
|
+
<%= form.form_group do %>
|
|
140
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
141
|
+
tempor incididunt ut labore et dolore magna aliqua.
|
|
345
142
|
<% end %>
|
|
346
143
|
```
|
|
347
144
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
The multiple selects that the date and time helpers (`date_select`,
|
|
351
|
-
`time_select`, `datetime_select`) generate are wrapped inside a
|
|
352
|
-
`div.rails-bootstrap-forms-[date|time|datetime]-select` tag. This is because
|
|
353
|
-
Bootstrap automatically stylizes ours controls as `block`s. This wrapper fix
|
|
354
|
-
this defining these selects as `inline-block` and a width of `auto`.
|
|
355
|
-
|
|
356
|
-
### Submit Buttons
|
|
357
|
-
|
|
358
|
-
The `btn btn-secondary` css classes are automatically added to your submit
|
|
359
|
-
buttons.
|
|
360
|
-
|
|
361
|
-
```erb
|
|
362
|
-
<%= f.submit %>
|
|
363
|
-
```
|
|
364
|
-
|
|
365
|
-
You can also use the `primary` helper, which adds `btn btn-primary` to your
|
|
366
|
-
submit button:
|
|
367
|
-
|
|
368
|
-
```erb
|
|
369
|
-
<%= f.primary "Optional Label" %>
|
|
370
|
-
```
|
|
371
|
-
|
|
372
|
-
You can specify your own classes like this:
|
|
373
|
-
|
|
374
|
-
```erb
|
|
375
|
-
<%= f.submit "Log In", class: "btn btn-success" %>
|
|
376
|
-
```
|
|
377
|
-
|
|
378
|
-
### Accessing Rails Form Helpers
|
|
379
|
-
|
|
380
|
-
If you want to use the original Rails form helpers for a particular field,
|
|
381
|
-
append `_without_bootstrap` to the helper:
|
|
382
|
-
|
|
383
|
-
```erb
|
|
384
|
-
<%= f.text_field_without_bootstrap :email %>
|
|
385
|
-
```
|
|
386
|
-
|
|
387
|
-
## Form Styles
|
|
388
|
-
|
|
389
|
-
By default, your forms will stack labels on top of controls and your controls
|
|
390
|
-
will grow to 100% of the available width.
|
|
391
|
-
|
|
392
|
-
### Inline Forms
|
|
393
|
-
|
|
394
|
-
To use an inline-layout form, use the `layout: :inline` option. To hide labels,
|
|
395
|
-
use the `hide_label: true` option, which keeps your labels accessible to those
|
|
396
|
-
using screen readers.
|
|
145
|
+
If you need to add a label:
|
|
397
146
|
|
|
398
147
|
```erb
|
|
399
|
-
<%=
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
<%= f.check_box :remember_me %>
|
|
403
|
-
<%= f.submit %>
|
|
148
|
+
<%= form.form_group bootstrap: {label: {text: "Lorem"}} do %>
|
|
149
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
150
|
+
tempor incididunt ut labore et dolore magna aliqua.
|
|
404
151
|
<% end %>
|
|
405
152
|
```
|
|
406
153
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
```erb
|
|
410
|
-
<%= f.password_field :password, skip_label: true %>
|
|
411
|
-
```
|
|
412
|
-
|
|
413
|
-
### Horizontal Forms
|
|
154
|
+
## Bootstrap options
|
|
414
155
|
|
|
415
|
-
|
|
416
|
-
`layout: :horizontal` option. You should specify both `label_col` and
|
|
417
|
-
`control_col` css classes as well (they default to `col-sm-2` and `col-sm-10`).
|
|
156
|
+
#### Horizontal Form
|
|
418
157
|
|
|
419
|
-
|
|
420
|
-
|
|
158
|
+
By default form is rendered as a stack. Labels are above inputs, and inputs
|
|
159
|
+
take up 100% of the width. You can change form layout to `horizontal` to put
|
|
160
|
+
labels and corresponding inputs side by side:
|
|
421
161
|
|
|
422
162
|
```erb
|
|
423
|
-
<%=
|
|
424
|
-
<%=
|
|
425
|
-
<%= f.password_field :password %>
|
|
426
|
-
<%= f.form_group do %>
|
|
427
|
-
<%= f.check_box :remember_me %>
|
|
428
|
-
<% end %>
|
|
429
|
-
<%= f.form_group do %>
|
|
430
|
-
<%= f.submit %>
|
|
431
|
-
<% end %>
|
|
163
|
+
<%= bootstrap_form_with model: @user, bootstrap: {layout: :horizontal} do |form| %>
|
|
164
|
+
<%= form.text_field :email %>
|
|
432
165
|
<% end %>
|
|
433
166
|
```
|
|
434
167
|
|
|
435
|
-
|
|
168
|
+
There are options that control column width and label alignment. Here's how it
|
|
169
|
+
would look with all the defaults:
|
|
436
170
|
|
|
437
171
|
```erb
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
172
|
+
<%
|
|
173
|
+
bootstrap_options = {
|
|
174
|
+
layout: "horizontal",
|
|
175
|
+
label_col_class: "col-sm-2",
|
|
176
|
+
control_col_class: "col-sm-10",
|
|
177
|
+
label_align_class: "text-sm-right"
|
|
178
|
+
}
|
|
179
|
+
%>
|
|
180
|
+
<%= bootstrap_form_with model: @user, bootstrap: bootstrap_options do |form| %>
|
|
181
|
+
<%= form.text_field :email %>
|
|
444
182
|
<% end %>
|
|
445
183
|
```
|
|
446
184
|
|
|
447
|
-
|
|
185
|
+
#### Inline Form
|
|
448
186
|
|
|
449
|
-
|
|
187
|
+
You may choose to render form elements in one line. Please note that this layout
|
|
188
|
+
won't render all form elements. Things like errors messages won't show up right.
|
|
450
189
|
|
|
451
190
|
```erb
|
|
452
|
-
<%=
|
|
453
|
-
<%=
|
|
454
|
-
<%=
|
|
455
|
-
<%= f.text_field :inches, layout: :default %>
|
|
456
|
-
<%= f.form_group do %>
|
|
457
|
-
<%= f.submit %>
|
|
458
|
-
<% end %>
|
|
191
|
+
<%= bootstrap_form_with url: "/search" do |form| %>
|
|
192
|
+
<%= form.text_field :query %>
|
|
193
|
+
<%= form.submit "Search" %>
|
|
459
194
|
<% end %>
|
|
460
195
|
```
|
|
461
196
|
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
### Inline Errors
|
|
197
|
+
#### Label
|
|
465
198
|
|
|
466
|
-
|
|
467
|
-
error will be displayed below the field. Rails normally wraps the fields in a
|
|
468
|
-
div (field_with_errors), but this behavior is suppressed. Here's an example:
|
|
469
|
-
|
|
470
|
-
```html
|
|
471
|
-
<div class="form-group has-danger">
|
|
472
|
-
<label class="form-control-label" for="user_email">Email</label>
|
|
473
|
-
<input class="form-control" id="user_email" name="user[email]" type="email" value="">
|
|
474
|
-
<span class="form-control-feedback">can't be blank</span>
|
|
475
|
-
</div>
|
|
476
|
-
```
|
|
477
|
-
|
|
478
|
-
You can turn off inline errors for the entire form like this:
|
|
199
|
+
You can change label generated by Rails to something else:
|
|
479
200
|
|
|
480
201
|
```erb
|
|
481
|
-
<%=
|
|
482
|
-
...
|
|
483
|
-
<% end %>
|
|
484
|
-
```
|
|
485
|
-
|
|
486
|
-
### Label Errors
|
|
487
|
-
|
|
488
|
-
You can also display validation errors in the field's label; just turn
|
|
489
|
-
on the `:label_errors` option. Here's an example:
|
|
490
|
-
|
|
491
|
-
```
|
|
492
|
-
<%= bootstrap_form_for(@user, label_errors: true) do |f| %>
|
|
493
|
-
...
|
|
494
|
-
<% end %>
|
|
202
|
+
<%= form.text_field :value, bootstrap: {label: {text: "Custom Label"}} %>
|
|
495
203
|
```
|
|
496
204
|
|
|
497
|
-
|
|
498
|
-
`:inline_errors`. If you want both turned on, you can do that too:
|
|
499
|
-
|
|
500
|
-
```
|
|
501
|
-
<%= bootstrap_form_for(@user, label_errors: true, inline_errors: true) do |f| %>
|
|
502
|
-
...
|
|
503
|
-
<% end %>
|
|
504
|
-
```
|
|
505
|
-
|
|
506
|
-
### Alert Messages
|
|
507
|
-
|
|
508
|
-
To display an error message with an error summary, you can use the
|
|
509
|
-
`alert_message` helper. This won't output anything unless a model validation
|
|
510
|
-
has failed.
|
|
511
|
-
|
|
512
|
-
```erb
|
|
513
|
-
<%= f.alert_message "Please fix the errors below." %>
|
|
514
|
-
```
|
|
515
|
-
|
|
516
|
-
Which outputs:
|
|
517
|
-
|
|
518
|
-
```html
|
|
519
|
-
<div class="alert alert-danger">
|
|
520
|
-
<p>Please fix the errors below.</p>
|
|
521
|
-
<ul class="rails-bootstrap-forms-error-summary">
|
|
522
|
-
<li>Email can't be blank</li>
|
|
523
|
-
</ul>
|
|
524
|
-
</div>
|
|
525
|
-
```
|
|
526
|
-
|
|
527
|
-
You can turn off the error summary like this:
|
|
205
|
+
You may hide label completely (it's still there for screen readers):
|
|
528
206
|
|
|
529
207
|
```erb
|
|
530
|
-
<%=
|
|
208
|
+
<%= form.text_field :value, bootstrap: {label: {hide: true}} %>
|
|
531
209
|
```
|
|
532
210
|
|
|
533
|
-
|
|
211
|
+
Custom CSS class on the label tag? Sure:
|
|
534
212
|
|
|
535
213
|
```erb
|
|
536
|
-
<%=
|
|
214
|
+
<%= form.text_field :value, bootstrap: {label: {class: "custom-label"}} %>
|
|
537
215
|
```
|
|
538
216
|
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
```html
|
|
542
|
-
<ul class="rails-bootstrap-forms-error-summary">
|
|
543
|
-
<li>Email can't be blank</li>
|
|
544
|
-
</ul>
|
|
545
|
-
```
|
|
217
|
+
#### Help Text
|
|
546
218
|
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
If you want to display a custom inline error for a specific attribute not
|
|
550
|
-
represented by a form field, use the `errors_on` helper.
|
|
219
|
+
You may attach help text for pretty much any field type:
|
|
551
220
|
|
|
552
221
|
```erb
|
|
553
|
-
<%=
|
|
222
|
+
<%= form.text_field :value, bootstrap: {help: "Short helpful message"} %>
|
|
554
223
|
```
|
|
555
224
|
|
|
556
|
-
|
|
225
|
+
#### Append and Prepend
|
|
557
226
|
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
```
|
|
561
|
-
|
|
562
|
-
You can hide the attribute name like this:
|
|
227
|
+
Bootstrap allows prepending and appending content to fields via `input-group`.
|
|
228
|
+
Here's how this looks:
|
|
563
229
|
|
|
564
230
|
```erb
|
|
565
|
-
<%=
|
|
231
|
+
<%= form.text_field :value, bootstrap: {prepend: "$", append: "%"} %>
|
|
566
232
|
```
|
|
567
233
|
|
|
568
|
-
|
|
234
|
+
If you want to use something like a button, or other html content do this:
|
|
569
235
|
|
|
570
|
-
```
|
|
571
|
-
|
|
236
|
+
```erb
|
|
237
|
+
<% button_html = capture do %>
|
|
238
|
+
<button class="btn btn-danger">Don't Press</button>
|
|
239
|
+
<% end %>
|
|
240
|
+
<%= form.text_field :value, bootstrap: {append: {html: button_html}} %>
|
|
572
241
|
```
|
|
573
242
|
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
bootstrap_form follows standard rails conventions so it's i18n-ready. See more
|
|
577
|
-
here: http://guides.rubyonrails.org/i18n.html#translations-for-active-record-models
|
|
578
|
-
|
|
579
|
-
## Code Triage page
|
|
580
|
-
|
|
581
|
-
http://www.codetriage.com/potenza/bootstrap_form
|
|
582
|
-
|
|
583
|
-
## Contributing
|
|
584
|
-
|
|
585
|
-
We love pull requests! Here's a quick guide for contributing:
|
|
586
|
-
|
|
587
|
-
1. Fork the repo.
|
|
588
|
-
|
|
589
|
-
2. Install the required dependencies.
|
|
590
|
-
|
|
591
|
-
```
|
|
592
|
-
bundle install
|
|
593
|
-
bundle exec appraisal install
|
|
594
|
-
```
|
|
243
|
+
### Gotchas
|
|
595
244
|
|
|
596
|
-
|
|
245
|
+
For inline radio buttons and check boxes you need to add custom css for error
|
|
246
|
+
messages show up (see: https://github.com/twbs/bootstrap/issues/25540):
|
|
597
247
|
|
|
248
|
+
```css
|
|
249
|
+
.invalid-feeback {
|
|
250
|
+
display: block
|
|
251
|
+
}
|
|
598
252
|
```
|
|
599
|
-
$ bundle exec rake -f test/dummy/Rakefile db:create db:migrate RAILS_ENV=test
|
|
600
|
-
$ bundle exec appraisal rake test
|
|
601
|
-
```
|
|
602
|
-
|
|
603
|
-
4. Add tests for your change.
|
|
604
|
-
|
|
605
|
-
5. Add your changes and make your test(s) pass. Following the conventions you
|
|
606
|
-
see used in the source will increase the chance that your pull request is
|
|
607
|
-
accepted right away.
|
|
608
|
-
|
|
609
|
-
6. Update the README if necessary.
|
|
610
|
-
|
|
611
|
-
7. Add a line to the CHANGELOG for your bug fix or feature.
|
|
612
|
-
|
|
613
|
-
8. Push to your fork and submit a pull request.
|
|
614
|
-
|
|
615
|
-
## Contributors
|
|
616
|
-
|
|
617
|
-
https://github.com/bootstrap-ruby/rails-bootstrap-forms/graphs/contributors
|
|
618
253
|
|
|
619
|
-
|
|
254
|
+
---
|
|
620
255
|
|
|
621
|
-
|
|
256
|
+
Copyright 2018 Oleg Khabarov, Released under the [MIT License](LICENCE.md)
|