Clickable cards (Primary Action)

[MartinManev]

Is your feature request related to a problem? Please describe. I want to set a primary action when clicking a card. See the material design spec for reference. I would also like to apply ripple effect.

Describe the solution you'd like https://material-components.github.io/material-components-web-catalog/#/component/card

Describe alternatives you've considered QBtn that wraps a QCard.

Additional context https://material.io/components/cards/#actions

https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1Q_ulqPTP81IcVQdZDl7VbPSHc7GTwZ2e%2Fcards-focus.mp4

[smolinari]

Hi Martin,

Something like this? Click on the image.

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

Scott

[MartinManev]

Hi, Scott,

I would like the card to be focusable and traversible via tab or shift+tab. Transitions/animations included. Also, according to the material design spec, the card text is also part of the primary action. I, personally, would also like to apply the material ripple effect on click, but that is optional. See the video in the description for an example.

[smolinari]

What I'm getting at is, you should be able to build this out yourself.

Scott

[rstoenescu]

Put a tabindex="0" on the QCard. Also add v-ripple on it.

[MartinManev]

Why close this feature request?

[rstoenescu]

Sorry, but it makes no sense. It can easily be done like described above: adding a @click listener, a tabindex="0" and a v-ripple on it.

[smolinari]

@MartinManev - Quasar is a framework. The components and all the helpers in it are there to assist you in building what you are expecting as an added feature in this issue. In other words, the features are within the framework for you to build almost anything you want. You need to understand how to use the framework and not expect the core framework to do it all for you.

At best, someone, even you, might build out the component as you are asking for and put it in an App Extension for others to use. Next time, see if you can build it yourself. If you meet a hurdle, the community on Discord or the Forum is there to help. Even asking if something is buildable will be answered. Just don't ask others to build if for you (well, not unless you are willing to pay for it as a job).

Thanks for your understanding.

Scott

[MartinManev]

With all due respect to the quasar team, but sometimes I'm really disappointed in the way you communicate with fellow professionals. I came here simply to request a feature of the quasar team. A feature, that is IN the material design specification, mind you. Nothing more, nothing less. If the team decides that this feature is not worth considering, that's fine. Disappointing, because Quasar is advertised as "focused on following the Material 2.0 Guidelines and to stay up-to-date to them", but at least now I know that I'll need to find an alternative or implement it myself. This is important to me, because I also have a schedule and deal with clients.

But instead I received completely unhelpful comments written in a patronizing manner. And that is not just me but other people who post here too.

Anyway, here is a demo of the feature: https://material-components.github.io/material-components-web-catalog/#/component/card

I understand, that you don't want to bother with it, but at least leave the issue open so other people can see it. Maybe it can gain support or maybe someone will propose nice a solution with a codepen. I don't understand why you are so eager to close it. Telling me that I can do something myself, while technically true, is basically telling me to f*** off.

Kind regards, Martin

[smolinari]

Unfortunately, this is a once-in-a-while occurrence and of course we don't want to come off as patronizing, but the situation always ends up that way. So, possibly being even more patronizing, but not wanting to be, let's get some things straight and for others to read.

1. This issue doesn't need to stay open for others to read and get their word in. They can do so, even if it's closed. Closed just means, it isn't going to happen and it shouldn't (more on that below).

2. You and a handful of other devs (and a small minority, but why we come to this point) seem to think because Quasar solves a lot of dev problems, it needs to solve all dev problems or your particular dev problem. That is absolutely the wrong attitude when working with a framework (or OSS in general) and especially when we tell you, "you can do it yourself rather easily". Then too, it is met with disdain, as if we can do something about your lack of knowledge. We aren't here to hold your hands and guide you to learning what you need to learn or even worse, do your work for you. And yes, that is more than likely being patronizing. Sorry, but it has to be said. If we tell you "you can do it yourself", then that is not patronizing. It's fact and it is what you SHOULD BE DOING. Razvan is very, very knowledgeable. He has to be one of the most knowledgeable front-end devs I've ever met. If he takes the time to chime in with suggestions, then you SHOULD take the suggestion and run with it and be glad he took the time to offer a suggestion. His time is hugely valuable and you're getting it for free.

