css - Cum pot face ca ripple-ul sau sublinierea pentru mat-tab dezactivat să apară
Folosesc Angular Material pentru navigarea prin tab-uri a proiectului meu și încerc să stilizez componenta mea mat-tab pentru a obține un design specific.
Designul actual vs. Designul dorit: introduceți descrierea imaginii aici Designul actual (Figura 1): Tab-urile inactive nu au subliniere. Designul dorit (Figura 2): Vreau ca sublinierile tab-urilor inactive să apară în gri închis, în timp ce sublinierea tab-ului activ ar trebui să rămână verde aprins.
Am încercat să folosesc ::ng-deep și am inspectat diverse clase, dar nu am reușit să obțin rezultatul dorit. Iată ce am încercat până acum:
`::ng-deep .mdc-tab-indicator__content--underline {
border-color: grey;
}`
Cu ce am nevoie de ajutor: Cum pot să mă asigur că sublinerea pentru taburile inactive rămâne vizibilă în gri închis? Vizez clasele și elementele corecte pentru a stiliza mat-tab? Există bune practici sau abordări alternative în Angular Material pentru a realiza acest design? Am folosit inspectorul Chrome DevTools și ng-deep pentru a aplica stiluri, dar nu obțin rezultatele așteptate.
Orice ghidare sau fragmente de cod care să ajute la realizarea acestui design ar fi foarte apreciate!
Context suplimentar:
- Versiune Angular: 17
- Versiunea Angular Material: Cea mai recentă Mulțumesc pentru ajutorul tău!
Am încercat să folosesc mat-tab-group din Angular Material pentru a stiliza componenta mea de tab-uri. Vreau ca sublinierea tab-ului inactiv să fie vizibilă și să aibă o culoare gri închis, în timp ce tab-ul activ ar trebui să rămână verde deschis. Aceasta este încercarea mea actuală în SCSS:
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; // Tried to keep it visible
}
&.mdc-tab--active::after {
background-color: #00d36b; // Green color for active tab
opacity: 1;
}
}`
Ce am așteptat: M-am așteptat ca acest SCSS să mențină sublinierea filei inactive vizibilă într-o culoare gri închis, așa cum se arată în a doua imagine a exemplului meu, unde sublinierile filelor inactive au o linie consecventă și vizibilă de culoare gri închis.
Ce s-a întâmplat de fapt: Cu toate acestea, sublinierea filei inactive rămâne invizibilă sau nu se afișează așa cum era de așteptat. Sublinierea filei active se schimbă corect în verde, dar filele inactive nu păstrează stilizarea pe care am încercat să o aplic. Am folosit ::ng-deep pentru a mă asigura că stilurile pătrund prin ViewEncapsulation al Angular, dar tot nu am obținut rezultatul dorit.
Caut îndrumări cu privire la faptul dacă vizez elementele corecte și dacă există bune practici în Angular Material pentru a realiza acest tip de design.
Răspuns #1
Poți folosi CSS-ul de mai jos, preferă ::before deoarece permite ca culoarea activă să fie afișată deasupra fundalului gri.
Dacă folosești ::after, acesta se redă după taburi, astfel încât taburile sunt ascunse de secțiunea gri.
.mat-mdc-tab-label-container::before {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 2px;
background: lightgray;
}