I want to display the badge in the application created in monaca.

I am currently creating apps with monaca and niftymbaas.

As for the content, the sliding menu was adopted, and when I got the new data from niftymbaas, I asked a question because I wanted to display the badge on the menu button and the items in the menu.
As an image, I would like to make it look like the image below.

Is it the idea to obtain new data on the mbaas side and inform monaca side to display the badge?
I would appreciate it if you could let me know the website or program that you would like to refer to.

I look forward to your kind cooperation.

javascript monaca html

2022-09-30 17:36

1 Answers

To achieve a badge-like look, define a style.
If you search, you will find many elaborate CSSs.

.menu-badge{
  padding —2px4px;
  font-size:.5em;
  color:white;
  background-color:red;
  border-radius —3px;
}

In addition, JavaScript is used for dynamic viewing. Basically, I think you will add <span> elements to the part you want to display.
For example, jQuery would look like the following.

$("ons-toolbar-button").append('<span class="menu-badge">!</span>');

2022-09-30 17:36

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656