Question

我正在寻找在Rails中使用Material Design文本字段的功能，以便在用户开始键入内容时将其占位符移到顶部。

我确实可以从示例中正确地看到该字段，但是我不知道如何将其适应于铁路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

我以前没有使用过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 %>

如果您只想使用f.input_field创建整个div，则可以查看custom inputs

您也许可以在自定义输入中执行类似的操作

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

Answer 2

我找对了，您正在寻找"Float Labels"

通常可以使用JS和CSS的混合物来实现，如here所述。

在我自己的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 3

我想推荐本教程，我已经按照它进行了学习，对我来说很好用...希望对您有帮助，

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

也看看

how to style simple_form with material design or custom css

如何在Rails中使用材料设计文本字段

3 个答案: