What is the best way to bring visibility to the ripple or underliner in my disabled mat-tab?

My project utilizes Angular Material for tab navigation, and I am working on customizing the appearance of my mat-tab component to match a specific design.

Current Design vs. Desired Design: view image description here Current Design (Figure 1): Inactive tabs do not have an underline. Desired Design (Figure 2): I aim for inactive tab underlines to be in dark gray, while active tab underline remains bright green.

I have experimented with ::ng-deep and investigated different classes, but I am unable to achieve the desired outcome. Here's what I've tried so far:

`::ng-deep .mdc-tab-indicator__content--underline {
border-color: grey;
}`

What Assistance I Require: How can I make sure that the underline for inactive tabs is clearly visible in dark gray? Am I targeting the correct classes and elements to style the mat-tab? Are there any recommended practices or alternative methods within Angular Material to accomplish this design goal? Despite using Chrome DevTools inspector and ng-deep for styling application, the results are not as expected.

Any advice or snippets of code to help achieve this design will be greatly appreciated!

Additional Details:

  • Angular Version: 17
  • Angular Material Version: Latest Thank you for your assistance!

I have been utilizing Angular Material's mat-tab-group to customize my tab component. My objective is to ensure that inactive tab underlines are visible with a dark gray color, while active tab remains bright green. Below is my current SCSS attempt:

scss

`::ng-deep .mat-mdc-tab-group .mat-mdc-tab {
// Custom styles for inactive tab underline
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #555555;  // Dark gray color for inactive tabs
opacity: 0.5;  // Attempting to keep it visible
}
&.mdc-tab--active::after {
background-color: #00d36b;  // Green color for active tab
opacity: 1;
}
}`

Expected Outcome: I anticipated that this SCSS would maintain the visibility of inactive tab underlines in dark gray color, similar to the second image in my example where inactive tab underlines are consistently displayed in dark gray.

Actual Outcome: Unfortunately, the inactive tab underline remains unseen or does not display as intended. The active tab's underline changes correctly to green, but the inactive ones do not retain the styling I attempted to apply. Despite using ::ng-deep to penetrate Angular's ViewEncapsulation, the desired result has not been achieved.

I am seeking guidance on whether I am targeting the appropriate elements and if there are best practices in Angular Material to reach this particular design requirement.

Answer №1

To achieve the desired effect, utilize the following CSS code snippet. It is recommended to use ::before as it allows the active color to be displayed on top of the gray background.

Using ::after will cause the tabs to be obscured by the gray section because it renders after the tabs.

.mat-mdc-tab-label-container::before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: lightgray;
}

Check out the Stackblitz Demo here

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

Is there a way to stop objects in a particular list from being dragged into another nested ul using jquery sortable?

I am faced with a challenge regarding nested lists, specifically when it comes to preventing parent-parent list items from dropping into an inner <div> within an <li> <div> that already contains its own <ul> <li> list. Additio ...

Apply the lightBox function to all links within the gallery that have a CSS class added

I'm struggling to incorporate my theme's unique style for the lightbox. I need help figuring out how to integrate my theme's CSS class into the code snippet provided below, in order to ensure that it loads my custom lightbox themes. The cur ...

unable to successfully complete parameter in angular 2

