Использование соглашений из БЭМ методологии в формах Simple Form¶ ↑
Установка¶ ↑
Добавить в Gemfile
:
gem 'bemer-simple_form'
Выполнить в терминале команду:
$ bundle
Настройки¶ ↑
Конфигурация bemer-simple_form
¶ ↑
Параметры конфигурации по умолчанию:
# config/initializers/bemer_simple_form.rb Bemer::SimpleForm.setup do |config| config.bemify_namespaces = %i[error hint input wrapper label] config.element_name_transformer = nil # lambda { |namespace, block, namespaced_elem, initial_elem| ... } config.input_type_modifiers_for_namespaces = %i[input wrapper label] end
Конфигурация bemer
¶ ↑
Все параметры конфигурации использующие по умолчанию досутпны здесь.
# config/initializers/bemer.rb Bemer.setup do |config| config.bem = true config.element_name_separator = '__' config.modifier_name_separator = '--' config.modifier_value_separator = '_' end
Конфигурация simple_form
¶ ↑
Для того, чтобы отключить генерацию ненужных CSS классов от Simple Form, достаточно изменить следующие параметры конфигурации:
# config/initializers/simple_form.rb SimpleForm.setup do |config| config.wrappers :default do |b| # ... # Inputs b.use :hint, wrap_with: { tag: :span } b.use :error, wrap_with: { tag: :span } # ... end # ... # DEPRECATED: You can define the class to be used on all forms. config.form_class = nil # Default class for buttons config.button_class = nil # CSS class to add for error notification helper. config.error_notification_class = nil # You can define which elements should obtain additional classes. config.generate_additional_classes_for = [] # Define the default class of the input wrapper of the boolean input. config.boolean_label_class = nil # Defines if the default input wrapper class should be included in radio collection wrappers. config.include_default_input_wrapper_class = false # ... end
Дополнительно при вызове можно указать class: nil
:
= simple_form_for resource, url: registration_path(resource_name), html: { class: nil } do |f| / ...
Использование¶ ↑
Для simple_form_for
доступны такие же параметры как и для {хелпера block_tag
}.
Для элементов формы доступны такие же параметры как и для элементов {хелпера block_tag
} создаваемых с помощью content
, переданного в виде Ruby &block
.
Создание формы с параметрами по умолчанию:
= simple_form_for resource, url: registration_path(resource_name), html: { class: nil } do |f| = f.input :email, required: true, autofocus: true = f.input :password, required: true, input_html: { autocomplete: 'off' } = f.input :password_confirmation, required: true, input_html: { autocomplete: 'off' } => f.button :submit, t('.sign_up')
Название блока передается через параметр as
:
= simple_form_for resource, as: :user, url: registration_path(resource_name), html: { class: nil } do |f| = f.input :email, required: true, autofocus: true = f.input :password, required: true, input_html: { autocomplete: 'off' } = f.input :password_confirmation, required: true, input_html: { autocomplete: 'off' } = f.button :submit, t('.sign_up')
Название блока передается через параметр block
:
= simple_form_for resource, block: :user, url: registration_path(resource_name), html: { class: nil } do |f| = f.input :email, required: true, autofocus: true = f.input :password, required: true, input_html: { autocomplete: 'off' } = f.input :password_confirmation, required: true, input_html: { autocomplete: 'off' } = f.button :submit, t('.sign_up')
Добавить модификатор enabled
в элемент email
:
= simple_form_for resource, block: :user, url: registration_path(resource_name), html: { class: nil } do |f| = f.input :email, required: true, autofocus: true, input_html: { mods: :enabled } = f.input :password, required: true, input_html: { autocomplete: 'off' } = f.input :password_confirmation, required: true, input_html: { autocomplete: 'off' } = f.button :submit, t('.sign_up')
Результат рендеринга формы с параметрами по умолчанию:
<form id="new_admin_user" novalidate="novalidate" class="admin-user" action="/user" accept-charset="UTF-8" method="post"> <input type="hidden" name="authenticity_token" value="dXgQo5PvtM5g01pFiQmpMDTb8BYVxsMvzS8n+6YN/UhjFR/tCf4ym7bZzMgs/E/ECxvXZcbr9uzMPcUUIj43jA=="> <div class="admin-user__email-wrapper admin-user__email-wrapper--email admin-user__email-wrapper--required"> <label class="admin-user__email-label admin-user__email-label--email admin-user__email-label--required" for="admin_user_email"> <abbr title="Обязательное">*</abbr> Электронный адрес </label> <input autofocus="autofocus" class="admin-user__email admin-user__email--email admin-user__email--required" required="required" aria-required="true" type="email" value="" name="admin_user[email]" id="admin_user_email"> </div> <div class="admin-user__password-wrapper admin-user__password-wrapper--password admin-user__password-wrapper--required"> <label class="admin-user__password-label admin-user__password-label--password admin-user__password-label--required" for="admin_user_password"> <abbr title="Обязательное">*</abbr> Пароль </label> <input autocomplete="off" class="admin-user__password admin-user__password--password admin-user__password--required" required="required" aria-required="true" type="password" name="admin_user[password]" id="admin_user_password"> </div> <div class="admin-user__password-confirmation-wrapper admin-user__password-confirmation-wrapper--password admin-user__password-confirmation-wrapper--required"> <label class="admin-user__password-confirmation-label admin-user__password-confirmation-label--password admin-user__password-confirmation-label--required" for="admin_user_password_confirmation"> <abbr title="Обязательное">*</abbr> Подтверждение пароля </label> <input autocomplete="off" class="admin-user__password-confirmation admin-user__password-confirmation--password admin-user__password-confirmation--required" required="required" aria-required="true" type="password" name="admin_user[password_confirmation]" id="admin_user_password_confirmation"> </div> <input type="submit" name="commit" value="Зарегистрироваться" class="admin-user__submit" data-disable-with="Зарегистрироваться"> </form>
Результат рендеринга формы содержащей ошибки валидации:
<form novalidate="novalidate" class="admin-user" action="/user" accept-charset="UTF-8" method="post"> <input type="hidden" name="authenticity_token" value="5GJ9rIPD1XVg8BDKy2ZBpDt3qYlBuAh/z7u00qw8bzfyD3LiGdJTILb6hkduk6dQBLeO+pKVPbzOqVY9KA+l8w=="> <div class="admin-user__email-wrapper admin-user__email-wrapper--email admin-user__email-wrapper--required"> <label class="admin-user__email-label admin-user__email-label--email admin-user__email-label--required" for="admin_user_email"> <abbr title="Обязательное">*</abbr> Электронный адрес </label> <input autofocus="autofocus" class="admin-user__email admin-user__email--email admin-user__email--required" required="required" aria-required="true" aria-invalid="true" type="email" value="" name="admin_user[email]" id="admin_user_email"> <span class="admin-user__email-error">не может быть пустым</span> </div> <div class="admin-user__password-wrapper admin-user__password-wrapper--password admin-user__password-wrapper--required"> <label class="admin-user__password-label admin-user__password-label--password admin-user__password-label--required" for="admin_user_password"> <abbr title="Обязательное">*</abbr> Пароль </label> <input autocomplete="off" class="admin-user__password admin-user__password--password admin-user__password--required" required="required" aria-required="true" aria-invalid="true" type="password" name="admin_user[password]" id="admin_user_password"> <span class="admin-user__password-error">не может быть пустым</span> </div> <div class="admin-user__password-confirmation-wrapper admin-user__password-confirmation-wrapper--password admin-user__password-confirmation-wrapper--required"> <label class="admin-user__password-confirmation-label admin-user__password-confirmation-label--password admin-user__password-confirmation-label--required" for="admin_user_password_confirmation"> <abbr title="Обязательное">*</abbr> Подтверждение пароля </label> <input autocomplete="off" class="admin-user__password-confirmation admin-user__password-confirmation--password admin-user__password-confirmation--required" required="required" aria-required="true" type="password" name="admin_user[password_confirmation]" id="admin_user_password_confirmation"> </div> <input type="submit" name="commit" value="Зарегистрироваться" class="admin-user__submit" data-disable-with="Зарегистрироваться"> </form>
Ссылки¶ ↑
Лицензия¶ ↑
Copyright © 2019 - 2020 Александр Григорьев. Более подробную информацию о лицензии можно получить в файле LICENSE-RU.txt.