-
-
Save thaleshcv/492f8e2d7cf7a87775bff16a92ee60de to your computer and use it in GitHub Desktop.
simple_form initializer for Bulma (input, select, checkbox)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-# Example form | |
= simple_form_for @some_model do |f| | |
-# Show error notification at top (general error text) | |
= f.error_notification | |
-# Show base errors at top | |
= f.error_notification message: (f.error :base) if f.object.errors[:base].present? | |
-# Regular input | |
= f.input :name, autofocus: true | |
-# Select input referencing other model | |
= f.association :other_model | |
-# Checkbox | |
= f.input :remember_me, as: :boolean | |
.buttons | |
= f.submit 'Save', class: 'button is-primary' | |
= yield |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# frozen_string_literal: true | |
# Uncomment this and change the path if necessary to include your own | |
# components. | |
# See https://github.com/plataformatec/simple_form#custom-components | |
# to know more about custom components. | |
# Dir[Rails.root.join('lib/components/**/*.rb')].each { |f| require f } | |
# Use this setup block to configure all options available in SimpleForm. | |
SimpleForm.setup do |config| | |
# Default class for buttons | |
config.button_class = 'button' | |
# Define the default class of the input wrapper of the boolean input. | |
config.boolean_label_class = 'label' | |
# How the label text should be generated altogether with the required text. | |
config.label_text = lambda { |label, required, explicit_label| "#{label} #{required}" } | |
# Define the way to render check boxes / radio buttons with labels. | |
config.boolean_style = :inline | |
# You can wrap each item in a collection of radio/check boxes with a tag | |
config.item_wrapper_tag = :div | |
# Defines if the default input wrapper class should be included in radio | |
# collection wrappers. | |
config.include_default_input_wrapper_class = false | |
# CSS class to add for error notification helper. | |
config.error_notification_class = 'notification is-danger' | |
# Method used to tidy up errors. Specify any Rails Array method. | |
# :first lists the first message for each field. | |
# :to_sentence to list all errors for each field. | |
config.error_method = :to_sentence | |
# You can define which elements should obtain additional classes | |
config.generate_additional_classes_for = [] | |
# Input | |
config.wrappers :default, tag: 'div', class: 'field' do |field| | |
field.use :label, class: 'label' | |
field.wrapper tag: 'div', class: 'control' do |control| | |
control.use :html5 | |
control.use :input, class: 'input', error_class: 'is-danger', valid_class: 'is-success' | |
control.use :placeholder | |
control.optional :maxlength | |
control.optional :minlength | |
control.optional :pattern | |
control.optional :min_max | |
control.optional :readonly | |
end | |
field.use :full_error, wrap_with: { tag: 'p', class: 'help is-danger' } | |
field.use :hint, wrap_with: { tag: 'p', class: 'help' } | |
end | |
# Select | |
config.wrappers :custom_select, tag: 'div', class: 'field' do |field| | |
field.use :label, class: 'label' | |
field.wrapper tag: 'div', class: 'control' do |control| | |
control.wrapper tag: 'div', class: 'select' do |select| | |
select.use :html5 | |
select.use :input, class: 'input', error_class: 'is-danger', valid_class: 'is-success' | |
select.use :placeholder | |
select.optional :readonly | |
end | |
end | |
field.use :full_error, wrap_with: { tag: 'p', class: 'help is-danger' } | |
field.use :hint, wrap_with: { tag: 'p', class: 'help' } | |
end | |
# Boolean | |
config.wrappers :custom_boolean, tag: 'div', class: 'field' do |field| | |
field.wrapper tag: 'div', class: 'control' do |control| | |
control.wrapper tag: 'label', class: 'checkbox' do |label| | |
label.use :html5 | |
label.use :input, error_class: 'is-danger', valid_class: 'is-success' | |
label.optional :readonly | |
label.use :label_text | |
end | |
end | |
field.use :full_error, wrap_with: { tag: 'p', class: 'help is-danger' } | |
field.use :hint, wrap_with: { tag: 'p', class: 'help' } | |
end | |
# Custom wrappers for input types. This should be a hash containing an input | |
# type as key and the wrapper that will be used for all inputs with specified type. | |
config.wrapper_mappings = { | |
select: :custom_select, | |
boolean: :custom_boolean, | |
} | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment