Currently I am using the ion-fab-button as this:
<ion-fab-button size="small" [ngClass]="{'active-tab': currentTab === 'bookmarks'}">
<ion-icon name="bookmark-outline"></ion-icon>
<ion-text>Bookmarks</ion-text>
</ion-fab-button>
To display the following,
I had to explicitly dictate the width of the ion-fab-button and override --border-radius to achieve the oblong shape (aka the racetrack shape, not oval).
element.style {
--border-radius: 20px;
max-width: unset;
min-width: unset;
width: 120px;
}
I tried playing around with the other attributes. Like trying out display: inline-block and such. But I can't seem to figure it out.
How would you do it on your end to achieve the same thing without assigning a specific width? Since the labels (in the ion-text) length will vary, I need the width to be dynamic.