Значок в Quasar Button Component не меняет размер - PullRequest
Новая
       17

Значок в Quasar Button Component не меняет размер

0 голосов
/ 04 мая 2018

Компонент Quasar Button размера можно изменить, и из docs кажется, что значок кнопки должен соответственно изменить размер. Смотрите эту картинку, например, из документов: enter image description here

При попытке значок остался прежнего размера (кнопка меняется). Мой код: 

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

Что не так?

1 Ответ

0 голосов
/ 12 мая 2018

1. Проблема

Я столкнулся с той же проблемой сегодня. Но если вы измените размер кнопки на экстремальное число (например, 200 пикселей), вы увидите, что значок DID меняет размер с помощью кнопки.

Проблема в том, что область отступа по умолчанию между значком и кнопкой слишком велика, что делает значок маленьким по сравнению с самой кнопкой .

2. Решение

Вот как я это решаю, используя Deep Selectors . Вы делаете пользовательский компонент кнопки вокруг своего кода кнопки. Затем задайте ему следующий стиль: 

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

А также присвойте атрибуту размера в вашем шаблоне такой же размер, поэтому size="40px". Тогда все аспекты кнопки имеют одинаковый размер.

При использовании Vue со сторонними фреймворками / компонентами пользовательского интерфейса Deep Selector позволяет действительно быстро вносить изменения в стили компонентов. И изменения также могут быть ограничены (только изменить стиль локально), если вы введете ключевое слово scoped.

...