Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] Ícone no lugar do texto no botão

Referente ao curso Vue3: explorando o framework, no capítulo Estilos estilosos e atividade Ouvindo a troca de tema

por Felipe Rodrigues
| 214.6k xp | 12 posts
Desenvolvedor full-stack

Resolvi mudar um pouco e ao invés de colocar um texto no botão de trocar tema coloquei ícones.

O código ficou assim:

<button class="button is-large" @click="alterarTema">
    <span class="icon">
        <i class="fas fa-lg" :class="iconeBotao"></i>
    </span>
</button>
computed: {
    iconeBotao() {
      if (this.modoEscuroAtivo) {
        return 'fa-sun'
      }
      return 'fa-moon'
    }
  },
1 resposta
solução!
por Vinicios Neves
| 994.8k xp | 1097 posts
Instrutor Tech Lead | Tech Educator

Boa, Felipe!

A única coisa que eu colocaria a mais aí seriam marcações para acessibilidade:

<button class="button is-large" @click="alterarTema" aria-labelledby="button-label">
    <span id="button-label" hidden>Botão para alternar entre modo claro e escuro</span>
    <span class="icon">
        <i class="fas fa-lg" :class="iconeBotao"></i>
    </span>
</button>

Assim os leitores de tela conseguem indicar para que serve de fato o botão, pra quem não consegue ver o ícone.

:)

Bons estudos!