Ocasionalmente, tenho que adicionar uma classe a um elemento html com base em uma condição. O problema é que não consigo descobrir uma maneira limpa de fazer isso. Aqui está um exemplo do que experimentei:
<div <%= if @status = 'success'; "class='ok'"; end %>>
some message here
</div>
OU
<% if @status == 'success' %>
<div class='success'>
<% else %>
<div>
<% end %>
some message here
</div>
Eu não gosto da primeira abordagem porque ela parece lotada e é difícil de ler. Eu não gosto da segunda abordagem porque o aninhamento está bagunçado. Seria bom colocá-lo no modelo, (algo como @status.css_class
), mas isso não pertence lá. O que a maioria das pessoas faz?
fonte
Evitando lógica nas visualizações
O problema com a abordagem padrão é que ela requer lógica na forma de
if
declarações ou ternários na visualização. Se você tiver várias classes CSS condicionais misturadas com classes padrão, precisará colocar essa lógica em uma interpolação de string ou tag ERB.Esta é uma abordagem atualizada que evita colocar qualquer lógica nas visualizações:
class_string
métodoO
class_string
auxiliar recebe um hash com pares de chave / valor consistindo em strings de nome de classe CSS e valores booleanos . O resultado do método é uma string de classes onde o valor booleano é avaliado como verdadeiro.Uso de amostra
Outros casos de uso
Este helper pode ser usado dentro de
ERB
tags ou com helpers Rails comolink_to
.Classes ou classes
Para casos de uso em que um ternário seria necessário (por exemplo
@success ? 'good' : 'bad'
), passe uma matriz onde o primeiro elemento é a classe paratrue
e o outro é parafalse
Inspirado por React
Essa técnica é inspirada por um add-on chamado
classNames
(anteriormente conhecido comoclassSet
) da estrutura deReact
front-end do Facebook .Usando em seus projetos Rails
A partir de agora, a
class_names
função não existe no Rails, mas este artigo mostra como adicioná-la ou implementá-la em seus projetos.fonte
Você também pode usar o helper content_for, especialmente se o DOM estiver localizado em um layout e você quiser definir a classe css dependendo do carregamento parcial.
No layout:
Na parcial:
É isso.
fonte