- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想用 simple_form 重现这个 html 单选按钮序列,以便使 simple_form 与 http://semantic-ui.com/ 一起使用句法 :
<div class="grouped inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit" checked="">
<label>Apples</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit">
<label>Oranges</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit">
<label>Pears</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit">
<label>Grapefruit</label>
</div>
</div>
</div>
config.wrappers :semantic_radios, tag: 'div', class: "grouped fields", error_class: 'error', hint_class: 'with_hint' do |b|
b.use :html5
b.use :label
b.use :input
end
config.item_wrapper_tag = :div
config.item_wrapper_class = 'ui radio checkbox'
=f.input :child_care_type, collection: [["option 1", 1],["option 2", 2]], as: :radio_buttons, wrapper: :semantic_radios
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit" checked="">
<label>Apples</label>
</div>
</div>
<div class="ui radio checkbox">
<input type="radio" name="fruit" checked="">
<label>Apples</label>
</div>
最佳答案
概括:
我之前做过类似的事情,创建了一个继承自 SimpleForm::Inputs::CollectionRadioButtonsInput
的自定义输入。并且只重载几个方法。有关自定义输入组件的更多信息,请参阅 https://github.com/plataformatec/simple_form/wiki/Adding-custom-input-components .
在任何情况下,下面的代码几乎完全使用 simple_form v2.1.0 和 rails v3.2.15 生成您想要的 html 标记。
代码:
# File: app/inputs/semantic_ui_radio_buttons_input.rb
class SemanticUiRadioButtonsInput < SimpleForm::Inputs::CollectionRadioButtonsInput
# Creates a radio button set for use with Semantic UI
def input
label_method, value_method = detect_collection_methods
iopts = {
:checked => 1,
:item_wrapper_tag => 'div',
:item_wrapper_class => 'field',
:collection_wrapper_tag => 'div',
:collection_wrapper_class => 'grouped inline fields'
}
return @builder.send(
"collection_radio_buttons",
attribute_name,
collection,
value_method,
label_method,
iopts,
input_html_options,
&collection_block_for_nested_boolean_style
)
end # method
protected
def build_nested_boolean_style_item_tag(collection_builder)
tag = String.new
tag << '<div class="ui radio checkbox">'.html_safe
tag << collection_builder.radio_button + collection_builder.label
tag << '</div>'.html_safe
return tag.html_safe
end # method
end # class
-# File: app/views/<resource>/_form.html.haml
-# Define the collection
- child_care_coll = %w( Infant Toddler Preschool Kindergarten ).map!.with_index(1).to_a
-# Render the radio inputs
= f.input :child_care_type,
:collection => child_care_coll,
:label_method => :first,
:value_method => :last,
:as => :semantic_ui_radio_buttons
<div class="input semantic_ui_radio_buttons optional childcare_child_care_type">
<label class="semantic_ui_radio_buttons optional control-label">
Child care type
</label>
<div class="grouped inline fields">
<div class="field">
<div class="ui radio checkbox">
<input checked="checked" class="semantic_ui_radio_buttons optional" id="childcare_child_care_type_1" name="childcare[child_care_type]" type="radio" value="1">
<label for="childcare_child_care_type_1">Infant</label>
</div>
</div>
...
<div class="field">
<div class="ui radio checkbox">
<input class="semantic_ui_radio_buttons optional" id="childcare_child_care_type_4" name="childcare[child_care_type]" type="radio" value="4">
<label for="childcare_child_care_type_4">Kindergarten</label>
</div>
</div>
</div>
</div>
关于simple-form - simple_form 集合包装器(单选按钮): double encapsulation of items,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19605976/
这里我试图在 FlatList 中显示一个名为“posts”的数组。 render() { console.log(this.props.posts); return (
这是我的代码: {{day(list)}} {{list.weather[0].description}}
我是 Mahout 的新手,并且仍在使用它。 我的问题是,将 Item-Item 和 User-Item 结合起来是否合适? 我的用例是,一个社交网络应用会尝试根据用户历史数据(优先级较高)为当前用户
下午好, 我按数据库搜索以测试特定类测试,当我放置一个新项目时,如果列表包含该项目。 @Test public void insertAndDeleteTask() throws Interrupte
我有一个关于 ionic 框架的问题,我希望有人能帮助我...我有一个带有“ion-item-right”的 ionic 列表。这一切都可以,按钮在右边。现在我需要其他三个居中的图标,这样我就有了:文
我经常遇到类似下面的代码: if ( items != null) { foreach(T item in items) { //... } } 基本上,if 条件确
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
这个问题已经有答案了: Type mismatch: cannot convert from Item to Item (1 个回答) 已关闭 7 年前。 我很困惑。我无法将外部类的实例变量 Node
我目前正在使用 MUI Grid(但我对替代解决方案持开放态度)并且我想要并排放置两个组件:最右边的组件占 400px宽度和左侧组件占据其余部分。 || || || 当页面宽度缩小时: | | ||
我最近问过a question about LocalStorage 。使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
public class Document extends Model { ... @ManyToMany public Set accessors; ... } 我想选择访问者包含某个用户的所有文档
我正在使用 selenium webdriver 为单页 Web 应用程序开发一个 Java 框架,使用以下模式:PageObject、SlowLoadableComponent(责任链)、PageF
最近在学习C,在网上发现了一个问题。问题是: What is the problem with this function in terms of memory allocation? What is
我有这个代码 ( -1 ? true : false} /> {genre.item.name}
在ASP.Net中使用DataGrid时真的没有快捷方法吗 (e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.A
我正在使用工作流程根据数据和一组要求将大量 pdf 从一个位置复制到其他大坝位置。我正在使用以下代码 Assets damAsset = manager.createAsset(path, is, m
我是 PowerShell 的新手。 我正在尝试自动将 dll 组件从源服务器上的文件夹部署到目标服务器上的多个文件夹。这看起来应该很简单:将组件从源服务器上的源(部署)文件夹复制到目标服务器上的文件
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
我是一名优秀的程序员,十分优秀!