I am doing a sidebar that hides the label and shows only an icon when a button is click. The problem that I have is that the mat-list-item in the mat-sidenav does not shows the whole label.
I have tried adding width to 100px to the mat-list-item but this stops doing the sidebar's size dynamic. What I want is that whenever the button is clicked, the sidebar shows the whole menu with the labels and icons or just the icons. Also, I will like that if a label is too large, it will show it in two lines in the menu.
<mat-sidenav-container autosize class="app-container">
<mat-sidenav opened="isExpanded" #sidenav mode="side" [class.mat-elevation-z4]="true" class="app-sidenav">
<mat-nav-list>
<mat-list-item routerLink="#">
<i class="fa-solid fa-boxes-stacked"></i>
<span *ngIf="isExpanded" style="padding-left: 5%;">Stock</span>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet>
<div class="app-sidenav-content">
Components open here
</div>
</router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
This is how it looks like:
Label not showing correctly
How I want it to show:
Sibebar showing label
Sidebar hiding label
Related
I am having trouble getting my anchor text and icon to look centered with Material 15.1.2
My layout looks like this:
<mat-sidenav-container>
<mat-sidenav #sidenav role="navigation" [opened]="openSidenav">
<mat-nav-list>
<a mat-list-item routerLink="/signup">
<mat-icon>face</mat-icon>
<span matLine >Sign up</span>
</a>
The final result looks like:
I think the newer version is using flex where before it was using block. It also seems that the icon is 24px but the enclosing box is slightly bigger at 31px.
Trying to move the text with padding forces the whole block up and I can't move the anchor text up.
Any ideas?
I used display:inline-flex; to center the text as in the code below (I have used bootstrap).
<a mat-list-item routerLink="" >
<div class="d-inline-flex">
<mat-icon>face</mat-icon>
<span matLine>Sign up</span>
</div>
</a>
I am new to angular and material framework. I am trying to create a page which has below structure
The button on right side of Admin portal works perfectly fine and it hides and shows the side menu.
Most of the code is default code generated by angular.
In order to shift the left menu below top navbar i used [fixedTopGap]="64" on mat-sidenav.
To expand the top menu to take full width i used class main top bar in below line:-
<mat-sidenav-content class="mainTopBar">
Css for main topBar:-
.mainTopBar
{
margin-left:0px !important;
}
Doing so gave me full top menu, but now the problem is whatever content i am trying to place using ng content gets stuck to the very left.
How can i provide margin to ng content based on if left menu is opened or not.
Here is my html code :-
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)" [fixedTopGap]="64">
<mat-toolbar class="Namebar">Menu</mat-toolbar>
<mat-nav-list >
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content class="mainTopBar">
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Admin Portal</span>
<button
type="button"
style="position:absolute;margin-left:200px;"
aria-label="Toggle sidenav"
mat-icon-button
*ngIf="!(isHandset$ | async)"
(click)="drawer.toggle()"
>
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
</mat-toolbar>
<ng-content style="margin-left: 200px !important; "></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
I tried using margin-left:200px but that even that didn't work.
On Side bar open it shoul look like:-
Based on Yin answer, the screen which i am getting is :-
Finally i found the issue.
I made top nav bar(mat-toolbar) as fixed and width to 100vw.
Added autosize here <mat-sidenav-container class="sidenav-container" autosize >
And it started working as expected
Don't use margin-left, just add autosize on the mat-sidenav-container :
<mat-sidenav-container class="sidenav-container" autosize >...
we have used p-tiered menu to display submenus in mat-sidenav and we have placed inside
p-tiered menu not displaying correctly in mat-sidenav as shown in below screenshot:
Here is the screenshot:
It should display submenu (PQR, LMN) outside the context of mat-sidenav i.e. inside router outlet
<mat-sidenav-container>
<mat-sidenav #projectnav
mode="side"
opened>
<mat-nav-list>
<div *ngFor="let menuItem of menuArray" >
{{ menuItem.visible }}
<app-tiered-menu *ngIf="menuOpen" [menuItems]="[menuItem]">
</app-tiered-menu>
</div>
</mat-nav-list>
</mat-sidenav>
<mat-card-content>
<router-outlet></router-outlet>
</mat-card-content>
</mat-sidenav-container>
Is it possible to achieve something like facebook's notifications icon with Semantic UI? I.e. an icon with a red Label to show the number of notifications? Found this thread but no answers there.
I tried this:
<Icon name='bell outline'>
<Label color='red' floating>22</Label>
</Icon>
But the label doesn't show up (syntax is semantic-ui-react).
With Semantic UI you can make another icon float to the right upper corner:
<i class="huge icons">
<i class="puzzle icon"></i>
<i class="top right corner add icon"></i>
</i>
but it does't help in case you want to display some number in the corner- for intance, the number of followers or the number of messages. If you want to achieve it you have to use your own css styling.
In my project I do it in following way:
<div class="ui top dropdown item">
<i class="icon bell outline"></i>
<div id="live_message_badge_main_header" class="floating ui red label hidden" style="padding:2px 3px;top: 10px;left: 47px;">
<span class='live_message_badge'> </span>
</div>
</div>
Additionally, you need corresponding js which will fill the span.
Result:
I'm trying to use material2 sidenav component. I want it to be separate from content. Just a full-height sidebar that slides there and back - without any sidenav-layout as it creates some unwanted things in my app layout.
What I want looks really close to https://inbox.google.com/u/0/?pli=1 sidenav.
What I currently have is:
If you want to separate side bar and main content, Use the bootstrap column classes to achieve as below,
<md-sidenav-container class="container-fluid">
<div class="col-md-1">
<button md-button (click)="sidenav.open()">
<i class="fa fa-list"></i>
</button>
</div>
<div class="col-md-11">
Main content goes here
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<md-sidenav #sidenav class="example-sidenav">
Manu bar
</md-sidenav>
</md-sidenav-container>
Note:Break tags are added to increase the height of the content.
LIVE DEMO