No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    q-checkbox custom icons removed?

    Help
    7
    18
    1911
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • s.molinari
      s.molinari last edited by

      1. suggestion, as Razvan said on Github, use QToggle.

      Scott

      1 Reply Last reply Reply Quote 0
      • R
        rusia last edited by

        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!

        1 Reply Last reply Reply Quote 0
        • s.molinari
          s.molinari last edited by

          I played around some with QToggleButton. 😄

          https://codepen.io/smolinari/pen/jJEBVe

          Scott

          1 Reply Last reply Reply Quote 0
          • R
            rusia last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • s.molinari
              s.molinari last edited by

              Well, you can control what you’d like with it and change the icons with a function, theoretically. 😄

              Scott

              1 Reply Last reply Reply Quote 0
              • U
                uberpu last edited by

                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

                1 Reply Last reply Reply Quote 0
                • T
                  turigeza last edited by turigeza

                  I was also using this option with q-radio and sad to see it go.

                  1 Reply Last reply Reply Quote 0
                  • s.molinari
                    s.molinari last edited by

                    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

                    1 Reply Last reply Reply Quote 0
                    • M
                      mitchellmonaghan last edited by

                      I also used this for like/dislike buttons and a heart favorite button. I agree sad to see this convenience go

                      1 Reply Last reply Reply Quote 0
                      • M
                        mitchellmonaghan last edited by

                        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" />
                        
                        metalsadman 1 Reply Last reply Reply Quote 0
                        • metalsadman
                          metalsadman @mitchellmonaghan last edited by

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

                          1 Reply Last reply Reply Quote 0
                          • Hawkeye64
                            Hawkeye64 last edited by

                            If using a button, add the flat property for better results

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post