Dialog Plugin - 'style' and 'class' are not passed to buttons

ddenev

Hi,

I’m having the following code:

exportSelected () {
  this.$q.dialog({
    title: 'Export selected',
    message: 'Export the selected analyses?',
    cancel: true,
    ok: {
      label: 'Export',
      unelevated: true,
      style: { 'border-radius': 0 }
    }
  })
}

The problem is that the ‘style’ is not applied to the button. Same is with ‘class’ property.

How is this supposed to work?

metalsadman

@ddenev

https://quasar.dev/vue-components/button#QBtn-API

ddenev

@metalsadman, thank you very much for the effort but unfortunately this does not help in solving the problem that I described.

I definitely checked all the properties of QBtn before posting the question here and there is no QBtn-specific properties that manage the general style and class, apart from the base “style” and “class” ones, which in turn do not work, as described. The border radius that I want to apply above can only be applied with “style”, there is no inherent property of QBtn that allows this.

Providing a “style” or a “class” property binding to a regular QBtn component works just fine. It does not work for Dialog Plugin though.

So back to square 1 - is this a bug and if not then how is this supposed to work?

metalsadman

It’s not a bug, remember this is a plugin you don’t need to assert that it should work since it is stated in its api docs that only qbtn’s props are passed, if you want it to pass those attributes, then issue a feature request at gh repo, or use the custom component way (imo this is more flexible). https://quasar.dev/quasar-plugins/dialog#Invoking-custom-component

ddenev

OK, got it, thank you again!

I guess custom component is the way to go then. In addition it might be a good idea IMHO to update the docs that “style” and “class” will not work in this case since the current description implies that all QBtn props would work.

metalsadman

@ddenev class and style are not qbtn props, those are native attributes, that’s why you don’t see it in qbtn’s props api and that’s why the docs wasn’t wrong about it, i’ve been hinting that since my first post :).

ddenev

@ddenev class and style are not qbtn props, those are native attributes

@metalsadman, yes, I know that, thank you for mentioning

Nevertheless, I believe it’s intuitive to expect that both the QBtn-related props and the native “style” and “class” attributes work. This expectation is based on “See QBtn for available props” which refers to the QBtn-inherent ones but leaves the native attributes out and that in turn leads to a default assumption that if they work naturally with the QBtn component then they should also work for the Dialog Plugin case.

… and that’s why the docs wasn’t wrong about it

I wasn’t implying that the docs are “wrong”, I was just suggesting to make them a bit more clear based on my belief above. Other people could, like me, naively assume that the “style” and “class” native attributes should naturally work in that case.

No More Posting New Topics!

Dialog Plugin - 'style' and 'class' are not passed to buttons