O ícone no componente do botão Quasar não altera o tamanho

Question

O ícone no componente do botão Quasar não altera o tamanho

o componente do botão Quasar de tamanho pode ser ajustado e a partir de docs parece que o ícone num botão deve mudar de tamanho em conformidade. Veja esta imagem, por exemplo, dos documentos:

Quando eu tento o ícone fica do mesmo tamanho (o botão muda). O meu código:

    <q-btn
      v-if="$route.name === 'resetpassword'"
      class="absolute-top-right"
      flat
      round
      wait-for-ripple
      dense
      size="15px"
      color="primary"
      icon="mdi-window-close"
      @click.native="goToSignIn"
    />

O que se passa?

1

javascript icons vuejs2 quasar-framework

Author: musicformellons, 2018-05-04

Source

1 answers

score 2 · Accepted Answer

1. O Problema

Tive o mesmo problema hoje. Mas se mudar o tamanho do botão para um número extremo (por exemplo, 200px), verá que o ícone mudou de tamanho com o botão.

O problema é que a área de enchimento por omissão entre o ícone e o botão é demasiado grande, o que faz com que o ícone pareça pequeno, comparando com o próprio botão.

2. A Solução

É assim que eu resolvo isto usando selectores profundos. Você faz um costume componente de botões em torno do seu código de botões. Então dê-lhe o seguinte estilo:

<style scoped>
.q-btn>>>.q-icon {
  font-size: 40px;
}
</style>

E dê também o atributo size no seu modelo do mesmo tamanho, por isso size="40px". Então todos os aspectos do botão têm o mesmo tamanho.

Ao usar o Vue com estruturas/componentes IU de terceiros, Deep Selector torna muito fácil fazer alterações rápidas aos estilos de componentes. E as mudanças também podem ser escopradas (só mudar o estilo localmente) se você colocar a palavra-chave scoped.