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

217

Minha pergunta é fácil:

<%= f.submit %>

Para onde vai a declaração de classe? Estou recebendo erros em várias tentativas.

ruby-on-rails css ruby-on-rails-3

— sscirrus
fonte

veja também stackoverflow.com/questions/8811254/…

— Naoise Golden

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:

— 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' %>

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