如何删除离子头中的边框答案

【问题标题】：how to remove border in ion-header如何删除离子头中的边框
【发布时间】：2023-08-03 01:04:01
【问题描述】：

在我的 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，但它什么也没做。

【问题讨论】：

标签： html sass ionic5 angular11

【解决方案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 请检查::

【讨论】：