mat-tab-group - Positions elements in the center, right, and left for optimal alignment

Is it possible to align the buttons in a mat-tab-group to the left, center, and right positions? I am using mat-tabs. How can I have elements with "left" align to the left, elements with "center" in the center, and elements with "right" align to the right?

I attempted to use mat-align-tabs="center" to center some elements, but it did not work as expected.

I tried the following CSS code, but it only worked for one case. I am struggling to align items in all three sections (center, right, and left).

.mat-tab-labels {
    display: flex;
    justify-content: center !important;
}

Could someone please assist me in placing the elements to the left, center, and right while ensuring that all buttons fit on the screen?

DEMO

code

<mat-sidenav-container fxFlexFill>
    <mat-sidenav-content fxFlexFill>
        <mat-tab-group mat-align-tabs="center">
            <mat-tab label="Left">Content 1</mat-tab>
            <mat-tab label="Left">Content 2</mat-tab>
            <mat-tab label="Center">Content 3</mat-tab>
            <mat-tab label="Center">Content 4</mat-tab>
            <mat-tab label="Center">Content 5</mat-tab>
            <mat-tab label="Center">Content 6</mat-tab>
            <mat-tab label="Right">Content 7</mat-tab>
            <mat-tab label="Right">Content 8</mat-tab>
            <mat-tab label="Right">Content 9</mat-tab>
            <mat-tab label="Right">Content 10</mat-tab>
            <mat-tab label="Right">Content 11</mat-tab>
        </mat-tab-group>
    </mat-sidenav-content>
</mat-sidenav-container>

Example

https://i.sstatic.net/tGBCw.png

angulartypescriptangular-materialmaterial-design

Answer №1

Here is a suggested code snippet for arranging content in tabs:

<mat-sidenav-container fxFlexFill>
    <mat-sidenav-content fxFlexFill>
        <mat-tab-group mat-align-tabs="center">
            <mat-tab label="Left">Content 1</mat-tab>
            <mat-tab label="Left">Content 2</mat-tab>
            <mat-tab class="center" label="Center">
                <div class="center">Content 3 </div>
            </mat-tab>
            <mat-tab label="Center">
                <div class="center">Content 4 </div>
            </mat-tab>
            <mat-tab label="Right">
                <div class="right">Content 5</div>
            </mat-tab>
            <mat-tab label="Right">
                <div class="right">Content 6 </div>
            </mat-tab>
        </mat-tab-group>
    </mat-sidenav-content>
</mat-sidenav-container>

To style the alignment of the content, add the following SCSS:

.center {
  @at-root div#{&} { 
    text-align: center;
  }
}
.left {
  @at-root div#{&} { 
    text-align: left;
  }
}
.right {
  @at-root div#{&} { 
    text-align: right;
  }
}

View live example on StackBlitz

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I inform Typescript that an interface will exclusively consist of defined members?

My interface looks like this interface Person { name?:string; age? :number; gender?:string } I need to reuse the same interface type, but with a modification indicating that all members will never be undefined. The updated version would look like this: ...

typescript

Is there a way to selectively preload modules based on whether their parent modules have been activated?

I have successfully implemented lazy loading on my website. Currently, I am working on configuring a custom preloading strategy. Let's consider the url structure below: / /fruit /fruit/bananas /fruit/apples /vegetables My objective is to preload th ...

angularangular-routing

How can one effectively incorporate a 'toJson' function in TypeScript?

Does anyone know the best approach for adding a toJson function to a custom class? I've considered implementing functions like Foo.toJson, Foo.toJsonObject, or Foo.jsonify. Some examples suggest using a serializer. Is that necessary, or is there a mo ...

javascripttypescript

What could be causing the type errors I am encountering while trying to resolve this Promise within a generic function?

