This repository has been archived by the owner on Jun 21, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 58
How to Change the Badge Number in TabBar via WebView
Camilo edited this page Feb 28, 2022
·
1 revision
This is a simple example on how to change the Tabbar numbers using the WebView buttons.
Saved inside the project.
app.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onClick="increaseBadge()">Increase Badge</button>
<button onClick="resetBadge()">Reset Badge</button>
</body>
</html>// This file is appended on each request for $webcontainer.
const increaseBadge = () => {
$agent.logger.log("Increase");
$agent.trigger("increase_badge");
};
const resetBadge = () => {
$agent.logger.log("Reset");
$agent.trigger("reset_badge");
};{
"$jason": {
"head": {
"actions": {
"$load": {
"type": "$set",
"options": {
"badge": null
},
"success": {
"type": "$render"
}
},
"increase_badge": {
"type": "$set",
"options": {
"badge": "{{(parseInt($get.badge) || 0) + 1}}"
},
"success": {
"type": "$render"
}
},
"reset_badge": {
"type": "$set",
"options": {
"badge": null
},
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"background": {
"type": "html",
"url": "file://app.html",
"style": {
"background": "#ffffff",
"progress": "rgba(0,0,0,0)"
},
"action": {
"type": "$default"
}
},
"footer": {
"tabs": {
"style": {
"background": "rgba(255,255,255,0.8)",
"color:disabled": "#cecece",
"color": "#009efa"
},
"items": [{
"image": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/images/home.png",
"text": "Home",
"style": {
"height": "21"
},
"url": "file://hello.json"
}, {
"image": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/images/notifications.png",
"text": "Notifications",
"style": {
"height": "21"
},
"badge": "{{$get.badge || ''}}",
"url": "file://hello.json"
}]
}
}
}
}
}
}
}- Telegram: https://t.me/jasonelle
- Website: https://jasonelle.com
- Additional: https://jasonelle-archive.github.io/docs/legacy/