Merge pull request #1112 from jorge-d/master
Add support for Foundation 5
This commit is contained in:
commit
6f2a610150
|
@ -55,9 +55,9 @@ For more information see the generator output, our
|
||||||
[example application code](https://github.com/rafaelfranca/simple_form-bootstrap) and
|
[example application code](https://github.com/rafaelfranca/simple_form-bootstrap) and
|
||||||
[the live example app](http://simple-form-bootstrap.plataformatec.com.br/).
|
[the live example app](http://simple-form-bootstrap.plataformatec.com.br/).
|
||||||
|
|
||||||
### Zurb Foundation 3
|
### Zurb Foundation 5
|
||||||
|
|
||||||
To generate wrappers that are compatible with [Zurb Foundation 3](http://foundation.zurb.com/), pass
|
To generate wrappers that are compatible with [Zurb Foundation 5](http://foundation.zurb.com/), pass
|
||||||
the `foundation` option to the generator, like this:
|
the `foundation` option to the generator, like this:
|
||||||
|
|
||||||
```console
|
```console
|
||||||
|
@ -68,7 +68,7 @@ Please note that the Foundation wrapper does not support the `:hint` option by d
|
||||||
enable hints, please uncomment the appropriate line in `config/initializers/simple_form_foundation.rb`.
|
enable hints, please uncomment the appropriate line in `config/initializers/simple_form_foundation.rb`.
|
||||||
You will need to provide your own CSS styles for hints.
|
You will need to provide your own CSS styles for hints.
|
||||||
|
|
||||||
Please see the [instructions on how to install Foundation in a Rails app](http://foundation.zurb.com/old-docs/f3/rails.php).
|
Please see the [instructions on how to install Foundation in a Rails app](http://foundation.zurb.com/docs/applications.html).
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,13 @@
|
||||||
# Use this setup block to configure all options available in SimpleForm.
|
# Use this setup block to configure all options available in SimpleForm.
|
||||||
SimpleForm.setup do |config|
|
SimpleForm.setup do |config|
|
||||||
config.wrappers :foundation, class: :input, hint_class: :field_with_hint, error_class: :error do |b|
|
# Don't forget to edit this file to adapt it to your needs (specially
|
||||||
|
# all the grid-related classes)
|
||||||
|
#
|
||||||
|
# Please note that hints are commented out by default since Foundation
|
||||||
|
# does't provide styles for hints. You will need to provide your own CSS styles for hints.
|
||||||
|
# Uncomment them to enable hints.
|
||||||
|
|
||||||
|
config.wrappers :vertical_form, class: :input, hint_class: :field_with_hint, error_class: :error do |b|
|
||||||
b.use :html5
|
b.use :html5
|
||||||
b.use :placeholder
|
b.use :placeholder
|
||||||
b.optional :maxlength
|
b.optional :maxlength
|
||||||
|
@ -10,17 +17,91 @@ SimpleForm.setup do |config|
|
||||||
b.use :label_input
|
b.use :label_input
|
||||||
b.use :error, wrap_with: { tag: :small, class: :error }
|
b.use :error, wrap_with: { tag: :small, class: :error }
|
||||||
|
|
||||||
# Uncomment the following line to enable hints. The line is commented out by default since Foundation
|
# b.use :hint, wrap_with: { tag: :span, class: :hint }
|
||||||
# does't provide styles for hints. You will need to provide your own CSS styles for hints.
|
end
|
||||||
|
|
||||||
|
config.wrappers :horizontal_form, tag: 'div', class: 'row', hint_class: :field_with_hint, error_class: :error do |b|
|
||||||
|
b.use :html5
|
||||||
|
b.use :placeholder
|
||||||
|
b.optional :maxlength
|
||||||
|
b.optional :pattern
|
||||||
|
b.optional :min_max
|
||||||
|
b.optional :readonly
|
||||||
|
|
||||||
|
b.wrapper :label_wrapper, tag: :div, class: 'small-3 columns' do |ba|
|
||||||
|
ba.use :label, class: 'right inline'
|
||||||
|
end
|
||||||
|
|
||||||
|
b.wrapper :right_input_wrapper, tag: :div, class: 'small-9 columns' do |ba|
|
||||||
|
ba.use :input
|
||||||
|
ba.use :error, wrap_with: { tag: :small, class: :error }
|
||||||
|
# ba.use :hint, wrap_with: { tag: :span, class: :hint }
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'row' do |b|
|
||||||
|
b.use :html5
|
||||||
|
b.optional :readonly
|
||||||
|
|
||||||
|
b.wrapper :container_wrapper, tag: 'div', class: 'small-offset-3 small-9 columns' do |ba|
|
||||||
|
ba.wrapper :tag => 'label', :class => 'checkbox' do |bb|
|
||||||
|
bb.use :input
|
||||||
|
bb.use :label_text
|
||||||
|
end
|
||||||
|
|
||||||
|
ba.use :error, wrap_with: { tag: :small, class: :error }
|
||||||
|
# ba.use :hint, wrap_with: { tag: :span, class: :hint }
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
# Foundation does not provide a way to handle inline forms
|
||||||
|
# This wrapper can be used to create an inline form
|
||||||
|
# by hiding that labels on every screen sizes ('hidden-for-small-up').
|
||||||
|
#
|
||||||
|
# Note that you need to adapt this wrapper to your needs. If you need a 4
|
||||||
|
# columns form then change the wrapper class to 'small-3', if you need
|
||||||
|
# only two use 'small-6' and so on.
|
||||||
|
config.wrappers :inline_form, tag: 'div', class: 'column small-4', hint_class: :field_with_hint, error_class: :error do |b|
|
||||||
|
b.use :html5
|
||||||
|
b.use :placeholder
|
||||||
|
b.optional :maxlength
|
||||||
|
b.optional :pattern
|
||||||
|
b.optional :min_max
|
||||||
|
b.optional :readonly
|
||||||
|
|
||||||
|
b.use :label, class: 'hidden-for-small-up'
|
||||||
|
b.use :input
|
||||||
|
|
||||||
|
b.use :error, wrap_with: { tag: :small, class: :error }
|
||||||
|
# b.use :hint, wrap_with: { tag: :span, class: :hint }
|
||||||
|
end
|
||||||
|
|
||||||
|
# Examples of use:
|
||||||
|
# - wrapper_html: {class: 'row'}, custom_wrapper_html: {class: 'column small-12'}
|
||||||
|
# - custom_wrapper_html: {class: 'column small-3 end'}
|
||||||
|
config.wrappers :customizable_wrapper, tag: 'div', error_class: :error do |b|
|
||||||
|
b.use :html5
|
||||||
|
b.optional :readonly
|
||||||
|
|
||||||
|
b.wrapper :custom_wrapper, tag: :div do |ba|
|
||||||
|
ba.use :label_input
|
||||||
|
end
|
||||||
|
|
||||||
|
b.use :error, wrap_with: { tag: :small, class: :error }
|
||||||
# b.use :hint, wrap_with: { tag: :span, class: :hint }
|
# b.use :hint, wrap_with: { tag: :span, class: :hint }
|
||||||
end
|
end
|
||||||
|
|
||||||
# CSS class for buttons
|
# CSS class for buttons
|
||||||
config.button_class = 'button'
|
config.button_class = 'button'
|
||||||
|
|
||||||
|
# Set this to div to make the checkbox and radio properly work
|
||||||
|
# otherwise simple_form adds a label tag instead of a div arround
|
||||||
|
# the nested label
|
||||||
|
config.item_wrapper_tag = :div
|
||||||
|
|
||||||
# CSS class to add for error notification helper.
|
# CSS class to add for error notification helper.
|
||||||
config.error_notification_class = 'alert-box alert'
|
config.error_notification_class = 'alert-box alert'
|
||||||
|
|
||||||
# The default wrapper to be used by the FormBuilder.
|
# The default wrapper to be used by the FormBuilder.
|
||||||
config.default_wrapper = :foundation
|
config.default_wrapper = :vertical_form
|
||||||
end
|
end
|
||||||
|
|
|
@ -29,8 +29,8 @@ class SimpleFormGeneratorTest < Rails::Generators::TestCase
|
||||||
run_generator %w(--foundation)
|
run_generator %w(--foundation)
|
||||||
assert_file 'config/initializers/simple_form.rb',
|
assert_file 'config/initializers/simple_form.rb',
|
||||||
/config\.default_wrapper = :default/, /config\.boolean_style = :nested/
|
/config\.default_wrapper = :default/, /config\.boolean_style = :nested/
|
||||||
assert_file 'config/initializers/simple_form_foundation.rb', /config\.wrappers :foundation/,
|
assert_file 'config/initializers/simple_form_foundation.rb', /config\.wrappers :vertical_form/,
|
||||||
/config\.default_wrapper = :foundation/
|
/config\.default_wrapper = :vertical_form/, /config\.item_wrapper_tag = :div/
|
||||||
end
|
end
|
||||||
|
|
||||||
%W(erb haml slim).each do |engine|
|
%W(erb haml slim).each do |engine|
|
||||||
|
|
Loading…
Reference in New Issue