离子副标题栏重叠内容

Posted 2023-03-06

【中文标题】离子副标题栏重叠内容

【英文标题】：Ionic subheader bar overlapping content

【发布时间】：2015-05-30 21:48:08

【问题描述】：

在带有标题和子标题的视图中，子标题内容与视图内容重叠。

幻灯片菜单中的标题

  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left" ng-hide="$exposeAside.active"></button>
  </ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

视图中的子标题

<ion-header-bar align-title="center" class="bar bar-subheader custom bar-energized" ng-if="datos.subTitulo">
      <div class="buttons">
         <a class="ion-chevron-left" href="#/app/ranking/ubicacion/datos.divAnt" ng-if="datos.divAnt"></a>
      </div>
      <h2 class="subtitle">datos.subTitulo</h2>
      <div class="buttons">
         <a class="ion-chevron-right" href="#/app/ranking/ubicacion/datos.divSig" ng-if="datos.divSig"></a>
      </div>
</ion-header-bar>

subheader 中的Div 按钮重叠内容，h2 显示 100%。 这段代码中缺少什么？谢谢

[编辑] 重写代码以满足我的需要：副标题比标题小，角落有两个链接和一个标题。

<ion-header-bar align-title="center" class="bar-subheader subheader_custom bar-energized">
    <div class="button button-clear"> 
        <a class="icon ion-ios-arrow-back blanco" href="#/app/ranking/ubicacion/datos.divAnt" ng-if="datos.divAnt"></a>
    </div>
    <div class="h2 title title_custom">datos.subTitulo</div>
    <div class="button button-clear"> 
        <a class="icon ion-ios-arrow-forward blanco" href="#/app/ranking/ubicacion/datos.divSig" ng-if="datos.divSig"></a>
    </div>
</ion-header-bar>

添加这个css：

.has-subheader 
    top: 70px;


.bar-subheader.subheader_custom 
    display: block;
    height: 26px;
    top: 44px;

.title.title_custom 
    font-size: 16px;
    font-weight: 300;
    height: 20px;
    left: 0;
    line-height: 20px;
    margin: 2px 10px 2px 10px;
    min-width: 24px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: center;
    text-overflow: ellipsis;
    top: 0;
    white-space: nowrap;
    z-index: 0;

甚至按钮都不符合副标题标题。有什么想法吗？

新状态：

【参考方案1】：

您可以在 ion-content 指令的主要内容中添加 has-header 或 has-subheader 类。

这是我的代码：

<ion-view view-title="View Title">
  <ion-content>
    <div class="bar bar-header">
      <h2 class="title">Sub Header</h2>
    </div>
    <div class="list has-header">
        <a class="item item-icon-left" href="#">
            <i class="icon ion-email"></i>
            Check mail
        </a>
        <a class="item item-icon-left item-icon-right" href="#">
            <i class="icon ion-chatbubble-working"></i>
            Call Ma
            <i class="icon ion-ios-telephone-outline"></i>
        </a>
    </div>
  </ion-content>
</ion-view>

<div class="list has-header"> 我将has-header 类添加到我的列表中以避免子标题重叠

【参考方案2】：

如果您在 android 中遇到此问题，请使用以下方法

.platform-android .bar-subheader  
		top: 93px;

https://forum.ionicframework.com/t/sub-header-not-showing-on-android-with-tabs/15341/18

【参考方案3】：

如果您将 SASS 与 Ionic 一起使用，则可以轻松更改子页眉、页脚和子页脚的高度。如果你想要一个 70px 高的副标题，只需将 $bar-subheader-height: 70px; 添加到你的 ionic.app.scss 文件中。您的 scss 文件应类似于：

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

$bar-subheader-height: 70px;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

查看www/lib/ionic/scss/_variables.scss 文件，了解您可以轻松更改的其他一些内容。

这里是instructions for setting up sass with ionic，这里是quick tutorial。

【参考方案4】：

通过添加 CSS 类has-subheader，确保内容视图知道它需要为子标题留出空间：

<ion-content class="has-header has-subheader">
</ion-content>

见http://ionicframework.com/docs/components/#subheader

【讨论】：

是的，离子含量是：。所以子标题与内容重叠，而不是与子标题重叠的内容

啊好的。 <h2 class="subtitle">datos.subTitulo</h2> 行呢，“字幕”类是否已定义？常规的 ionic CSS 也仅显示子标题 h2 的“标题”类。

编辑答案以显示 css。类副标题现在是 title_custom。谢谢

既然您更改了子栏的高度和 h2 的高度/行高，您需要将按钮的字体大小和行高/最小高度更改为非常适合较小的酒吧。