3. What you have linked to is NOT a part of the Material spec. It is a Material component. And, with Quasar, you can build any and all Material components you want to. Nothing is holding you back except your expectation that others should do it for you. (i.e. see your comment about making a codepen). I started one to try to get your imagination going. But, you are stuck with thinking it should be built into the framework or for you. It won't be. Just like the many App Extensions aren't part of the core either. And, there can be many more, like your wish in this issue, which I alluded to above.

4. We have to constantly weigh between what is core and what isn't or shouldn't be. In fact, in my personal and humble opinion, Quasar does way too much already with its component set. It does too much, because it does lead people to then think every wish needs to be done in the framework. That simply can't be the case. If every wish were brought here, instead of them being done by those who know how to do them, (and as you can see in the AE list, there are a lot more wishes being made come true), we'd be bombarded by them. It's impossible to make everyone happy all of the time, right? But, with AEs, we can come damn close.

5. Quasar is a framework and yes, it does a lot for devs. That is its value and it is very, very valuable. Razvan, as does the team behind him, put a lot of effort into Quasar. Your saying, "make this for me too" and ignoring our suggestions to do it yourself and insisting it needs to be in core is a slap in our faces. Can you imagine that? It is a huge source of frustration for Razvan and the team, because we see this already huge tool box we have spent so much time on as something that should be taken advantage of by devs. And when you and similarly thinking devs come in and insist your want or need also needs to be in the core, be done by us, be done in a codepen, when in effect, it can be done by yourself so easily, it pisses us off. So, if it seems like you get patronizing answers, maybe it's because your insistence to "make it so" is a bit patronizing too? It's reducing us to your "worker" and that is NOT how OSS works.

So, that was a bit ranty and I'll apologize up front for that. But, if you feel in anyway upset or think we are incorrect with our stance, then we'll have to agree to disagree and you'll never be happy with us. So, yeah. You can also take that as **ck off too. But, seeing it that way is on you. Not us. If you show you want to work with the framework as we want you to and others do, then you are "in" and the world will open up to you.

It's up to you to change your mind (or not).

Scott

[webnoob]

I'd just like to show my support for @smolinari above on this. His feelings are the teams feelings.

As a team, we feel very strongly about Quasar and it's growth. Growth for Quasar means growth for you and the community of developers which rely on Quasar.

There is one important thing to understand along with the post above: Most of the people using Quasar, offering "advice", demanding action do not in any way contribute to Quasar, either financially or via PRs. It's expected that the team (who work full time to support their families) will just make it happen.

What about our schedules? What about our clients? It's important to remember there are people at the end of this framework. Real people whose blood, sweat and tears are paying other peoples bills.

It's not hard to donate: https://github.com/sponsors/rstoenescu It's not hard to do PRs (and we'll even work with you and help you grow in this regard): https://quasar.dev/contribution-guide/contribution-guide

Whilst contributing and supporting us via sponsorship doesn't mean we'll give special treatment for feature requests, suggestions etc, it does show appreciation and gives value to the hard work we put in (especially Razvan!).

Hopefully this puts some context on the nerve that was struck in this post.

[smolinari]

At the same time and in the spirit of community and because it is easy, this should get you closer to what you were asking for.

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

Scott

[Fanvadar]

As another suggestion for this, I've personally done is like so:

<q-card v-ripple class="q-hoverable cursor-pointer" @click="doSomething">
  <div tabindex="-1" class="q-focus-helper"></div>
  ...
</q-card>

Because this gives the hover effect.

[tvogel]

Setting tabindex="0" on QCard currently gives the following error in VS Code:

Argument of type '{ class: string; tabindex: string; }' is not assignable to parameter of type 'VNodeProps & AllowedComponentProps & ComponentCustomProps & QCardProps'.
  Object literal may only specify known properties, and 'tabindex' does not exist in type 'VNodeProps & AllowedComponentProps & ComponentCustomProps & QCardProps'.ts(2345)

Maybe it still works but this is of course not nice. Similar problems happen with QTr and valign="baseline". Standard HTML attributes seem to be rejected.