具有多条线的离子段

如何解决具有多条线的离子段

尝试将 6 个元素放入 1 或 2 行（取决于屏幕宽度）但没有成功。通过添加和元素获得了部分成功。如有必要，元素可以很好地分成 2 行，但会出现一个奇怪的故障：如果我再次单击所选按钮，选择将完全消失。

这是一个代码：

<ion-segment [(ngModel)]="doorColour" value="white">
<ion-grid>
  <ion-row>
        <ion-segment-button value="white">
          <ion-label>White</ion-label>
        </ion-segment-button>
        <ion-segment-button value="sandstone">
          <ion-label>Sandstone</ion-label>
        </ion-segment-button>
        <ion-segment-button value="almond">
          <ion-label>Almond</ion-label>
        </ion-segment-button>
        <ion-segment-button value="bronze">
          <ion-label>bronze</ion-label>
        </ion-segment-button>
        <ion-segment-button value="black">
          <ion-label>Black</ion-label>
        </ion-segment-button>
        <ion-segment-button value="forest green">
          <ion-label>Forest Green</ion-label>
        </ion-segment-button>

      </ion-row>
    </ion-grid>
  </ion-segment>

请指教。

解决方法

使用 scrollable 和 mode='md' 来滚动分段

<ion-segment [(ngModel)]="doorColour" value="white" scrollable mode="md">
    <ion-segment-button value="white">
      <ion-label>White</ion-label>
    </ion-segment-button>
    <ion-segment-button value="sandstone">
      <ion-label>Sandstone</ion-label>
    </ion-segment-button>
    <ion-segment-button value="almond">
      <ion-label>Almond</ion-label>
    </ion-segment-button>
    <ion-segment-button value="bronze">
      <ion-label>Bronze</ion-label>
    </ion-segment-button>
    <ion-segment-button value="black">
      <ion-label>Black</ion-label>
    </ion-segment-button>
    <ion-segment-button value="forest green">
      <ion-label>Forest Green</ion-label>
    </ion-segment-button>
  </ion-segment>