Narrow SegmentedBarItem with CSS?


#1

I have a SegmentedBar Markup like this:

<ScrollView #TabScrollBar orientation="horizontal" scrollBarIndicatorVisible="false" backgroundColor="black">
  <SegmentedBar [items]="tabItems" selectedIndex="{{selectedTabIndex}}" (selectedIndexChange)="onSelectedIndexChange($event)"
    class="m-5"></SegmentedBar>
</ScrollView>

I try to style the SegmentedBarItems like this:

.segmented-bar-item {
    effective-padding-left: 0;
    effective-padding-right: 0;
    padding: 0;
    margin: 0;
}

How is it possible to style the SegementedBarItem?


#2

If you check the docs, the view hierarchy of SegmentedBarItem is ViewBase so it won’t support padding / margin etc., But you might able to do what you expect by modifying the underlaying native element.