シンプル利益計算は、仕入金額と利益を表示する場所を節約するため、ツールバーのスペースを利用し、2行で表示するように変更しています。
今回は、ons-toolbarに2行の文字列を表示する方法を紹介します。

Monacaデバッガーの結果です。
Android版の場合、Onsen UIがマテリアルに切り替えて表示するため、iOS版と若干表示が違います。

Android版

iOS版

「display: table;」「display: table-row;」「display: table-cell;」を使用し、1列2行のテーブルを表示します。
ons-toolbarにより生成したHTMLに含まれるクラス「toolbar」または「toolbar–material」ごとに、padding-topを調整します。

HTML

CSS

[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門 ――リアルタイムに動く画面を描く。プログラマー直伝の基本 (WEB DB PRESS plus)

新品価格
¥3,058から
(2020/2/18 20:00時点)

【Monaca】Onsen UI ons-toolbarに2行の文字列を表示する
Tagged on: