Case Study for Card Development Using Pseudo-Classes - Huawei Developers

Symptom
While developing a card, I used a pseudo-class for a component to implement a color changing effect. However, the color cannot be restored.
For example, the original background color was as follows.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
This figure shows the new background color after using the pseudo-class.
In normal cases, the card’s background color is changed upon tapping, and will return to the original color when you lift your finger.
This problem is caused by incomplete pseudo-classes for cards supported by Huawei Quick App Loader. Even so, there’s still an easy solution.
Solution
Simply add a tap event to the component using the pseudo-class. No logic processing is needed.
Sample code:
CSS:
<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
</div>
CSS style:
.sitetype_box {
flex-direction: column;
background-color:#FFBF00;
padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
/** Pseudo-class */
.sitetype_box :active{
background-color: #E40078;
}
Method:
JavaScript:
test(){
console.log("message");
}
Reference:
Pseudo-classes for quick apps:
https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-style#h1-1578402521212

---

New member here

---

nice

---

wonderful sharing!!

---

Thanks

---

Nice

---

good

---

omg, I thought I am the only one with this problem, thanks for providing the solution

---

Thanks

---

Hello from pakistan

---

JessicajK said:
omg, I thought I am the only one with this problem, thanks for providing the solution
Click to expand...
Click to collapse
It's an honor to solve your problem.

---

Mayism said:
Symptom
While developing a card, I used a pseudo-class for a component to implement a color changing effect. However, the color cannot be restored.
For example, the original background color was as follows.
This figure shows the new background color after using the pseudo-class.
In normal cases, the card’s background color is changed upon tapping, and will return to the original color when you lift your finger.
This problem is caused by incomplete pseudo-classes for cards supported by Huawei Quick App Loader. Even so, there’s still an easy solution.
Solution
Simply add a tap event to the component using the pseudo-class. No logic processing is needed.
Sample code:
CSS:
<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
</div>
CSS style:
.sitetype_box {
flex-direction: column;
background-color:#FFBF00;
padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
/** Pseudo-class */
.sitetype_box :active{
background-color: #E40078;
}
Method:
JavaScript:
test(){
console.log("message");
}
Reference:
Pseudo-classes for quick apps:
https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-style#h1-1578402521212
Click to expand...
Click to collapse

---

Mayism said:
Symptom
While developing a card, I used a pseudo-class for a component to implement a color changing effect. However, the color cannot be restored.
For example, the original background color was as follows.
This figure shows the new background color after using the pseudo-class.
In normal cases, the card’s background color is changed upon tapping, and will return to the original color when you lift your finger.
This problem is caused by incomplete pseudo-classes for cards supported by Huawei Quick App Loader. Even so, there’s still an easy solution.
Solution
Simply add a tap event to the component using the pseudo-class. No logic processing is needed.
Sample code:
CSS:
<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
</div>
CSS style:
.sitetype_box {
flex-direction: column;
background-color:#FFBF00;
padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
/** Pseudo-class */
.sitetype_box :active{
background-color: #E40078;
}
Method:
JavaScript:
test(){
console.log("message");
}
Reference:
Pseudo-classes for quick apps:
https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-style#h1-1578402521212
Click to expand...
Click to collapse

---

Mayism said:
Symptom
While developing a card, I used a pseudo-class for a component to implement a color changing effect. However, the color cannot be restored.
For example, the original background color was as follows.
This figure shows the new background color after using the pseudo-class.
In normal cases, the card’s background color is changed upon tapping, and will return to the original color when you lift your finger.
This problem is caused by incomplete pseudo-classes for cards supported by Huawei Quick App Loader. Even so, there’s still an easy solution.
Solution
Simply add a tap event to the component using the pseudo-class. No logic processing is needed.
Sample code:
CSS:
<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
</div>
CSS style:
.sitetype_box {
flex-direction: column;
background-color:#FFBF00;
padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
/** Pseudo-class */
.sitetype_box :active{
background-color: #E40078;
}
Method:
JavaScript:
test(){
console.log("message");
}
Reference:
Pseudo-classes for quick apps:
https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-style#h1-1578402521212
Click to expand...
Click to collapse