I am trying to set a full screen video background which I want to be only visible on the app "homepage" with no success yet. The first component rendered on the app is HomeComponent.
app-routing-module.ts (only path is shown)
const routes: Routes = [
{ path: '', redirectTo: '/accueil', pathMatch: 'full'},
{ path: 'accueil', component: HomeComponent },
{ path: 'ligne/:lineId', component: LineComponent },
{ path: 'ligne/:lineId/station/:stationName', component: StationComponent }
];
What I'd like to do is to have the video background only when I'm on /accueil but not on the other paths/components. Is there any way to do that ?
Thanks in advance.
You can add the router to your component that contains the div you want to set the background to the video
and then do something like this:
if(this.router.url===routeIWant){
this.custom-bg=true
}else{
this.custom-bg=false
}
And on the html the following div is the one you wanna set the bg
<div [ngClass]="{'customBgClass': custom-bg}">
And on the css
.customBgClass{
background: url(your-video-url)
}
Related
I'm making a mock of data and rendering it using map. But my images take a long time to load and the component is a little slow.
I've already tried using Image component from Nextjs, but it gives an error because it only accepts a string in the src and I'm passing an array of images.
Code:
const data = [
{
id: 1,
name: 'Thanos',
image: '/images/thanos.png'
},
{
id: 2,
name: 'Jhon Wick',
image: '/images/jhon.png'
},
{
id: 3,
name: 'Spider-Man',
image: '/images/spider.png'
},
{
id: 4,
name: 'Doctor Strange',
image: '/images/strange.png'
},
{
id: 5,
name: 'Batman',
image: '/images/batman.png'
}
]
export function Home() {
return (
<div>
{data.map((d) => (
<div key={d.id}>
<img src={d.image} alt="Image" />
<p>{d.name}</p>
</div>
))}
</div>
)
}
What's the size of those images?
Try to tiny those images and check out if this will help you out
This is one service that can help you
https://tinypng.com/
About the next image component, how have you tried to use it? You shouldn't pass the whole array of images, you must use it as same you did as the HTML img tag, but pay attention to width and height props.
https://nextjs.org/docs/api-reference/next/image
Another thing, check out if your images are in the public folder
In my solution I'm using Nuxt-Img that returns resized images according to the current resolution.
But with the img-Tag it's quite hard/dirty to work with e.g. adding linear-gradient or focussing the image having overlays etc.
With a background-image it would be quite easier but it seems that nuxt-img doesn't support resizing for background-images.
Update
Trying the following nuxt-image approach, the image size doesn't changes and is reloading the page always 418kb:
<script>
export default {
name: "SectionServices",
props: {
services: {
type: Array,
required: true,
},
},
computed: {
servicesVal() {
return this.services.map((service) => {
return {
src: this.$img(service.src, {
sizes: "xs:400px sm:640px md:768px lg:70vw xl:70vw xxl:70vw",
}),
alt: service.alt,
name: service.name,
link: service.link,
};
});
},
},
};
</script>
So is there any great advise how to handle that?
What is your recommendation? Using nuxt-img or is it better to work with background-image?
Using Background-image, how can I handle the image-size that I don't need to load large images for e.g. mobile phones?
I have to merge two angular applications into one major angular application. Hence, now i am having two styles.css files in one angular application. On running this application after merging both, css is going completely for the angular application.
Is there any way by which we can call this two style.css files dynamically depending on the requirement? Or I need to check each class one by one?
I recommend you to use two different layouts, each one is a component, so each one has a different set of styles. That it's really easy wit angular router.
In your routing module:
// Layout 1
{
path: '',
component: Layout1Component,
children: [
{ path: 'pageL1_1', component: PageL1_1Component },
{ path: 'pageL1_2', component: PageL1_2Component }
]
},
// Layout 2 routes goes here here
{
path: '',
component: Layout2Component,
children: [
{ path: 'pageL2_1', component: PageL2_1Component },
{ path: 'pageL2_2', component: PageL2_2Component }
]
},
In your app.component.html:
<router-outlet></router-outlet>
The layouts templates has to include the element to in order to show child navigation componets.
IMPORTANT: Each layput controller should disable view encapsulation so styles applies ti child components:
#Component({
selector: 'app-layout_1',
templateUrl: './layout_1.component.html',
styleUrls: ['./layout_1.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class Layout1Component implements OnInit {
...
}
I am using react native navigation version 1.1.486 by wix. I am using
topTabs and want different colors for navbar and tapbar, but the
properties I a passing is not working.
I am sharing my code here:-
import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
const startTabs = ()=>{
Promise.all([
Icon.getImageSource("md-map",30),
Icon.getImageSource("ios-share-alt",30),
SimpleIcon.getImageSource("menu",30,'red'),
SimpleIcon.getImageSource("question",30,'black')
]).then(sources =>{
Navigation.startSingleScreenApp({
screen: {
screen: 'prabhuji.CustomPack',
topTabs: [
{
screenId: 'prabhuji.FlowerTabOne',
title:'Tab 1',
icon: sources[1],
},
{
screenId: 'prabhuji.FlowerTabTwo',
icon: sources[0],
title:'Tab 2'
}
],
navigatorButtons: {
leftButtons:[
{
icon:sources[2],
title:"Menu",
id:"SideDrawerToggle"
}
],
rightButtons:[
{
icon:sources[3],
title:"Help",
id:"Help"
}
]
},
},
appStyle: {
tabBarBackgroundColor: '#0f2362',
selectedTabFontSize: 12,
}
});
});
}
export default startTabs;
The effect for this code is:-
Is there any way to use different colors for toptabs and navbar? May
be I am asking a silly question. Apology for that, I am new to react native.
Don't put the styles in navigatorStyle, just add all tab properties to appStyle , you should add BottomTabs styles to AppStyle.
Here's an example :
appStyle: {
tabBarBackgroundColor: '#0f2362',
tabBarButtonColor: '#ffffff',
tabBarHideShadow: true,
tabBarSelectedButtonColor: '#63d7cc',
tabBarTranslucent: false,
tabFontFamily: 'Avenir-Medium', // existing font family name or asset file without extension which can be '.ttf' or '.otf' (searched only if '.ttf' asset not found)
tabFontSize: 10,
selectedTabFontSize: 12,
},
Another way
1. Disabling persistent styling properties :
appStyle: {
keepStyleAcrossPush: false
}
2. Setting styles dynamically:
this.props.navigator.setStyle({
navBarBackgroundColor: 'blue'
});
I want to load a specific CSS file only when a user accesses the contact.html view on my AngularJS app/site. I found this answer which almost made sense to me How to include view/partial specific styling in AngularJS The accepted answer by charlietfl reads :
Could append a new stylesheet to head within $routeProvider. For
simplicity am using a string but could create new link element also,
or create a service for stylesheets
/* check if already exists first - note ID used on link element*/
/* could also track within scope object*/
if( !angular.element('link#myViewName').length){
angular.element('head').append('<link id="myViewName" href="myViewName.css" rel="stylesheet">');
}
Biggest benefit of prelaoding in page is any background images will
already exist, and less lieklyhood of FOUC
The problem is that I do not know exactly where in my $routeProvider to add the code. charlietfl mentions where to put it in a comment which reads
not if the when for the route hasn't been called. Can put this code in
controller callback of when within the routeProvider, or perhaps
within resolve callback which likely triggers sooner
I have modified my $routeProvider following the advice. I added a resolve in the object following .when('/contact'. Here is my code
angular.module('maxmythicApp', ['ngResponsiveImages'])
.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix = '!';
$routeProvider
.when('/', {
templateUrl: '/views/design.html',
controller: 'MainCtrl'
})
.when('/design', {
templateUrl: '/views/design.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: '/views/about.html',
controller: 'MainCtrl'
})
.when('/contact', {
templateUrl: '/views/contact.html',
controller: 'MainCtrl',
resolve:
if( !angular.element('link#myViewName').length){
angular.element('head').append('<link id="myViewName" href="myViewName.css" rel="stylesheet">');
}
})
.otherwise({
redirectTo: '/'
});
});
Would this work?
I made a service for it.
Important part of the code :
var head = angular.element(document.querySelector('head')); // TO make the code IE < 8 compatible, include jQuery in your page and replace "angular.element(document.querySelector('head'))" by "angular.element('head')"
if(head.scope().injectedStylesheets === undefined)
{
head.scope().injectedStylesheets = [];
head.append($compile("<link data-ng-repeat='stylesheet in injectedStylesheets' data-ng-href='{{stylesheet.href}}' rel='stylesheet' />")(scope)); // Found here : http://stackoverflow.com/a/11913182/1662766
}
head.scope().injectedStylesheets.push({href: "/url/to/style.css"});
Full code in Github : https://github.com/Yappli/angular-css-injector)
UPDATED: Here is the solution to inject(load) a specific CSS using the $routeProvider.
The solution described below is an alternative to apply different classes and page title based on the route which could be used in other situations.
For each route I've created a new key called 'bodyClass' and 'title' (but you could called anything you like it) and it looks like this:
'use strict';
var myApp = angular.module('myApp', 'ngResource'])
.config(function ($routeProvider) {
myApp.siteName = 'My Cool App';
$routeProvider
.when('/home', {
title:'Home - ' + myApp.siteName,
bodyClass: 'home',
templateUrl: 'views/home.html',
controler: 'bmsHomeCtrl'
})
.when('/contact', {
title:'Contact - ' + myApp.siteName,
bodyClass: 'contact',
templateUrl: 'views/contact.html',
controler: 'bmsContactCtrl'
})
.otherwise({
redirectTo: '/home'
});
});
Then for each $routeChangeSuccess event I change the <title> of the page and also the class of the <body>.
myApp.run(['$location', '$rootScope', function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
if (current.$$route) {
$rootScope.title = current.$$route.title;
$rootScope.bodyClass = current.$$route.bodyClass;
}
});
}]);
You put the code above on the same main app.js (for example) file.
On my index.html page, which renders the views, I have the following codes to pick up the title and class:
<title>{{ title }}</title>
<body class="{{ bodyClass }}">
So if i visit the home page of my application the title tag will be
<tittle> Home - My Cool App</tittle>
and the body tag will be
<body class="home">
It's working like a charm.
I know this solution doesn't load a CSS file, but you could put those styles inside a '.contact' class that is applied only when you hit a specific route.
Not sure if solves your problem but I hope that helps or at least point you on the right direction.
For a full solution I suggest using AngularCSS.
As you already know, in Angular we can include templates (structure) and controllers (behavior) in pages and components. AngularCSS enables the last missing piece: attaching stylesheets (presentation).
Routes example:
$routeProvider
.when('/page1', {
templateUrl: 'page1/page1.html',
controller: 'page1Ctrl',
/* Now you can bind css to routes */
css: 'page1/page1.css'
})
.when('/page2', {
templateUrl: 'page2/page2.html',
controller: 'page2Ctrl',
/* You can also enable features like bust cache, persist and preload */
css: {
href: 'page2/page2.css',
bustCache: true
}
})
.when('/page3', {
templateUrl: 'page3/page3.html',
controller: 'page3Ctrl',
/* This is how you can include multiple stylesheets */
css: ['page3/page3.css','page3/page3-2.css']
})
.when('/page4', {
templateUrl: 'page4/page4.html',
controller: 'page4Ctrl',
css: [
{
href: 'page4/page4.css',
persist: true
}, {
href: 'page4/page4.mobile.css',
/* Media Query support via window.matchMedia API
* This will only add the stylesheet if the breakpoint matches */
media: 'screen and (max-width : 768px)'
}, {
href: 'page4/page4.print.css',
media: 'print'
}
]
});
Directive example:
myApp.directive('myDirective', function () {
return {
restrict: 'E',
templateUrl: 'my-directive/my-directive.html',
css: 'my-directive/my-directive.css'
}
});
You can read more about AngularCSS here:
http://door3.com/insights/introducing-angularcss-css-demand-angularjs
I think the best/simplest answer is one I left here. Someone else asked the same question, so I came up with some simple code and a small github repo to handle this scenario.