comfy_bootstrap_form 4.0.0.beta1 → 4.0.0.beta2
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
-
[![Gem Version](https://badge.fury.io/rb/comfy_bootstrap_form.svg)](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
|
+
[![Gem Version](https://img.shields.io/gem/v/comfy_bootstrap_form.svg?style=flat)](http://rubygems.org/gems/comfy_bootstrap_form)
|
7
|
+
[![Gem Downloads](https://img.shields.io/gem/dt/comfy_bootstrap_form.svg?style=flat)](http://rubygems.org/gems/comfy_bootstrap_form)
|
8
|
+
[![Build Status](https://img.shields.io/travis/comfy/comfy-bootstrap-form.svg?style=flat)](https://travis-ci.org/comfy/comfy-bootstrap-form)
|
9
|
+
[![Dependency Status](https://img.shields.io/gemnasium/comfy/comfy-bootstrap-form.svg?style=flat)](https://gemnasium.com/comfy/comfy-bootstrap-form)
|
10
|
+
[![Code Climate](https://img.shields.io/codeclimate/maintainability/comfy/comfy-bootstrap-form.svg?style=flat)](https://codeclimate.com/github/comfy/comfy-bootstrap-form)
|
11
|
+
[![Coverage Status](https://img.shields.io/coveralls/comfy/comfy-bootstrap-form.svg?style=flat)](https://coveralls.io/r/comfy/comfy-bootstrap-form?branch=master)
|
12
|
+
[![Gitter](https://badges.gitter.im/comfy/comfortable-mexican-sofa.svg)](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)
|