I try to add a sidenav from Angular/Material to my website. All works fine expect the backdrop : it didn't appear on the main page. Find my code here : https://plnkr.co/edit/DMMz9dMoZasfMExWgjSD?p=options (first time using this tools, all advices are welcomed !)
In menu.component.html :
<md-toolbar>
<div class="sidenav-button">
<button type="button" md-icon-button (click)="sidenav.toggle()">
<md-icon>reorder</md-icon>
</button>
</div>
</md-toolbar>
<md-sidenav-container fullscreen class="sidenav-container">
<md-sidenav #sidenav mode="push" class="sidenav left-nav" opened="false">
<md-nav-list>
<a md-list-item>
Home
</a>
<a md-list-item>
Channels
</a>
</md-nav-list>
</md-sidenav>
</md-sidenav-container>
I just copy/paste the example from the official documentation (https://material.angular.io/components/sidenav/overview) with no result..
Thanks
I know it's been months since this question was asked. Just came across it so decided to answer it since no solution was given.
Import one of the angular material theme to your style sheet, doing so should fix the issue.
example - add
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
to your styles.css
https://material.angular.io/guide/theming
Related
I am trying to make bootstrap accordion items but it is not working properly as in bootstrap doc or youtube tutorials.
I have added bootstrap and jquery for both test and architect/build to angular.json as you can see.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
I have imported bootstrap in styles.css.
#import "~bootstrap/dist/css/bootstrap.css";
Also, both of node_modules and src folders are available in same app file.
My html file as below:
<div class="container p-5">
<h1 class="text-center mt-5 mb-5">Angular 12 Bootstrap 5 Accordion with Dynamic Data</h1>
<div class="accordion" id="accordionExample"><!--ngfor loop started for dynamic data -->
<div class="accordion-item" *ngFor="let item of selectedData; let i = index">
<h2 class="accordion-header" [id]="'heading'+i">
<button class="accordion-button" [ngClass]="{ 'collapsed': i != 0 }" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse'+i" aria-expanded="true" [attr.aria-controls]="'collapse'+i">
Accordion Item {{i}}
</button>
</h2>
<div [id]="'collapse'+i" class="accordion-collapse collapse" [ngClass]="{ 'show': i == 0 }" [attr.aria-labelledby]="'heading'+i" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
Accordions dont do anything when i pressed and dont have any styles.
It looks like this when running the app.
How can i fix this? Thank you.
I updated my bootstrap version to 5.1.3 and it worked!
https://jsbin.com/jaboyeleta/edit?html,css,output
<div class="sub-main">
<button class="button-two"><span>Hover Me</span></button>
</div>
Im pretty newsih at this, and i need help knowing where to place the
snippet of code to link this button to my site, any help? Sorry if this is a silly question to ask here. I tried to find videos.
Try this:
<div class="sub-main">
<a href="https://google.com">
<button class="button-two"><span>Hover Me</span></button>
</a>
</div>
Maybe you can read more about links and another HTML stuff here
Wrap the button in an a tag like so:
<div class="sub-main">
<a href='https://www.google.com'>
<button class="button-two"><span>Hover Me</span></button>
</a>
</div>
How to use Image overlay in ReactJS? I am making a movie site.
Here is the link : Project
I want to use overlay effect when the user hovers over the image.
When the user hovers over the image I want to show tagline with the overlay effect on the image.
Here is the link I tried : reference
But, it's not working in React.
Here is the code :
In image tag i want to add overlay effect.
<div className="main-description" >
<img src={"https://image.tmdb.org/t/p/w500"+res.poster_path}
className="result- image"/>
<b className="result-titles" >{res.original_title}</b>
<div className="extra-description">
<div className="rating_time_score_container">
<div className="sub-title Rating-data"><b>
Imdb
<span className="details" > {res.vote_average}/10 </span></b></div>
<div className="time-data">
<b><span className="time">
<i className="fa fa-clock-o"></i> </span> <span className="details">
{res.time_str}</span>
</b>
</div>
</div>
</div>
I don't think this has to do with CSS, It would of been nice to have a link to your github but i\I tracked down your code (since its open source) and I took and look. I suggest using a package like this one: https://github.com/ethanselzer/react-hover-observer
or even bootstraps classic react package like this one:
https://react-bootstrap.github.io/components/overlays/
Then what you can do is update the state of your application and add the overlay that way. Hope that helped and good luck with your project
I want to customize the view-title of an ion-view so that the title appears 4 letters in red and 4 letters in white. How do I do this?
For example I use a template like this:
<ion-view view-title="HelloWorld">
Now I want that Hello appears in red color and world in white color.
My main problem is that I can't get an access via css to the view-title.
Try this,
<ion-view>
<ion-nav-title>
<span style="color:red">Hello</span>World
</ion-nav-title>
</ion-view>
This solves the problem of modifying the view-title:
<ion-nav-title>
<span class="red">Hello</span>World
</ion-nav-title>
In addition to iDeekshith's answer and for future people, you can also add an image to the header (your app's logo perhaps).
<ion-nav-title>
<div>
<span class="header-logo"><img src="img/logo.png" width="30" alt="App logo"/></span>
Your App Title
</div>
</ion-nav-title>
I have following code:
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-chevron-left" ng-click="goBack()"></button>
</ion-nav-buttons>
Which producing following output:
I would like to change used icons for the custom icon (48×48 px).
How can I do it in right way in Ionic?
I tried to follow the instructions in this topic, but without luck.
Exist easy way to solve your problem, just put in your .js this:
$ionicConfigProvider.backButton.icon('my-back-button');
(Please see $ionicConfigProvider documentation here)
and your css:
.my-back-button {
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 35px;
}
You can run this example in this LINK
Another solution can be this (using only CSS):
<ion-nav-back-button class="button-clear">
<i class="button button-icon my-back-button"></i>
</ion-nav-back-button>
and your css:
.my-back-button {
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 48px;
}
See this example here.
Note: A ionic blog in some way suggests using icon-fonts, but from my point does not make sense when there are few icons. Please read this link.
I hope this information is useful to you.
Just do it! :)
<ion-nav-back-button class="button-clear ion-chevron-left">
</ion-nav-back-button>
Use the class="" attribute to set your custom icon.. In this case, i have used the ion-chevron-left (to be like your example)..!
But if you want to change the default text too.. you can do it different:
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left"></i> Back Text
</ion-nav-back-button>
Ref: http://ionicframework.com/docs/api/directive/ionNavBackButton/
If you are using ionic 5
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button icon="chevron-back-outline"></ion-back-button>
</ion-buttons>
<ion-title class='text-center toolbar-text'>Title</ion-title>
</ion-toolbar>
It may be late for the answer but for the latest version of ionic(5.4.16) at this date
following way would save much time
<ion-nav-buttons side="left">
<button text="" icon="chevron-back-outline" ng-click="goBack()"></button>
</ion-nav-buttons>
hope it will help someone