q-checkbox custom icons removed?
-
- suggestion, as Razvan said on Github, use QToggle.
Scott
-
Yes, Razvan said that in order for an accurate Material Design on checkboxes, this feature had to be dropped, and suggested using QToggle with icons.
I tried QToggle and it worked but the look of it didn’t satisfy me.
So I finally decided to create a workaround.
I used plain html<input type="checkbox"/>and styled it with FontAwesome icons as shown in this codepen https://codepen.io/imohkay/pen/wyxuB
Now it looks and works just like q-checkbox with custom icons in quasar v0.17
Anyway, thanks for you help, it is much appreciated! -
-
Your example looks cool!
However QBtnToggle is essentially a radio input but I need a checkbox style on/off boolean switch. That’s why I decided to use plain html input tag instead of Quasar element. -
Well, you can control what you’d like with it and change the icons with a function, theoretically.
Scott
-
I’m using the QChip… (plus it has a “selected” option built in.
I know this example could be simpler, but hey, It got changed into a mini component.
Handles bind, plus horizontal, plus option or checkbox option.
https://codepen.io/uberpu/pen/QoNQXz -
I was also using this option with q-radio and sad to see it go.
-
You can still do it. You have now the power to do anything you want with the option slot.
https://v1.quasar-framework.org/vue-components/select#Customizing-menu-options
Scott
-
I also used this for like/dislike buttons and a heart favorite button. I agree sad to see this convenience go
-
my solution is simple
<q-btn v-if="userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite" /> <q-btn v-if="!userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite_border" /> -
@mitchellmonaghan said in q-checkbox custom icons removed?:
my solution is simple
<q-btn v-if="userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite" /> <q-btn v-if="!userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite_border" />You can do a one liner with that ie.
... :icon="userFavorited ? 'favorite' : 'favorite_border'" ...or use a computed prop. -
If using a button, add the
flatproperty for better results
