Добавление атрибутов Bootstrap к вводу простой формы Rails

Следующий фрагмент формы является логическим, поэтому оформлен в виде флажка:

= form.input :recur, label: "Recurring"

Мне нужно две вещи:
1) оформить его как кнопку начальной загрузки, а не флажок
2) добавить атрибуты data-target и data-toggle

Это HTML-код, который мне нужно добавить в форму для стилизации кнопок и функций свертывания, и мне трудно понять правильный синтаксис для простой формы (я использую SLIM):

<button class="btn btn-default" data-toggle="collapse" data-target="#recurringGift" type="button">
</button>

Любой совет будет принят во внимание!


ruby-on-rails twitter-bootstrap simple-form slim-lang
person dotjamie    schedule 21.07.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

1) С помощью простой формы вы можете передавать параметры для ввода, метки и оболочки. Я бы стилизовал метку, чтобы использовать классы кнопок, и установил display: none для самого ввода, так как щелчок по метке также установит флажок.

eg.

= f.input_field :some_checkbox, input_html: { style: "display: none"}, label_html: { class: "btn btn-primary"}

Более того, вы можете поставить флажок перед меткой, чтобы использовать псевдокласс :checked для изменения стиля метки:

= f.input_field :some_checkbox, input_html: { style: "display: none"}
= f.label :some_checkbox, class: "btn btn-primary"

Затем в вашем CSS вы можете объявить: input:checked + label { background-color: grey; }

например. http://codepen.io/anon/pen/doqZyp

2) Вы можете передавать атрибуты данных с хешем data: {}, например.

= f.input_field :some_checkbox, input_html: { style: "display: none"}, data: {target: "#recurringGift", toggle: "collapse"}

Имейте в виду, что ваше соглашение требует, чтобы атрибуты данных использовали дефисы для разделения слов (например, data-some-attribute=""), но рельсы потребуют подчеркивания (например, data: {some_attribute: ""}

person Benjamin    schedule 21.07.2015
comment
Спасибо за обстоятельный ответ! Дисплей: никто не блокирует функциональность, когда я удаляю, он работает нормально, но флажок появляется вместе с кнопкой. Любые другие идеи, чтобы скрыть это? - person dotjamie; 23.07.2015
comment
Вы можете скрыть его, указав position: absolute;, а затем переместив его за пределы страницы, например. left: -1000em: codepen.io/anon/pen/doqZyp - person Benjamin; 23.07.2015

arrow_upward
-1
arrow_downward

Вы должны иметь возможность добавить их в качестве атрибутов, добавив их в объект параметров:

= form.input :recur, label => "Recurring", 'data-toggle' => "collapse", 'data-target' => '#recurringGift'

Обратите внимание, что вы должны использовать кавычки вокруг атрибутов с тире, так как они не допускаются в символах. Также обратите внимание на обозначение хеш-ракеты. Вы не можете использовать двоеточие, когда ключ является строкой

person Brennan    schedule 21.07.2015
comment
Спасибо за ответ, у меня не работает добавление их, как вы написали. Знаете ли вы, могу ли я оформить логический ввод как кнопку, а не флажок? - person dotjamie; 22.07.2015