DEV Community

Quasar's "Select" Component... 7 Reasons It's The Gift That Just Keeps Giving!

Luke on August 08, 2021

Errrg, building a select component from scratch is like building a house out of sand. Just when you think you're making headway, everything comes c...
Collapse
 
the_one profile image
Roland Doda

This sounds amazing! Genius! Supporting the development of Quasar whilst having a course on how to build amazing things with it. Even though I know pretty much everything when it comes to developing web interfaces with Quasar, I am in!! I hope I can learn the PWA, SSR and mobile side of Quasar in this course.

Collapse
 
ldiebold profile image
Luke

Most of my knowledge of pwa/ssr is -m pwa and -m ssr.

Apart from a "refresh" button for pwa, I've never needed to go any deeper!

You might also be interested in the special "PWA + SSR" combo...
quasar.dev/quasar-cli/developing-s...

Collapse
 
grahamthedev profile image
GrahamTheDev

Anywhere that we can just see the component in action without having to sign up, nearly every select component I have seen has massive accessibility issues and if this one doesn't then I would love to promote it!

Collapse
 
ldiebold profile image
Luke

Check out some examples in the docs! I honestly think Quasar has some of the best documentation I've ever seen for a frontend framework <3

quasar.dev/vue-components/select#i...

If accessibility is lacking, could you please point me in the right direction for making select components more accessible? I'm embarrassed to say, my understanding of accessibility is not good enough!

One more note on that... Might need to use the "for" attribute to improve accessibility :)

Collapse
 
grahamthedev profile image
GrahamTheDev

Sure I will check it out this week, happy to help as it looks interesting!

Collapse
 
wiktorcie profile image
Wiktor Cieślak

5 doesn't work with quasar 2.0, can't figure out why, any clues?

Collapse
 
ldiebold profile image
Luke

Not sure, I've tested it twice and seems to be working! I'll add the GitHub repo, one sec :)

Collapse
 
wiktorcie profile image
Wiktor Cieślak

works great now, thanks!

Collapse
 
wiktorcie profile image
Wiktor Cieślak • Edited

what should the data object's type be? I tried with array, string, object, empty, with random values. Please add the js from script section.

Collapse
 
ldiebold profile image
Luke

Okay, updated!
here's the repo: GitHub Repo With All The Examples

Also, you're more than welcome to add me on discord and ask questions!
ldiebold#0365

Collapse
 
ldiebold profile image
Luke

I'll add the "script" tag into the article. Thanks for the feedback :)

Collapse
 
devimposter1 profile image
devimposter

I always appreciate your enthusiasm!! Funny I was just using this select the other day and was wondering how I could make the "chips" within the select more customized color wise. The default is graying and just using the color attribute changes the whole thing. (like brown above) Maybe it's just some CSS but I didn't see it in the api.
Thanks

Collapse
 
cdecinkoknight profile image
cdecinkoKnight

How do I remove the highlight once an item is selected? I want to lose focus or blur the control after making a selection.

Collapse
 
theakshits profile image
Akshit Sharma

Nice blog!

There's a typo in the first link of quasarcomponents.com, there's a 's' missing in the URL.

Collapse
 
ldiebold profile image
Luke

You legend! On it :)