search

russellsamora / svelte-keyboard

Virtual keyboard component for Svelte
https://russellsamora.github.io/svelte-keyboard
MIT License
54 stars 9 forks source link

How to control individual key or group of keys styles? Is this possible? #6

Closed otaviocv closed 2 years ago

otaviocv commented 2 years ago

Hi there! I was playing around with this component to apply individual styles for individual keys. I know it is possible to apply styles with:

:global(.svelte-keyboard .key--q) {
        background-color: rgb(255, 0, 234);
    }

But in the case I want to build a wordle-like game, how would I control dynamically styles in group of keys? Like displaying A, B and C as "correct", "green" letters. I was thinking to apply a .correct or .missed classes, but as far as I could read the code there is no interface for the user to control these things.

Is this possible?

I would like already to thank you for your time and attention.

russellsamora commented 2 years ago

good idea! just implemented and added docs at the bottom of the the custom style section and a demo at the bottom as well. Let me know what you think.

russellsamora commented 2 years ago

By the way it is now published in v0.4.0

otaviocv commented 2 years ago

Thank you a lot! That was exactly the implementation was thinking. Thank you again! 🎊