我使用autoform问一个是,没问题,我想有两个按钮,一个说是,另一个说不。通过使用aldeed:autoform-bs-button-group-input
,我可以使用我的架构中的下面的代码生成两个按钮,但是这并不能单独设置每个按钮的样式。例如,我希望一个是绿色的,一个是红色的。我怎样才能做到这一点?
路径:Schema.js
answer: {
type: String,
optional: true,
allowedValues: ['Yes', 'No'],
autoform: {
type: "select-radio",
options: function () {
return [
{label: "Yes", value: 'Yes'},
{label: "No", value: 'No'},
];
}
}
}
路径:template.js
{{#autoForm collection="questions" id=makeUniqueID doc=this type="update" autosave=true}}
{{> afQuickField name="answer" type="select-radio" template="buttonGroup" label=false}}
{{/autoForm}}
答案 0 :(得分:1)
首先让我们添加一个类属性autoform:
{{#autoForm class="YesNoStyles" collection="questions" id=makeUniqueID doc=this type="update" autosave=true }}
{{> afQuickField name="answer" type="select-radio" template="buttonGroup" label=false}}
{{/autoForm}}
这会传递给生成的<form>
标记,我们可以检查并看到它如下所示:
<form class="YesNoStyles" id="makeUniqueID" novalidate="novalidate">
<div class="form-group">
<div class="af-radio-group" data-schema-key="answer">
<div>
<label>
<input type="radio" value="Yes" name="answer" id="6gWEaAr2ZWQzqtj7H"> Yes</label>
</div>
<div>
<label>
<input type="radio" value="No" name="answer" id="6gWEaAr2ZWQzqtj7H"> No</label>
</div>
</div>
<span class="help-block"></span>
</div>
</form>
现在有两种选择:
找到input[value="Yes"]
和input[value="No"]
元素,然后将css应用于其父元素。然而,这不能仅使用css来完成,因为css选择器不允许选择父元素。 Meteor的onRendered回调允许我们执行以下操作:
Template.Question.onRendered(function(){
$('input[value="Yes"]')[0].parentElement.classList.add('yes');
$('input[value="No"]')[0].parentElement.classList.add('no');
});
使用以下定义的css类:
.yes {
background-color: green;
}
.no {
background-color: red
}
:nth-child(i)
css选择器,无需javascript!
定义以下css规则(从我上面添加的类开始):
.YesNoStyles > div > div > div:nth-child(1) > label {
background-color: green;
}
.YesNoStyles > div > div > div:nth-child(2) > label {
background-color: red;
}