html - 如何删除离子头中的边框

Question

在我的 ionic 5 应用程序中，我的 HTML 如下：

<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <ion-title>Title</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-segment value="1" [color]="segementColor" (ionChange)="onSegmentChange($event)">
      <ion-segment-button value="1" layout="icon-start">
        <ion-label>Segment 1</ion-label>
      </ion-segment-button>
    
      <ion-segment-button value="2" layout="icon-start">
        <ion-label>Segment 2</ion-label>
      </ion-segment-button>
    
      <ion-segment-button value="3" layout="icon-start">
        <ion-label>Segment 3</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

带截图：

我的问题是如何删除标题工具栏后出现的线条或边框？我试过了，border: none但它什么也没做。

标签： htmlsassionic5angular11

Answer 1

试试这个代码:: 这会将你的离子段放在标题中，这样你的标题边框就不会再显示了............

<ion-header>
  <ion-toolbar>
    <ion-title mode="ios">Title</ion-title>

    <ion-segment value="1">
      <ion-segment-button value="1" layout="icon-start">
        <ion-label>Segment 1</ion-label>
      </ion-segment-button>

      <ion-segment-button value="2" layout="icon-start">
        <ion-label>Segment 2</ion-label>
      </ion-segment-button>

      <ion-segment-button value="3" layout="icon-start">
        <ion-label>Segment 3</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

这是 OUTPUT ScreenShot 请检查::