Quasar 按钮组件中的图标不会改变大小

Question

Quasar Button 组件的大小可以调整，从 docs 看来按钮中的图标应该相应地改变大小。例如，从文档中查看这张图片：

当我尝试时，图标保持相同大小（按钮改变）。我的代码：

    <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"
    />

怎么了？

Answer 1

1。问题

我运行今天遇到了同样的问题。但是，如果您将按钮大小更改为一个极端数字（例如 200px），您会看到图标 DID 随按钮更改大小。

问题是图标和按钮之间的默认填充区域太大，这使得图标看起来比按钮本身小。

2。解决方案

这是我使用 Deep Selectors 解决问题的方法。您围绕按钮代码制作自定义按钮组件。然后给它以下样式：

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

并在模板中为 size 属性赋予相同的大小，因此 size="40px"。然后按钮的所有方面都具有相同的大小。

将 Vue 与第 3 方一起使用时 UI Frameworks/Components、Deep Selector 可以非常轻松地快速更改组件样式。如果您输入 scoped 关键字，更改也可以限定范围（仅在本地更改样式）。

Answer 2

我用了Quasar v2.0.4。使用 Quasar v2.0.4，您可以使用 size attribute.

更改图标（或按钮）大小

例如：

<q-btn size="xl" icon="close" />

<q-btn size="100px" icon="close" />

但是如果你使用 size attribute 和 fab 或者 fab-mini attribute , size attribute 不行，那么，只有 fab 或者 fab-mini attribute 代替 size attribute.

例如：

<q-btn size="xl" fab icon="close" />
    
<q-btn size="100px" fab-mini icon="close" />

Quasar 按钮组件中的图标不会改变大小

Icon in Quasar Button Component does not change size

javascript

vue.js

vuejs2

icons

quasar-framework

1。问题

2。解决方案