<% = f.submit %>에 CSS 클래스 추가


답변:


352
<%= f.submit 'name of button here', :class => 'submit_class_name_here' %>

해야합니다. 오류가 발생하면 이름을 제공하지 않았을 가능성이 있습니다.

또는 수업없이 버튼의 스타일을 지정할 수 있습니다.

form#form_id_here input[type=submit]

그것도 시도하십시오.


우수한! Srdjan 감사합니다. 하나의 호기심- disable_with이 제출 버튼을 사용해 보았지만 결코 작동하지 않는 것 같습니다. 당신이 알고있는 이유가 있습니까? +1
sscirrus

3
옵션에 대한 해시로 시도하십시오 : {: class => 'class_name', : disable_with => 'Editing ...'}. 버튼 이름 뒤에옵니다. 작동해야하거나 최소한 문서화되어 있습니다.
Srdjan Pejic

3
submit위의 답변에서와 같이 : class 해시를 사용하려면 첫 번째 인수로 문자열 ( '여기 버튼 이름')을 명시 적으로 전달해야합니다 . 해당 문자열이 없으면 오류 메시지가 나타납니다.
thewillcole

7
기본값 응답을 제거하지 않고 클래스를 추가하십시오. stackoverflow.com/questions/8811254/…
Naoise Golden

<%= form.submit :class => 'class_name' %>이름을 사용하지 않으려는 경우 작동합니다.

141

다음을 수행하여 양식의 제출 단추에 클래스 선언을 추가 할 수 있습니다.

<%= f.submit class: 'btn btn-default' %> <-참고 : 쉼표가 없습니다!

스캐 폴드 의 _ form.html.erb 부분을 변경하고 컨트롤러 조치간에 단추 이름의 동적 변경을 유지하려면 name을 지정하지 마십시오 'name'.

이름을 지정하지 않고 작업에 따라 양식이 렌더링되면 버튼 에 다음 이름 의 .class = "btn btn-default"(부트 스트랩 클래스) (또는 .class지정한 값)가 표시됩니다.

  • model_name 업데이트

  • model_name을 작성하십시오
    (여기서 model_name은 스캐 폴드 모델의 이름).


13
선택한 답변보다 투표 수가 적음에도 불구하고 대부분의 사람들이 사용하고자하는 솔루션입니다.
IAmNaN

3
이것이 내가
찾던

1
유용하며 기본 Rails 생성 버튼 텍스트를 변경하지 않고 HTML 속성 (예 : "id"또는 "class")을 추가 할 수 있습니다.
TK-421

1
IMO 컨트롤러 동작을 기반으로 버튼에 텍스트를 동적으로 할당하는 동작 ( "만들기"또는 "업데이트")을 유지하기 때문에이 방법이 가장
적합

@ sixty4bit가 말한대로. 번역 파일에서 버튼 텍스트를 설정해야하므로 양식을 다른 컨트롤러 작업 (예 : '댓글 만들기'대 '업데이트 메모')에서 재사용 할 수 있습니다. 이 답변을 참조하십시오 - stackoverflow.com/a/18255633/5355691
자비스 존슨

26

Rails 4 및 Bootstrap 3 "기본"버튼

<%= f.submit nil, :class => 'btn btn-primary' %>

다음과 같은 결과를 얻습니다.

screen-2014-01-22_02.24.26.png


2
nil이름을 지정 하면 헬퍼의 기본 동작이 유지되므로 (예 :와 같이 작성 / 표시중인 오브젝트의 인스턴스 변수를 찾으면 @person단추 이름을 적절하게 지정 함 (Foo 업데이트 또는 Foo 작성) 및 form_forFormBuilder 도 있기 때문에 이는 실제로 가장 좋습니다. 올바른 조치를 선택합니다. 따라서이 방법으로 양식 코드를 부분으로 추출하고이를 사용하여 모델 오브젝트를 표시하고 (양식을 사용하여 표시하려는 경우) 양식을 업데이트하고 새 인스턴스도 작성할 수 있습니다.
Paul-Sebastian Manole

13

Srdjan Pejic이 말했듯이 사용할 수 있습니다

<%= f.submit 'name', :class => 'button' %>

또는 새로운 구문 :

<%= f.submit 'name', class: 'button' %>

9

form_with 도우미를 사용할 때의 해결책

사용하는 사람들을 위해 5.2 레일form_with도우미 : 쉼표를 추가하지 마십시오 !

<%= f.submit class: 'btn btn-primary' %>

쉼표가없는 스크린 샷

HTH!


2

기본적으로 Rails 4는 'value'속성을 사용하여 보이는 버튼 텍스트를 제어하므로 마크 업을 깨끗하게 유지합니다.

<%= f.submit :value => "Visible Button Text", :class => 'class_name' %>

0

둘 다 작동 <%= f.submit class: "btn btn-primary" %>하고 <%= f.submit "Name of Button", class: "btn btn-primary "%>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.