我有一个带有左侧和右侧菜单的抽象模板。对于ion-side-menu-content
标记上的标题,我需要有3行文字。
但由于某个原因我无法识别,当我尝试将title
类应用于文本时,它要么隐藏在视图之外,要么粘在左边,取代左对齐按钮我有。
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<p>Ac vestibulum scelerisque<br />vel porta a parturient</p>
</ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="showLeftMenu()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-ios7-gear" ng-click="showRightMenu()">
</button>
</ion-nav-buttons>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<div class="bar bar-header">
<p>Velit tristique fusce nisi parturient</p>
</div>
<ion-content has-header="true">
<ul class="list">
<li class="item">item 1</li>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<p>footer content here</p>
</ion-footer-bar>
</ion-side-menu>
<ion-side-menu side="right">
<ion-header-bar class="bar bar-header">
<p>A condimentum metus varius eu ultrices</p>
</ion-header-bar>
<ion-content>
<ul class="list">
<li class="item">item 1</li>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<p>footer content here</p>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
没有class =“title”
使用class =“title”
我需要更改什么才能使左键保持在左侧,并将标题内容置于标题栏的中心?
答案 0 :(得分:1)
http://ionicframework.com/blog/navigating-the-changes/
经过一番阅读,我发现我的麻烦来源实际上是一个DOM结构问题。
<ion-nav-bar>
必须是<h1>
的父标记以及<ion-nav-button>
标记。
<h1>
将呈现为标题栏中的标题。只会显示一行。如果您不使用<h1>
,则您希望成为标题标题的内容将从视口中隐藏。据推测,解决方法是只使用Ionic开发人员想要的<h1>
标签,并使用CSS覆盖来强制显示多行。
您的HTML应如下所示:
<ion-nav-bar class="bar-stable">
<h1 class="title">Ac vestibulum scelerisque<br />vel porta a parturient</h1>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="showLeftMenu()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-ios7-gear" ng-click="showRightMenu()">
</button>
</ion-nav-buttons>
</ion-nav-bar>