'is using ion slide inside ion segment a good approach

In my project I am tasked to create a scrollable filter buttons for a list. I was thinking to use either ion-slides or ion-segment, but using ion-slides gives me no option for segment changing, while ion-segment does not fit the requirement on the design (3.5 buttons showed before scrolling, accurate margins). Therefore I come up with this:

<ion-segment scrollable="true" (ionChange)="segmentChange($event)">
      <ion-slides [options]="slideOption">
        <ion-slide>
          <ion-segment-button class="buttonActive" value="a">A</ion-segment-button>
        </ion-slide>
        <ion-slide>
          <ion-segment-button class="button" value="b">B</ion-segment-button>
        </ion-slide>
        <ion-slide>
          <ion-segment-button class="button" value="c">C</ion-segment-button>
        </ion-slide>
        <ion-slide>
          <ion-segment-button class="button" value="d">D</ion-segment-button>
        </ion-slide>
      </ion-slides>
    </ion-segment>

I am wondering if my approach is correct or there are a simpler solution. This method also gives me a problem of unable to create padding inside the ion-segment (I tried putting ion-label inside but cannot create whitespace so that the text become more centered)

htmlangularionic-framework


Solution 1:[1]

You are closing your button in down line. Close on the same line.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kaio Dutra

Related Questions