Q&A
Monacaでアプリの開発をしています。
###前提・実現したいこと
Monacaのテンプレート「Onsen UI V2 JS Tabbar」のons-tabbar、もしくはons-tabのheightを変更したいです。
###該当のソースコード
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 ons.ready(function() { 17 console.log("Onsen UI is ready!"); 18 }); 19 20 document.addEventListener('show', function(event) { 21 var page = event.target; 22 var titleElement = document.querySelector('#toolbar-title'); 23 24 }); 25 </script> 26</head> 27<body> 28 <ons-page> 29 <ons-tabbar position="bottom"> 30 <ons-tab page="tab1.html" active> 31 <div class="my-icon1"><img src="img/nav1.png" alt="オリジナルアイコン" width="100%" height="100%"/> 32 </div> 33 </ons-tab> 34 <ons-tab page="tab2.html"> 35 <div class="my-icon2"><img src="img/nav2.png" alt="オリジナルアイコン" width="100%" height="100%"/> 36 </div> 37 </ons-tab> 38 <ons-tab page="tab3.html"> 39 <div class="my-icon3"><img src="img/nav3.png" alt="オリジナルアイコン" width="100%" height="100%"/> 40 </div> 41 </ons-tab> 42 <ons-tab page="tab4.html"> 43 <div class="my-icon4"><img src="img/nav4.png" alt="オリジナルアイコン" width="100%" height="100%"/> 44 </div> 45 </ons-tab> 46 <ons-tab page="tab5.html"> 47 <div class="my-icon5"><img src="img/nav5.png" alt="オリジナルアイコン" width="100%" height="100%"/> 48 </div> 49 </ons-tab> 50 </ons-tabbar> 51 </ons-page> 52 53 <template id="tab1.html"> 54 <ons-page id="first-page"> 55 <div class="content1"> 56 <img src="img/pl_logo.png" alt="" width="100%" height="100%"/> 57 </div> 58 <div class="content2"> 59 <img src="img/pl_main.png" alt="" width="100%" height="100%"/> 60 </div> 61 <div class="content3"> 62 <img src="img/tl_main.png" alt="" width="100%" height="100%"/> 63 </div> 64 </ons-page> 65 </template> 66 <template id="tab2.html"> 67 <ons-page id="second-page"> 68 <p>News!本文</p> 69 </ons-page> 70 </template> 71 <template id="tab3.html"> 72 <ons-page id="third-page"> 73 <iframe src="https://ja.monaca.io/" width="100%" height="100%"> 74 </iframe> 75 </ons-page> 76 </template> 77 <template id="tab4.html"> 78 <ons-page id="fourth-page"> 79 <p>本文</p> 80 </ons-page> 81 </template> 82 <template id="tab5.html"> 83 <ons-page id="fifth-page"> 84 <p>本文</p> 85 </ons-page> 86 </template> 87</body> 88</html>
###試したこと
tabのパーツは、用意した画像を使用しています。
ons-tabbarリファレンスでTabのheightを変更する情報が見つからなかったため、高さの変更が可能なのか、可能の場合はどういった方法で行えば良いのか。
見栄えに関わる基本的な質問で恐縮ですが、お教えいただけると幸いです。
宜しくお願いいたします。
回答1件
0
ons-tabbarのドキュメントを見る限り、簡単に設定できる項目はないようです。
https://ja.onsen.io/v2/api/angular1/ons-tabbar.html
CSSで地道に変更していくしかないと思います。
CSS
1.tabbar { 2 /*height: 49px デフォルト*/ 3 height: 35px !important; 4} 5.tabbar__button { 6 /*height: 49px デフォルト*/ 7 height: 35px !important; 8}
投稿2017/10/11 01:52
編集2017/10/11 01:53
総合スコア65
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。