Onsen UIにはバッジ(Notification)を表示するためのCSSクラスが用意されており、次の行を追加すれば簡単に表示することができる。
[html]
99
[/html]

しかし、ツールバーのメニューアイコンの右上に表示させようとすると、このままでは思うような位置に表示されない。
2016040401

そこで、CSSクラスを追加する。
positionでabsoluteを指定すると、絶対位置で表示させることができる。
topとleftでメニューアイコンに重なる位置へ移動させれば、期待した表示となる。
2016040402
[html]


99
Page 1


[/html]
[css]
.badgeToolbar {
position: absolute;
top: 5px;
left: 20px;
}
[/css]

Recommended Posts