After receiving data from the API, I am using the subscribe method to execute lines of code. Below is the code snippet: this.attRecService.getAgendaData(moment(this.viewDate).format('YYYY-MM')).subscribe( resp => { this.ag ...

What is preventing my divs from aligning properly?

After trying various methods and conducting thorough research, I am still unable to resolve the issue with my code. Could someone please review it and provide some guidance? Any help would be greatly appreciated. I have experimented with different div wid ...

The Angular router is throwing a "TS2339: Property 'navigate' does not exist on type 'Route'." error message

I'm really struggling with this issue. Why is the 'navigate' property not available to use? When attempting to use it, I receive the error message "TS2339: Property 'navigate' does not exist on type 'Route'." For more in ...

The specified type '{ flag: boolean; }' cannot be assigned to the type 'IntrinsicAttributes & boolean'

Just delving into TypeScript and I've hit a snag when trying to pass an element to another component. Feeling lost on how to proceed. Error lurking in Cards component export default function MySpecialProject() { const [toggle, setToggle] = useState ...

Can anyone recommend a super sleek drop-down navigation menu that includes both images and text descriptions?

My interest has been piqued on how to create a menu similar to the one on with all the images and text details. Does anyone have any insights on the technologies utilized for this? Are there any commercial options available that offer a similar functiona ...

What is the best way to use lodash to group objects that contain nested objects?

Currently utilizing Typescript in conjunction with Lodash! Upon retrieving data from the database, here is the resulting output: [ { "unitPrice": 0.01, "code": "92365524", "description": "Broto gr ...

What is the best way to utilize a JavaScript variable as a background within an inline style sheet?

I have a fun project for this evening - I am trying to make my website load a different background image every time the page is refreshed. Earlier on in this project, I managed to make the background interact with window size and screen resolution similar ...

Unexpected behavior in grid column layout in Bootstrap 4 has caused some confusion

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="row"> <div clas ...

Issues with Font-Face Implementation

Hey there! I'm currently working on incorporating a new font into my website using font-face. However, it seems like something might be missing from my code because the style isn't being applied correctly. Here is what I have so far: <div id= ...

jQuery appears to be unresponsive or inactive

I'm trying to implement a jQuery script that will slide in a header after scrolling on the page, but for some reason, it's not working. When I reach the 3rd line, my code editor displays a !read only alert, suggesting there may be a syntax issue? ...

Issue with VS Code locating names when using Jest and TypeScript

Currently, I am utilizing Jest in conjunction with TypeScript. Although my code functions properly and I can successfully build my project, Visual Studio Code consistently displays an error pertaining to all Jest methods (describe(), test()...): Cannot fin ...

What is the reason for nth-of-type selectors not functioning on the third element?

I have a question regarding CSS nth-of-type. In the following code snippet, nth-of-type(2) and nth-of-type(3) are functioning properly, however, nth-of-type(4) and nth-of-type(5) are not working as expected. Could there be an issue with my code? <div i ...

implementing a smooth transition effect for image changes upon hover

I've been working on a React project where I created a card that changes its image when hovered over. I wanted to add a smoother transition effect to the image change using transition: opacity 0.25s ease-in-out;, but it doesn't seem to be working ...

Creating an interactive questionnaire

Looking for insights on the following situation: I'm working with a survey structure that consists of questions and answers: questions: Question[]; answer: Answer[]; Where Question is defined as: export class Question { idQuestion: string; ...

What is the best way to generate hyperlinks for hidden content controlled by a show/hide javascript function?

I am interested in creating links to hidden content using a show/hide JavaScript. Within the hidden content, there are three divs containing videos and text that I would like to link to. For example, linking to the "example" div as shown below. The links d ...

Guide to react native: aligning symbol in the middle

Currently, I am developing a simple app using React Native that targets both Android and IOS platforms. Within a View element, I have a Text component that displays a star symbol based on a conditional string {item.isFavourite ? "\u2605": "\u2606 ...

Differentiating font sizes for headings (h1-h6) based on Bootstrap breakpoints

Is there a way to utilize bootstrap's font size breakpoints (sm, md, lg, xl, etc.) for the various font sizes provided by bootstrap: <p class="fs-1">.fs-1 text</p> <p class="fs-2">.fs-2 text</p> <p class= ...

Ways to prevent a background image from repeating in an HTML email without relying on CSS

I created a custom background picture, but when I tried to use it with CSS in Outlook, it didn't work. So, I added the picture directly into the body tag which allowed me to display it, but now it is repeating. Even after trying to prevent the repeti ...