I am attempting to implement additional types within this WebSocket protocol: type Action = { action: "change-or-create-state"; response: string; } | { action: "get-state"; response: string | null; }; /** * map an action to its response ...

typescript

Failure during building Angular 13 library with Ivy partial compilation mode

Recently, I encountered an issue while trying to install an npm package that utilized node-gyp. In an attempt to resolve the problem, I upgraded my Node.js minor version from 16.13.0 to 16.13.1 and also updated my Angular CLI from 13.0.2 to 13.2.0. After ...

angularangular-ivy

Encountering the error "tsx is not defined" during a Jest test in a React/TypeScript project

I'm currently working on implementing Jest tests within a React project that has enforced TypeScript settings. In a simple test.tsx file located in the test folder, I have the following code: import React from 'react'; describe('Test& ...

reactjstypescriptjestjs

Tips for effectively utilizing 'ngModel' alongside a form control name

When a user enters or inserts a value into one textarea, I want it to automatically update the other textarea field as well. I thought about using the change function to achieve this, but when I tried to use ng-model with the control name, I encountered a ...

angularangular-formsangular8

Vue 3 Electron subcomponents and routes not displayed

Working on a project in Vue3 (v3.2.25) and Electron (v16.0.7), I have integrated vue-router4 to handle navigation within the application. During development, everything works perfectly as expected. However, when the application is built for production, the ...

typescriptvue.jselectronvue-router

Dealing with the possibility of an empty array when accessing elements by index in Typescript

What is the best way to handle accessing elements by index in an array in Typescript when the array can be empty, resulting in potentially undefined elements? I am developing a simple game using React and Typescript where I have a variable named game whic ...

typescripttypes

Utilizing moment.js in conjunction with typescript and the module setting of "amd"

Attempting to utilize moment.js with TypeScript 2.1.5 has been a bit of a challenge for me. I went ahead and installed moment using npm : npm install moment --save-dev The d.ts file is already included with moment.js, so no need to install via @typings ...

typescriptmomentjsamd

Update the image source dynamically upon the opening of an accordion in Angular

I have the following HTML code snippet in my file: <div class="col-md-3 col-sm-2 col-2 collapsedData" > <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-con ...

angular

Having trouble getting ng-bootstrap to function properly in Angular 4?

After recently familiarizing myself with Angular 4, I decided to integrate bootstrap into my project. Following the instructions provided on the ng-bootstrap website (), I installed ng-bootstrap as recommended. Despite following all the steps outlined on ...

twitter-bootstrapangularbootstrap-4ng-bootstrapangular4-forms

Even if I set a small modal, the large one can still be visible in the background

I've been working on a small modal, but encountered an issue where the large modal remains visible in the background when the small one is displayed. Any suggestions on how to fix this? I made some updates to my code based on recommendations. https:/ ...

angularngx-bootstrap

What exactly does RouteComponentProps entail?

While exploring information on React, I came across the term RouteComponentProps. For example: import { RouteComponentProps } from 'react-router-dom'; const ~~~: React.FC<RouteComponentProps> and class BookingSiteOverview extends React.Com ...

reactjstypescriptreact-router

How can I use the form's restart() method in React-Final-Form to clear a MUI TextField input and also capture the event at the same time?

When I use form.restart() in my reset button, it resets all fields states and values based on my understanding of the Final-Form. The reset method triggers and clears all fields in the form, and I can capture the event in the autocomplete. However, I am fa ...

reactjstypescriptmaterial-uireact-final-form

What steps can I take to resolve the 'Object may be null' error in TypeScript?

I am facing a similar issue to the one discussed in this thread, where I am using Draft.js with React and Typescript. After following the code example provided in their documentation, I encountered the 'Object is possibly 'null'' error ...

reactjstypescriptdraftjs

Utilize fixed values in type declaration

Strange Behavior of Typescript: export type MyType = 0 | 1 | 2; The above code snippet functions correctly. However, the following code snippet encounters an issue: export const ONE = 1; export const TWO = 2; export const THREE = 3; export type MyType = O ...

javascripttypescripttypesconstants

Incorporating a popover onto a button within an Angular-centric project

Having recently delved into Angular, I decided to create a basic page showcasing details of a legal case. To enhance the visual appeal, I incorporated Angular Material library for its attractive icons, which I intended to display alongside plaintiff and se ...

javascriptangularbootstrap-4tooltip

A single network request is made for every subscription

When making a post request using HTTPClient and subscribing to the returned observable, I am encountering strange behavior where each subscription triggers a new post request. So, if I subscribe to the observable 5 times, I end up with 5 separate post requ ...

angularobservable

Looking to customize the scrollbar style within an Angular Material table?

Is there a standard method for customizing the scrollbar design in an Angular Material table similar to the one displayed below? (I am unable to identify any applicable styling attributes through element inspection.) angular-table-issue ...

angularangular-material