CODEWITHSUNDEEP
angularangular-materialangular-material-tableangular17mat-tab
saketh
saketh

Reputation: 9

i have 4 mat tab labels in a mat tab group and i want to position 2 of them left and another 2 label to right how to achive this one for angular 17

I require one and two mat tab labels to position on left side and three and four mat-tab-labels on right side of the page. I tried giving margin but the the element is expanding all the way to right but rather is there any way ti position it to right side

Upvotes: 0

Views: 161

Answers (3)

Piyumi Gamage
Piyumi Gamage

Reputation: 19

.left-tabs {
  float: left; /* Position labels to the left */
  width: 50%; /* Adjust width as needed */
}

.right-tabs {
  float: right; /* Position labels to the right */
  width: 50%; /* Adjust width as needed */
}

Upvotes: 1

PykaraTech_Angular
PykaraTech_Angular

Reputation: 73

Assign the @Input value [tab-right] to specify the number of tabs you want on the right side, and update the code below in your HTML file:

<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [tab-right]="2">
</mat-tab-group>

View_StackBlitz

Upvotes: -1

Eliseo
Eliseo

Reputation: 57909

The way to makes a mat-tab to the left it's simply add as style margin-leff:'auto'

Well, the problem is that it's not easy reach the "element". the mat-tabs have a class ".mat-mdc-tab.mdc-tab". So we can use getElementsByClassName('mat-mdc-tab mdc-tab') to reach the "tabs"

Well, we can create a directive like

@Directive({
  standalone:true,
  selector:'[tab-right]'
})
export class TabToRight{
  constructor(private el:ElementRef){}
  @Input('tab-right') set _(value:number)
  {
    setTimeout(()=>{
      const tabs=this.el.nativeElement
                              .getElementsByClassName('mat-mdc-tab mdc-tab');
      const el=tabs && tabs.item(value);
      if (el)
        (el as any).style["margin-left"]='auto';
    })
  }
}

And use simply like

<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [tab-right]="1">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab class="sep" label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

See that the index begans in 0 for the first tab, 1 for the second one, ...

a stackblitz

Upvotes: 0

Related Questions