シンプル利益計算は、仕入金額と利益を表示する場所を節約するため、ツールバーのスペースを利用し、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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ons-page> <ons-toolbar> <div class="left"> <ons-back-button>Prev</ons-back-button> </div> <div class="center"> <div class="div-table div-title"> <div class="div-table_row"> <div class="div-table_cell">あかさたな</div> </div> <div class="div-table_row"> <div class="div-table_cell">123,456,789</div> </div> </div> </div> <div class="right"> <ons-toolbar-button><ons-icon icon="ion-menu"></ons-icon></ons-toolbar-button> </div> </ons-toolbar> </ons-page> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.div-table { display: table; } .div-table_row { display: table-row; } .div-table_cell { display: table-cell; } .toolbar .div-title { padding-top: 4px; font-size: 16px; line-height: 18px; text-align: left; } .toolbar--material .div-title { padding-top: 8px; font-size: 16px; line-height: 20px; text-align: left; } |
 |
[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門 ――リアルタイムに動く画面を描く。プログラマー直伝の基本 (WEB DB PRESS plus) 新品価格 |
