I’m trying to achieve the following configuration in my Ionic (3.9.2) app using the Ionic 2 DeepLinker, where I have regular versions of my pages at index.html, /terms, and /card, and differently styled versions at /club/index.html, /club/terms and /club/card:
#NgModule({
declarations: MyComponents,
imports: [
BrowserModule,
HttpClientModule,
// DeepLinker!!
IonicModule.forRoot(MyApp, { locationStrategy : 'path' }, {
links : [
{ component : HomePage, name : 'Home', segment : '' },
{ component : TermsPage, name : 'Terms of Use', segment : 'terms' },
{ component : CardPage, name : 'Savings Card', segment : 'card' },
// Club Aliases; these pages will have the same content as above,
// but slightly different styles, defined elsewhere.
{ component : HomePage, name : 'Home', segment : 'club' }
{ component : TermsPage, name : 'Terms of Use', segment : 'club/terms' },
{ component : CardPage, name : 'Savings Card', segment : 'club/card' },
//...
Is there a way to achieve this using the Ionic 2 DeepLinker?
Some notes:
We navigate to pages by following links (and preventing default):
Terms of Use
where openPage pushes a page onto the nav stack using NavController's Nav Component, like so:
$event.preventDefault();
this.nav.push(page.component, params);
We also had to setup our webserver to rewrite subdirectories (e.g. “/terms”) to index.html. Info: https://github.com/ionic-team/ionic/issues/10565#issuecomment-282659179
And I also forked #ionic-app-scripts to get this (rewrite to index.html) working on my local development (e.g. live reload) server:
https://github.com/senseijames/ionic-app-scripts
In the DeepLinkConfig links 'name' is simply a string identifier which can be used to resolve the page component by its string alias. I would recommend omitting whitespaces and capitalization and adjusting your implementation like so:
Refactor DeepLinkConfig
links : [
{ component : HomePage, name : 'home', segment : '' },
{ component : TermsPage, name : 'terms', segment : 'terms' },
{ component : CardPage, name : 'card', segment : 'card' },
{ component : HomePage, name : 'club', segment : 'club' }
{ component : TermsPage, name : 'club-terms', segment : 'club/terms' },
{ component : CardPage, name : 'club-card', segment : 'club/card' }
]
Refactor click handler
openPage(name: string, params: any) {
this.nav.push(name, params);
}
Refactor button markup
<button ion-button (click)="openPage('terms', {})">Terms of Use</button>
<button ion-button (click)="openPage('club-terms', {})">Club Terms</button>
<button ion-button (click)="openPage('club-card', { id: 1234, username: 'someuser', rewards: false })">Savings Card</button>
This way you can navigate by name and not have to import page components into each controller in order to link to the page component itself. Also ion-button attribute decorated button elements are the preferred navigation UI per IonicFramework documentation and using them would avoid the need to prevent the default behavior of vanilla html anchors.
Related
I can't find solution to go to named view. My routes ,
routes: [
{
path: '/',
component: App,
children : [
{
path: '/',
redirect: 'home'
},
{
path: 'home',
components: {
home : Home,
contact : Contact,
geo : Geo,
shake : Shake,
camera : Camera
}
},
]
}
]
This is my app.vue
...
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button #click="page()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
...
export default {
name : 'App',
methods: {
page() {
this.$router.push('home');
}
}
}
I want to go to the Camera component when I click camera icon/button. How can I achieve this?
You have to define multiple router views for each name in named views. There should be one default, and multiple others for each name. Like this.
<router-view></router-view>
<router-view name="home"></router-view>
<router-view name="contact"></router-view>
All respective components will all be loaded in router-view when a url is hit.
You can read more about it in this doc. An see a working example here
if you want to redirect using the script you can try this to change the route.
this.$router.push({ name: 'your_route_name' })
in addition, you can also send params to that route by enabling props: true while defining routes,
this.$router.push({name: 'your_route_name', params: { var_name: data } })
My UI5 application uses sap.m.Shell as root control. Can the sap icons be used for property homeIcon?
The source text is as follows:
sap.ui.getCore().attachInit(function () {
sap.ui.require([
"sap/m/Shell",
"sap/ui/core/ComponentContainer"
], function (Shell, ComponentContainer) {
new Shell({
app: new ComponentContainer({
height : "100%",
name : "<a name>"
}),
homeIcon : {
'icon': "sap-icon://world",
'phone' : "sap-icon://world",
'phone#2' : "sap-icon://world",
'tablet' : "sap-icon://world",
'tablet#2' : "sap-icon://world",
'favicon' : "sap-icon://world",
'precomposed': false
}
}).placeAt("content");
});
});
Unfortunately the browsers console says:
GET sap-icon://world net::ERR_UNKNOWN_URL_SCHEME
UI5 version: 1.42.9
it is not possible. It is using jQuery.sap.setIcons(oIcons). From the API document
The home icons must be in PNG format...
Also please see another post about Icons.
Thank you.
Using fancyBox, I want to open an images gallery clicking on a single button. This is clearly detailed on the site but it doesn't work?! I am not an expert and maybe I am doing something wrong. Here is the code:
HTML:
<a class="open_fancybox" href="image1.jpg">BUTTON</a>
JavaScript:
$(".open_fancybox").click(function() {
$.fancybox.open([
{
href : 'image1.jpg',
title : '1st title'
},
{
href : 'image2.jpg',
title : '2nd title'
},
], {
padding : 0
});
return false;
});
External resources used: jquery.fancybox.js & jquery.fancybox.css
Anyone who knows what's wrong?
I've scoured the documentation but to no avail.
Where is src looking at in the settings? Is it the root of the site or the tiny_mce folder?
If my template was located at: /tiny_mce/templates/example.html, what would I put as the SRC?
template_templates : [
{
title : "Editor Details",
src : "editor_details.htm",
description : "Adds Editor Name and Staff ID"
},
{
title : "Timestamp",
src : "blank.htm",
description : "Adds an editing timestamp."
}
],
So it turns out the the location is relative to wherever the script is run from.
So if you are calling the script on the root file (MasterPage in this instance) the code is:
template_templates : [
{
title : "Base Home Page",
src : "/tiny_mce/temp/Base.htm",
description : "Basic Homepage, rotate, etc.."
}
],
So the html file is located in ./tiny_mce/temp/
I'm styling a ruby-on-rails app and I've got a link to an external page which opens in fancybox.
The external page is styled with blueprint's 24 column width (950px wide).
I've hidden the wide elements (display:none in css) from that page so that the elements I'm interested in are only 250px wide in fancybox.
But when it opens in fancybox it somehow still seems to read the .span-24 attribute rather than opening at the smaller size.
I can't create another external page and must use the blueprint styled one. Any advice on how to force fancybox to open, centered, as a 250px wide box?
Edit:
Here is the code I'm currently using:
$(document).ready(function() {
$("a#fancypants-1").fancybox({
'autodimensions' : true,
'width' : 250,
'scrolling' : 'no',
'opacity' : true,
'overlayShow' : true,
'overlayColor' : '#000',
'overlayOpacity' : 0.8,
'transitionIn' : 'elastic',
'hideOnContentClick': false ,
'transitionOut' : 'none'
});
});
try like this
$.fancybox({
'autoDimensions' : true,
'height': 'auto',
'width':250px;
'scrolling' : 'no',
'transitionIn' : 'none',
'transitionOut' : 'none',
});