How to make a custom element active in Ionic?


#1

I created custom html blocks to create a virtual keyboard. I’d like when the user holds a key, the color changes.

Here is a jsfiddle: http://jsfiddle.net/b19v9s17/
In summary, the important part of code looks like this:

        <kbm-container>
            <kbm-block>7</kbm-block>
            <kbm-block>8</kbm-block>
            <kbm-block>9</kbm-block>
            <kbm-block>4</kbm-block>
            <kbm-block>5</kbm-block>
            <kbm-block>6</kbm-block>
            <kbm-block>1</kbm-block>
            <kbm-block>2</kbm-block>
            <kbm-block>3</kbm-block>
            <kbm-block>0</kbm-block>
        </kbm-container>

In CSS, I have something like:

kbm-block {
  background: #3b65a7;
}

kbm-block:active {
  background: #123456;
}

It works on Chrome when holding click, but does nothing in Ionic when touching the buttons (they are not button actually). Any idea? Thanks!


#2

Maybe this will help you: