I want the "Setting" drawer to respond to window resize like it does on this settings page.
Taking a look at their style elements, I can see a lot of mat-drawer css classes that (I presume) handle the drawer's state and events:
mat-drawer mat-drawer-side mat-drawer-open etc.
Is there documentation on these css classes on how they function? Are they even Material classes?
Trying this, I would ignorantly expect the side-nav to be open by default without using opened on mat-drawer but it does not work.
<mat-drawer-container
class="mat-drawer-container flex-auto sm:h-full mat-drawer-transition mat-drawer-container-has-open">
<mat-drawer #drawer class="mat-drawer sm:w-96 dark:bg-gray-900 mat-drawer-side mat-drawer-opened"
style="transform: none; visibility: visible;">
<p>Sidenav open</p>
</mat-drawer>
<button type="button" mat-button (click)="drawer.toggle()">
Toggle sidenav
</button>
</mat-drawer-container>
I would like to achieve this drawer functionality with a similar method like theirs without using Angular HostListener decorator like this.
Related
I am creating an Angular Element in which I am using Angular Material design. The Material contents are not getting rendered in the browser, but it's showing up on the DOM.
My element template looks like this:
<h1>Hello world!</h1>
<mat-menu #appMenu="matMenu">
<button mat-menu-item>Settings</button>
<button mat-menu-item>Help</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="appMenu">
<mat-icon>more_vert</mat-icon>Click Me!
</button>
Final output
For mat-menu it's not rendered inside HTML until it's not visible.
You could check this Demo click on last button.
NOTE: I am using Angular, so if Angular can solve this it will also work
I want to build a page where I can view the styles I am making. Therefore I need to somehow activate the hover and active states. Here is my code now:
.myclass {
background-color: blue
}
.myclass:disabled {
background-color: red
}
.myclass:hover {
background-color: green
}
.myclass:active {
background-color: pink
}
<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass">Hover</button>
<button class="myclass">Active</button>
I am hoping for something like this:
<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass hover">Hover</button>
<button class="myclass active">Active</button>
Or:
<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass" hover="true">Hover</button>
<button class="myclass" active="true">Active</button>
This can be done easily, just right click on the element -> inspect element -> navigate to the class (myClass in your case) in styles tab.
Then click on :hov and activate the hover, focus or active (refer to the image attached)
If this is for testing purposes use a dedicated hover en active class.
Give the buttons some dummy classes and style the buttons
When you are finished copy the style to the :hover and :active state
and delete the dummy code.
There is no other solution. If there is one than I also want to know what that solution is.
The answer of Divesh Panwar is the way to go.
For development:
Just introduce a new css class that does what you need.
just do
myclass.hover in css then <button class="myclass hover" disabled="true">Disabled</button> and switch back to :hover when finished styling or whatever.
If you use chrome f.E. you can press F12 to open developer console.
There you can toggle the hover state in the top right.
There
For testing:
If it's for some kind of automated tests, and you realy need the hover state, i gues you approach the problem from the wrong side, use a selenium or similar to guide you in the right direction.
I have the following div and it shows a login button on a nav bar, but if the screen is small I want to hide this button. For some reason when I add the fxHide.gt-sm=true it doesn't hide when I make the screen smaller. How can I fix this?
<div fxHide.gt-sm="true">
<ng-template #login>
<button
mat-icon-button
[routerLink]="['/auth']"
[style.width]="'auto'"
[style.overflow]="'visible'"
matTooltip="Login or Register"
class="topbar-button-right">
<span>Login</span>
<mat-icon>exit_to_app</mat-icon>
</button>
</ng-template>
</div>
What you want:
Default behavior: shown
If lt-md (less than medium screen) => hide
With your current implementation you have:
Default behavior: shown
If gt-sm (greater than small screen) => hide
Now, what you want translates into:
<div fxShow fxHide.lt-md>
You could invert the logic into
<div fxHide fxShow.gt-sm>
That should do it.
fxHide.gt-sm means hide it when it's greater than small. Change it to fxShow.gt-sm if you only want it visible on larger screen.
Faced the same thing but after importing FlexLayoutModule it worked.
If the OP is having issues making the fxHide command work at all, this question may be a duplicate of Angular Material FlexLayout fxHide does not hide
You must ensure that FlexLayout is imported in all modules that wish to use it:
https://stackoverflow.com/a/62672981/4440629
I recently started using angular-material and am struggling/unsure about opening/closing a mat-menu... I see in the examples on the angular-material documentation site that they assign an id to the menu and then apply a directive to the button that is used to toggle the menu. e.g. [matMenuTriggerFor]="menu"
How can I go about writing a directive that does that? I'm not sure how to pass a reference to a specific menu to a directive that then calls the toggle() method on the DOM element with that id?
The following code produces the errors:
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'.
There is no directive with "exportAs" set to "matMenu".
My code:
<li>
<button mat-icon-button [matMenuTriggerFor]="stockSystemMenu">
<mat-icon class="sn-item">
<i class="material-icons">archive</i>
</mat-icon>
</button>
<span class="sn-item" (click)="toggleMenu(stockSystemMenu)">Stok System</span>
<mat-menu #stockSystemMenu="matMenu">
<button mat-menu-item>
<mat-icon>
<i class="material-icons">chevron_right</i>
</mat-icon>
<span>Service 1</span>
</button>
</mat-menu>
</li>
There is confusion because Material introduced a breaking change as I understand it.. See material 2 Changelog - Breaking Changes
Starting with Material 2.0.0-beta.12. Use mat instead of md-*.. Seems only some of the docs at material.angular.io are updated with mat. Specifically, if you click view source and see md, I believe they have yet to replace it with mat.
So either update to Material 2.0.0-beta.12 and use mat-*, or use md-*.
"Your code is correct, you don't need to write matMenuTriggerFor directive, it is part of the API, make sure you have imported the MatMenuModule, MatButtonModule, and MatIconModule into your app module." - from comments
I am developing an MVC6 project in Visual Studio 2015. I have just added Bootstrap 3.3.6 using Bower. On a very simple html page I have referenced the CSS in the header and Bootstrap at the bottom of the body as follows:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
I defined a button as follows:
<button class="btn btn-primary">Hello</button>
When I debug the project (IIS, IE11) the button appears and is clearly styled by Bootstrap but there is no hand cursor.
If I use the browser to navigate to an example of a Bootstrap styled button, for example here: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp, the hand cursor appears as I would expect. So it's not my browser at fault.
Can anyone suggest why I am not getting a hand cursor from a simple Bootstrap styled button please?
Try add role='button' instead. I have had this problem even though the documentation on bootstrap says type='button' should do the work but mine didn't.
You need to get rid of the button tags and just use anchor tags with bootstrap classes. For example:
instead of:
<button class="btn btn-primary">Hello </button>
write:
Hello
This will make the HAND CURSOR appear when hovering over the btn bootstrap class
Try adding an href such as href="#" to the button.
<button class="btn btn-primary" href="#">Hello</button>
When you start changing native element types and roles there are other side effects, including how those elements interact with accessibility for users. See this MDN link for details on that: Button Role
You are missing the type="button".
In bootstrap source less file there are several css rules specified for the input[type="button"] rule. (Checked for version 3.3.6)
You might not have to use it, but it was intended to be used with type="button".
In both W3School and Bootstrap buttons demo page they are using type="button"
Your code:
<button class="btn btn-primary">Hello</button>
W3:
<button type="button" class="btn btn-default">Default</button>
If it is still not working after adding type="button" (or submit or reset), try looking on your element with inspector and see what overrides the "pointer: cursor" css rule.
I was looking like you for a way to add this hand over,
until I saw that hand appearing once the form was filled.
(was using
<button type="button" >
by the way )
Create new css:
.cursor-pointer { cursor: pointer; }
Apply css on button:
class="cursor-pointer"
I encountered the same issue. When hover over the button hand cursor is not shown instead mouse pointer is seen. Fixed it by using the following ways.
1st Fix:
<input type="button" id="myBtn" class="btn btn-primary" value="Hello">
2nd Fix:
<a role="button" class="btn btn-primary" href="#">Hello</a>