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...
Related
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
I'm trying to get a page with various google charts to load in e pretty way (i.e display loading icon until chart is ready). Now some of the charts have a corresponding div that includes some text /info relating to the chart.
<ng-container *ngIf="stat1 && stat2; else loading">
<google-chart
[title]="title"
[type]="TYPE"
[data]="data"
[columns]="columnNames"
[options]="options"
[width]="width"
[height]="height">
</google-chart>
<div class="myDiv" *ngIf="stat1 && stat3">
my text
</div>
</ng-container>
<ng-template #loading>
<div class="loading">
my loading component
</div>
</ng-template>
This works as far as displaying a loading icon until the chart is ready however the content of the div appears before the chart causing the loading to look messy.
Any help as to how I can make the div only display after the chart is loaded would be awesome, as I can't seem to find a working answer online or in documentation. (I'm likely not searching for the correct terminology)
Thanks in advance.
Did you open their documentation ?
The ready event is emitted as soon as the chart got drawn and after every subsequent redraw.
<google-chart (ready)="onReady($event)"></google-chart>
Maybe use that ?
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.
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.
I am trying to implement a page with tab bar in onsen UI. Where I am able to switch pages between "Tab1" and "Tab2".
But my question is how can I place the Image which will be present in both tab bar pages and only remaining part of the page will switch.
For Example as given in wire frame, "common image content" should be present when user clicks any of the tab, only content "tab1 content" and "tab2 content" are gets changed.
Please let me know any work around for this ?
Thanks in Advance...
You could place a toolbar on top of your tabbar. It is persistent, you can make it transparent and you can put an image into it.
Example from the Docs:
<ons-page>
<ons-toolbar>
<div class="center">Page Title</div>
</ons-toolbar>
<ons-tabbar position="top">
<ons-tab page="page1.html" icon="fa-square"></ons-tab>
<ons-tab page="page2.html" icon="fa-square"></ons-tab>
<ons-tab page="page3.html" icon="fa-square"></ons-tab>
</ons-tabbar>
</ons-page>