Adicione uma classe CSS a <% = f.submit%>

Respostas:

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

Isso deve fazer. Se você estiver recebendo um erro, é provável que não esteja fornecendo o nome.

Como alternativa, você pode estilizar o botão sem uma classe:

form#form_id_here input[type=submit]

Tente isso também.

Srdjan Pejic
fonte
Excelente! Obrigado Srdjan. Um pouco de curiosidade - tentei usar disable_withesses botões de envio, mas eles nunca parecem funcionar. Existe uma razão pela qual você conhece? +1
sscirrus 15/03/11
3
Tente com um hash as opções: {: class => 'class_name',: disable_with => 'Editing ...'}. Isso irá após o nome do botão. Deveria funcionar, ou pelo menos está documentado como isso.
Srdjan Pejic
3
Observe que você precisa passar explicitamente uma string ('nome do botão aqui') como o primeiro argumento submitpara usar o hash: class como na resposta acima. Se você não tiver essa sequência, receberá uma mensagem de erro.
thewillcole
7
adicionar classe sem remover resposta valor padrão aqui stackoverflow.com/questions/8811254/...
Naoise de Ouro
<%= form.submit :class => 'class_name' %>funciona, se você não quiser usar o nome.
141

Você pode adicionar uma declaração de classe ao botão enviar de um formulário, fazendo o seguinte:

<%= f.submit class: 'btn btn-default' %> <- Nota: não há vírgula!

Se você estiver alterando uma parte _form.html.erb de um andaime e desejar manter a alteração dinâmica do nome do botão entre as ações do controlador, NÃO especifique um nome 'name'.

Sem especificar um nome e, dependendo da ação que o formulário é renderizado, o botão obterá a .class = "btn btn-default"(classe Bootstrap) (ou o que .classvocê especificar) com os seguintes nomes:

  • Atualizar model_name

  • Crie model_name
    (em que model_name o nome do modelo do andaime)

aloucas
fonte
13
Apesar de ter menos votos do que a resposta selecionada, esta é a solução que a maioria das pessoas desejará usar.
IAmNaN
3
Isto é o que eu estava tentando encontrar
Sandeep Garg
1
Útil e permite adicionar um atributo HTML ("id" ou "classe", como no exemplo) sem alterar o texto do botão padrão gerado pelo Rails.
TK-421
1
IMO esta é a melhor resposta, pois preserva o comportamento de atribuição dinâmica de texto para o botão ( "Criar" ou "Update") com base na ação do controlador
sixty4bit
Definitivamente como @ sixty4bit disse. Deveria definir o texto do botão nos arquivos de tradução, para que o formulário possa ser reutilizado em diferentes ações do controlador, ou seja, 'criar comentário' vs 'atualizar comentário'. Veja esta resposta - stackoverflow.com/a/18255633/5355691
Jarvis Johnson
26

Botão "primário" do Rails 4 e Bootstrap 3

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

Rende algo como:

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

cwd
fonte
2
Na verdade, isso é melhor porque especificar nilo nome retém o comportamento padrão do auxiliar, onde, se encontrar uma variável de instância para o objeto que está sendo criado / exibido, como, por exemplo @person, nomeará o botão adequadamente (Atualizar ou Criar Foo) e também o form_forFormBuilder escolhe a ação correta. Dessa forma, você pode extrair o código do formulário em parcial e usá-lo para exibir o objeto de modelo (se desejar usar um formulário para exibi-lo), atualizá-lo e criar uma nova instância também.
Paul-Sebastian Manole
13

Como Srdjan Pejic diz, você pode usar 

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

ou a nova sintaxe que seria:

<%= f.submit 'name', class: 'button' %>
RailsZilla.com
fonte
9

Solução ao usar o form_with helper

Para quem usa o Rails 5.2, o form_withajudante with : não adicione vírgula !

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

Captura de tela sem vírgula

HTH!

BKSpurgeon
fonte
2

Por padrão, o Rails 4 usa o atributo 'value' para controlar o texto do botão visível, para manter a marcação limpa, eu usaria

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

ambos trabalham <%= f.submit class: "btn btn-primary" %>e <%= f.submit "Name of Button", class: "btn btn-primary "%>

gsumk
fonte