Как использовать текстовые поля дизайна материала в рельсах

Question

Я хочу использовать текстовое поле с дизайном материала в рельсах, чтобы заполнитель поля смещался наверх, когда пользователь начинает печатать.

Я получаю поле для правильного отображения в рельсах прямо из примера, но я не знаю, как его адаптировать к рельсам simple_form компонент.

application.html.erb

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

in my form.html.erb 
<%= f.input :title, label: false %>
<%= f.collection_select(:color, Color.all, :id, :name) %>

Это должно выглядеть так:

<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>

Answer 1

Когда я вас правильно понял, вы ищете "Ярлыки с плавающей точкой"

Обычно этого можно достичь с помощью смеси JS и CSS, как описано здесь .

В моем собственном приложении на Rails, где я также использую simple_form, я использовал следующий код для достижения этого шаблона:

JS (jQuery):

// FLOATING LABLES:
$(document).on('turbolinks:load', function () {
    $('.form-group.string').addClass('float-labels'); // removes all labels from the form (removing with js due to old browsers & disabled JS)
    $('.form-group.string input.form-control').each( function (index, value) {
        addRemoveFloatLable($(this)); // bring back labels for already filled forms (edit).
    });
});

$(document).on('input keyup', '.form-group.string input', function () {
    if( $(this).val().length <= 1 ) { // change only needed in case first char gets added (or latest gets removed)
        addRemoveFloatLable($(this));
  }
});

function addRemoveFloatLable($element) {
  if ( $element.val() == '' ) { // input field is empty.
    $element.parents('.form-group').removeClass('show-label');  
  } else {
    $element.parents('.form-group').addClass('show-label');  
  }
}

CSS:

.form-group.string.float-labels {
    label {
        opacity: 0;
    }
}
.form-group.string.float-labels.show-label {
    label {
        opacity: 1;
        -webkit-transition: opacity 0.3s linear;
        transition: opacity 0.3s linear;
    }
}

Answer 2

Я хотел бы порекомендовать этот учебник, я следовал ему, и он отлично работает для меня ... надеюсь, это поможет,

https://www.webascender.com/blog/tutorial-using-materialize-ruby-rails-simple-form/

Также посмотрите на

как стилизовать simple_form с дизайном материала или по индивидуальному заказу css

Answer 3

Раньше я не использовал simple_form , но, глядя на документы, что-то вроде этого должно работать.

<%= simple_for_form @user do |f| %>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <%= f.input_field :username, input_html: { class: 'mdl-textfield__input'} %>
    <%= f.label :username, input_html: { class: 'mdl-textfield__label'} %>
  </div>
<% end %>

Если вы хотите создать весь div с помощью f.input_field вы можете посмотреть пользовательских входов

Вы можете сделать что-то подобное внутри пользовательского ввода

template.content_tag(:div class: 'mdl-textfield mdl-js-textfield mdl-textfield--floating-label') do
  # text_field_input_code
  # label_input_code
end