如何在离子网格上对齐固定离子段答案

【问题标题】：How to align a fixed ion-segment over ion-grid如何在离子网格上对齐固定离子段
【发布时间】：2021-05-11 08:34:17
【问题描述】：

我有以下离子代码：

ion-segment-button{
     --indicator-box-shadow: transparent!important;
     border-radius: 0.5rem !important;
     margin: 0;
     --background:white;
     --color:#2d2e87;
     --background-checked: #3880ff !important;
     --color-checked: white;
     --indicator-color : transparent!important; /* this solution */
}

<ion-content padding>
  <ion-segment (ionChange)='onFilterUpdate($event)' value='all' slot="fixed">
    <ion-segment-button value='all'>All places</ion-segment-button>
    <ion-segment-button value='bookable'>Bookable places</ion-segment-button>
  </ion-segment>
  <ion-grid>
    <ion-row>
      <ion-col size='12' size-sm='8' offset-sm='2' text-center>
        <ion-card>
          <ion-card-header>
            <ion-card-title>{{loadedPlaces[0].title}}</ion-card-title>
            <ion-card-subtitle>{{loadedPlaces[0].price | currency}}/Night</ion-card-subtitle>
          </ion-card-header>
          
...

离子段固定在顶部，但它像这样流过离子网格：

enter image description here

有人可以建议如何解决此问题，以使分段和网格位于正确的位置吗？

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

使用ion-grid 将它们保持在彼此之上而不是溢出

这是一个示例代码

<ion-grid>
 <ion-row>
 <ion-segment (ionChange)='onFilterUpdate($event)' value='all' slot="fixed">
    <ion-segment-button value='all'>All places</ion-segment-button>
    <ion-segment-button value='bookable'>Bookable places</ion-segment-button>
  </ion-segment>
 </ion-row>
 <ion-row>
   <ion-col size='12' size-sm='8' offset-sm='2' text-center>
      <ion-card>
        <ion-card-header>
          <ion-card-title>
             {{loadedPlaces[0].title}}
          </ion-card-title>
          <ion-card-subtitle>
              {{loadedPlaces[0].price | currency}}/Night
          </ion-card-subtitle>
        </ion-card-header>
     <ion-card>
    </ion-col>
 </ion-row>
</ion-grid>

这将在彼此的顶部创建 2 行，而段占据第一行并扩展以填充整行，第二行可以有一个大小为 8 的列来托管您的卡

【讨论】：

不知道为什么，但是在我将其添加到网格本身之后，我的片段从 UI 中消失了。只是为了让您知道，我在此代码之后的行中添加了一个项目列表。因此，当我向下滚动时，我要求第一行（段）浮动在顶部。
所以你希望 Segment 固定在顶部，然后有一个项目列表，该列表应该向下滚动可能/可能是无限项目列表

【解决方案2】：

您应该为 Ion-Grid 添加 margin-top。理想情况下，margin-top 的像素将是 ion-segment 的高度。还将白色背景设置为离子段。我不知道你在 Angular 中的样式，但在 React 中，如果 IonSegment 的高度为 48px，则代码为

<IonContent>
  <IonSegment slot="fixed style={{background:'white'}}>
  <IonSegment/>
  <IonGrid style={{marginTop:'48px'}}></IonGrid>
</IonContent>

【讨论】：