如何在rails中使用材料设计文本字段答案

【问题标题】：How to use material design text fields in rails如何在rails中使用材料设计文本字段
【发布时间】：2019-02-17 07:48:25
【问题描述】：

我希望在 Rails 中使用材料设计文本字段，以便在用户开始输入时使字段的占位符移动到顶部。

我确实让该字段直接从示例中正确显示在 Rails 中，但我不知道如何将其适应 RAILS 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>

【问题讨论】：

如果有人有这方面的经验，会有所帮助。

标签： ruby-on-rails material-design

【解决方案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

【讨论】：

嘿，不确定你是否尝试过它并且它对你有用，它对我不起作用。

【解决方案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;
    }
}

【讨论】：

嘿，好的，请问您的观点如何？

【解决方案3】：

我想推荐这个教程，我已经按照它进行了操作，它对我来说很好......希望这会有所帮助，

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

也可以看看

how to style simple_form with material design or custom css

【讨论】：