首页 文章

修复离子项目 Headers 中的 Headers 对齐方式

提问于
浏览 次
0

我有一个带有左侧和右侧菜单的抽象模板 . 对于 ion-side-menu-content 标签上的 Headers ，我需要有3行文字 .

但由于一个我无法识别的原因，当我尝试将 title 类应用于文本时，它要么隐藏在视图之外，要么粘在左边，移动我所拥有的左对齐按钮 .

<ion-side-menus>
  <ion-side-menu-content>

    <ion-nav-bar class="bar-stable">
      <p>Ac vestibulum scelerisque
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>

Without class="title"

Without class="title"

With class="title"

With class="title"

为了使左键保持在左侧，并将 Headers 内容置于 Headers 栏中心，我需要更改什么？

html css ionic-framework

1 回答

  • 1

    http://ionicframework.com/blog/navigating-the-changes/

    经过一番阅读，我发现我的麻烦来源实际上是一个DOM结构问题 .

    <ion-nav-bar> 必须是 <h1> 的父标记以及 <ion-nav-button> 标记 .

    <h1> 默认情况下将呈现为 Headers 栏中的 Headers . 只会显示一行 . 如果您不使用 <h1> ，则您希望作为 Headers Headers 的内容将从视口中隐藏 . 据推测，解决方案是只使用Ionic开发人员想要的 <h1> 标签，并使用CSS覆盖强制显示多行 .

    您的HTML应如下所示：

    <ion-nav-bar class="bar-stable">
  <h1 class="title">Ac vestibulum scelerisque
    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>
    回复于

相关问题