Html 在ion视图中,将标题和顶部导航栏放置在何处?
我试图将标题和顶部导航栏放在ion view指令的内部 如果我将标题导航栏置于Html 在ion视图中,将标题和顶部导航栏放置在何处?,html,css,angularjs,ionic-framework,Html,Css,Angularjs,Ionic Framework,我试图将标题和顶部导航栏放在ion view指令的内部 如果我将标题导航栏置于离子视图之外如果页面初始化,标签页面将闪烁黑色 但是,如果我尝试在离子视图中插入标题和顶部导航栏,标题和标题中的标题将不会显示 谁能告诉我我做错了什么 也许里面的标签不见了 谢谢你的帮助 以下是模板的代码: <div class="bar bar-header bar-positive has-tabs-top"> <button class="button button-icon icon
离子视图之外
如果页面初始化,标签页面将闪烁黑色
但是,如果我尝试在离子视图中插入标题和顶部导航栏,标题和标题中的标题将不会显示
谁能告诉我我做错了什么
也许里面的标签不见了
谢谢你的帮助
以下是模板的代码:
<div class="bar bar-header bar-positive has-tabs-top">
<button class="button button-icon icon ion-chevron-left" ui-sref="home">
</button>
<h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1>
<button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
</button>
</div>
<!--TOP TAB BAR -->
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark">
<div class="tabs">
<a class="tab-item orange">
Home
</a>
<a class="tab-item">
Favorites
</a>
<a class="tab-item">
Settings
</a>
</div>
</div>
<ion-view>
<div class="bar bar-header bar-positive has-tabs-top">
<button class="button button-icon icon ion-chevron-left" ui-sref="home">
</button>
<h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1>
<button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
</button>
</div>
<!--TOP TAB BAR -->
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark">
<div class="tabs">
<a class="tab-item orange">
Home
</a>
<a class="tab-item">
Favorites
</a>
<a class="tab-item">
Settings
</a>
</div>
</div>
<ion-content ng-controller="DailyListCtrl">
<!--WRITEOUT OVERAL STATS FOR DAYS -->
<ion-list class="list" >
<ion-item class="item itemListCustom" ng-repeat="listDataItem in listData">
<div class="listDateTimeBlock">
<div class="day"><h3>{{listDataItem.DATE_FROM_DD}}</h3></div>
<div class="month"><h3>{{listDataItem.DATE_FROM_MM}}</h3></div>
</div>
<!--ROW ONE -->
<div id="left">
<div class="left-inner">
{{ 'APPOINTMENT_SUCCESS_RATE' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.SUCCESS_RATE}} %
</div>
</div>
<div id="right">
<div class="left-inner floatRight">
{{ 'DIALS' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.DIALS_CNT}}
</div>
</div>
<!--ROW TWO-->
<div id="left">
<div class="left-inner ">
{{ 'SUCCESS_RATE_SINCE_START' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.SUCCESS_RATE_SINCE}} %
</div>
</div>
<div id="right">
<div class="left-inner floatRight">
{{ 'CONVERSATIONS' | translate }} :
</div>
<div class="right-inner">
{{listDataItem.CONVERS_CNT}}
</div>
</div>
<!--ROW THREE-->
<div id="left">
<div class="left-inner">
{{ 'MY_DEFICIT' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.DEFICIT}} %
</div>
</div>
<div id="right">
<div class="left-inner floatRight">
{{ 'APPOINTMENTS' | translate }} :
</div>
<div class="right-inner">
{{listDataItem.APPT_CNT}}
</div>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll
icon="ion-loading-c"
distance="30%"
on-infinite="setDateRange();">
</ion-infinite-scroll>
</ion-content>
<!-- BOTTOM TABS -->
<div class="tabs-striped tabs-background-positive tabs-light">
<div class="tabs">
<a class="tab-item active" ui-sref="daily-list" href="/#/daily-list">
<i class="icon ion-ios7-paper-outline"></i>
</a>
<a class="tab-item" ui-sref="weekly-list" href="/#/weekly-list">
<i class="icon ion-star"></i>
</a>
<a class="tab-item" ui-sref="daily-list" href="/#/daily-list">
<i class="icon ion-gear-a"></i>
</a>
<a class="tab-item" ui-sref="daily-list" href="/#/daily-list">
<i class="icon ion-gear-a"></i>
</a>
</div>
</div>
</ion-view>
{{‘结果_按|天|翻译}
尝试使用和的JavaScript版本。
它们更容易在JS代码中操作,因为它们与服务$IonicAbsDelegate
和$ionicNavBarDelegate
一起提供,下面是一些使用navbar的示例:
- 带有左右按钮的简单页面:
左键
右按钮
- 通过侧菜单导航:
- 通过侧菜单和选项卡栏进行导航:
这可能会解决同样的问题,但这并不是问题的答案,我面临着完全相同的问题。是否可以将按钮添加到导航视图
标题栏?它是否支持离子标题栏?如果应该的话,至少对我来说,它是不起作用的。我也有同样的问题,到目前为止还没有找到解决办法。我也是……为同样的问题发毛。我有一个顶部标题,下面有两个窗格,左侧栏和右侧主窗格内容区域。然后我有一个主窗格的子标题。在这个子标题下,我想显示导航栏或选项卡,但无论我将其放置在哪里,都不会显示在ion导航视图上方或ion视图中ion内容的外部或内部。为什么导航栏不直接到达其包含div的顶部。我单击+1,因为我刚刚阅读了您的代码,就学会了如何将选项卡放在页面顶部:只需添加类“tabs top”。非常感谢。你好(这是一个建议)对于ionic使用中的设计不动产,这个链接ionic有自己的主题bulider,这将帮助您开始设计Temaplate,您最终找到解决方案了吗?
<ion-view title="onepage">
<ion-nav-buttons side="left">
<button class="button">
LeftButton
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-assertive">
RightButton
</button>
</ion-nav-buttons>
<ion-content class="padding">
<!-- The content of the page -->
</ion-content>
</ion-view>