I have added angular material to my project and set up an empty component with the html from the tabs example.
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
Every time I click on a tab or even if I add a button the ripple effect shows outside the element off to the side.
Here's a picture of what is happening.
https://imgur.com/a/rSQHFNQ
Edit: Figured it out. I forgot to include the line
#include mat.core();
in my custom theme
Related
I have used Mat Tab component to show a view of another component (which is currently a raised mat Hello button).. Earlier, there was an issue of tabs not showing full view during when the hello was shown in a tiny scroll along with Content 1.. when I resolved the full view problem using dynamic height, all other content is showing up except the component reference HTML element..
<mat-tab-group dynamicHeight="True">
<mat-tab label="L1">
<div>bda></div>
<app-project-form></app-project-form>
<div>bda></div>
<div>bda></div>
</mat-tab>
<mat-tab label="L2"></mat-tab>
<mat-tab label="L3"></mat-tab>
</mat-tab-group>
What's actually shown:
Expected output should show the Hello button after the first bda>, instead it is ignored.. Please help in resolving this...
I have below code
<p-tabView #tabview *ngIf="mycondtion" class="page" [scrollable]="scrollable">
<ng-container *ngFor="let list of lists">
<p-contextMenu [target]="link" [model]="items"> </p-contextMenu>
<p-tabPanel [header]="list.listName" #link>
<app-data-module [List]="list"></app-data-module>
</p-tabPanel>
</ng-container>
on rightclick of tabpanel, it should show the context menu, but its not showing, i dont know what am i missing here? please help
You might be able to use header template (instead of a "header="). Something like this:
<p-tabView #tabview *ngIf="mycondtion" class="page" [scrollable]="scrollable">
<p-tabPanel *ngFor="let list of lists">
<ng-template pTemplate="header">
<!-- Here is where all the header content will go, including the context menu -->
<div #link>{{list.name}}</div>
<p-contextMenu [target]="link" [model]="items"</p-contextMenu>
</ng-template>
<!-- Here is where the content of the tab will go -->
<app-data-module [List]="list"></app-data-module>
</p-tabPanel>
</p-tabView>
The main flaw here is, the context menu only appears when right-clicking on the <div>; clicking anywhere else in the tab header still won't work. I've not found a way around that, but hopefully this will help get you in the right direction.
I am trying to display data on each and every tab, but the issue is the data I have is relatably large to fit in a single screen.
I am looking for a way to make tabs scrollable so that I can scroll on the data.
Is there any way to add buttons on the edges of the tabs or add a horizontal scrollbar to make it scrollable?
Something like this, which is responsive too.
Thanks
You can solve it through Angular material Tabs. Here, is the documentation of angular.
https://material.angular.io/components/tabs/examples
Remember, you have to import MatTabModule on your angular module, like below:
I have added it on my project and a sample image is like below:
Additionally, if you want to add a button instead of text, you can do it also. Here is a sample image for you:
Here, sample code for this is
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
First
</ng-template>
Content 1
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
Second
</ng-template>
Content 2
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
Third
</ng-template>
Content 3
</mat-tab>
</mat-tab-group>
You can use any mat-icon class here to change the button icon. You can use this link https://material.io/resources/icons/?style=baseline .
Hopefully, it will solve your problem.
This is the code example being used in angular Material for Sidenav. Im using this very same example on my page. However, I could find any instructions how to open the sidenav from left to right from the right side of the screen. Anybody knows how to ?
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
(closed)="events.push('close!')">
Sidenav content
</mat-sidenav>
<mat-sidenav-content>
<p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p>
<p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
<p>Events:</p>
<div class="example-events">
<div *ngFor="let e of events">{{e}}</div>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
If you look to the API tab there is an input directive position for you to define.
position: 'start' | 'end'
The side that the drawer is attached to.
<mat-drawer-container class="example-container">
<mat-drawer #sideNav mode="side" opened="true" position="end">
Right drawer
</mat-drawer>
<mat-drawer-content>
Main content
</mat-drawer-content>
</mat-drawer-container>
DEMO
You can use input directive position="end" for opening from the right side in mat-drawer.
For instance:
<mat-drawer position="end">
https://material.angular.io/components/sidenav/overview
I have tried adding position="end" to make it work but it didn't.
For any lost desperate souls, try adding style.position="absolute" and set your .sidenav to have left: calc(100% - 200px);
I've tried a number of ways to call the mat-tab and mat-ink-bar in my CSS. I have something like this HTML, for example:
</div>
<mat-card>
<mat-tab-group>
<mat-tab label="Login">
<app-login></app-login>
</mat-tab>
</mat-tab-group>
</mat-card>
</div>
I am working in that component's CSS to customize the style. I can go into the developer tools and modify the CSS of the element directly in the browser, but I am having difficulty calling those elements in the CSS file.
In the Style section of developer tools after clicking on that particular element, I can see that it is under .mat-tab-header, and I modified some of the values successfully. I cannot get it to work when I call that in the CSS file.
The element breaks down like this (hopefully this helps):
<mat-card class="mat-card">
<mat-tab-group class="mat-tab-group mat-primary">
<mat-tab-header class="mat-tab-header">
<div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled>
<div class="mat-tab-label-container">
<div class="mat-tab-list">
<div class="mat-tab-labels">
<div class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted">
<mat-ink-bar class="mat-ink-bar">
How can I correctly call these elements in the CSS so I can modify their styles?
Try :host ::ng-deep .mat-tab-header { }
And if still no change, add !important.