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 answers
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
.