Gem simple_form 如何美化?

kevin · 2011年11月28日 · 最后由 Thomastar 回复于 2018年01月10日 · 7525 次阅读

我用 bootstrap 的 ui 作为者也的界面,但 simple_form 如何美化?

尤其是这个:http://www.hujoy.com/register

在 name 下面因为有提示框,所以占据了很大一块,如何能避免,另外,如何才能避免? 还是,字段校正失败后的错误信息如何才能显示到输入框下面?

关于 simple_form,呼唤 @xdite 出来解答,她提供的优雅解法:

http://blog.xdite.net/posts/2011/11/10/simple-form-your-form-framework/

我用了新版的 simple_form,带 wrapper 后,基本上是随便弄了

下面是一个 wrapper 的例子

# This is for a field which occupied a single row and label is in stacked mode
config.wrappers :full_row_stacked, :class => "row", :error_class => :error do |b|
  b.use :tag => "div", :class => "field-stacked" do |field|
    field.use :placeholder
    field.use :label
    field.use :tag => 'div', :class => 'input' do |ba|
      ba.use :input
      ba.use :hoverhint
      ba.use :error, :tag => :span, :class => :'help-inline'
    end
  end
end

舊版是自己寫 class, override 它。

最近則是有看到一個使用新版 API 的例子,整合 bootstrap。寫 config.wrapper 去搞定 https://github.com/rafaelfranca/simple_form-bootstrap/blob/master/config/initializers/simple_form.rb

用 wrapper 之前我是用 bootstrap-rails 的,可以 fork xdite 的 https://github.com/xdite/bootstrap-rails 我 fork 了一个 https://github.com/yakjuly/bootstrap-rails 自己加了一个 nested_form 的扩展。 config/initializer/simple_form.rb

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.components = [ :placeholder, :label_input,  :error, :hint ]
  config.hint_class = "help-block"
  config.error_class = "help-inline"
  config.wrapper_class = nil
  config.wrapper_error_class = :error
end

至于样式 你就自己写一点吧。

wrapper 是期待已久的东西啊,以前所有的配置都绑定在 SimpleForm 这个 module 上,就没办法 存几套方案了。

checkbox 如何去修改样式?

需要 登录 后方可回复, 如果你还没有账号请 注册新账号