I'm attempting to create a tab for each section of a menu.
So I have the following data structure:
[
{ name: 'Wines', contents:[...] },
{ name: 'Ciders', contents: [...] },
{ name: 'Beers', contents:[...] }
]
What I want is some sort of ngFor that would produce a tab for each element in the array above.
I haven't seen anything online for this and can't seem to solve it myself.
Does anyone have any experience with this?
Try something like this:
let tabs = [{name:'Wines', contents:[...]},
{name:'Ciders', contents: [...]},
{name:'Beers', contents:[...]}
];
<ion-tabs>
<ion-tab *ngFor="let tab of tabs" [root]="tab.name"></ion-tab>
</ion-tabs>
This should work if tab.name is a page that has an #IonicPage decorator where the class-name equals the name property of your tab object. Example:
#IonicPage()
#Component({
...
})
export class MyPage {
}
Then tab.name has to be MyPage.
Please note that setting a string as root of a tab utilizes lazy loading to set the root page of the tab. So you should probably read the following articles by the ionic-team if you are not familiar with it:
Part 1
Part 2
Related
Using PageTSConfig I want to add some template options to the tx_news plugin.
How do I make it so that List template options are only shown when list view is active, and the same for Detail template options?
I thought it would be something like this:
tx_news.templateLayouts {
types {
list {
1 = Alt List
}
detail {
2 = Alt Detail
}
}
}
By PageTS it's only possible to handle different list templates, the code must look like this:
tx_news.templateLayouts {
1 = A custom layout
99 = LLL:fileadmin/somelocallang/locallang.xlf:someTranslation
}
For different detail views you need to use TypoScript settings options.
All examples you can see here:
https://docs.typo3.org/p/georgringer/news/main/en-us/Tutorials/Templates/TemplateSelector/Index.html
Pages structure is: Tabs(page1,page2,page3).
When I click a button within in page1, I want to go to page4,
but now we still can see tab, how to make page4 displays as a normal page and can back to tabbed page.
In page1, I use below line to go to page4
this.navCtrl.push(page4);
I think you could first try the following, which is for test only to understand
that this is achievable:
pass params to the ion-tabs like this:
<ion-tabs>
<ion-tab [root]="tabMap" [rootParams]="tabParams" tabIcon="map"></ion-tab>
<ion-tab [root]="tabList" [rootParams]="tabParams" tabIcon="list"></ion-tab>
</ion-tabs>
Prepare the params in the tabs.ts like this:
ionViewWillEnter() {
this.tabParams.parentNav = this.navCtrl;
}
So in the inner page (page1, 2, 3) you can retrieve it, place it in a variable e.g. parentNav, and when you want to navigate out of the tabs page to do a this.parentNav.push(page4).
The proper way I think is to use events events: ionic forum
So in the tabs.ts page you could have this piece of code:
events.subscribe('tabs:newPage', (page) => {
this.navCtrl.push(page);
});
And in each page, or in a service you could have:
newPage(page) {
console.log('navigate to a new page, not a tab')
this.events.publish('tabs:newPage', page);
}
What ionic is ?
If lazy loading,maybe ionic 3 , hod did you declare page4?
You have to push it like this : this.navCtr.push('page4');
If is all ok try this (it 's extracted form an app example) :
static get parameters() {
return [[IonicApp], [NavController], [ConferenceData], [UserData]];
}
constructor(app, nav, ...) {
// all of the constructor code
}
tourFunction() {
let nav = this.app.getComponent('nav');
nav.push('page4');
}
Ref
I’m currently trying to show and hide tabs on a page of mine dynamically.
My question is, how do you do that?
I tried declaring a variable in home.ts called seeTabs: boolean = false;
But somehow I can’t assign it’s value to the tab.
I tried doing
<ion-tab … show=seeTabs …></ion-tab>
I also tried
show=“seeTabs”, show=this.seeTabs, show=“this.seeTabs”
but nothing works.
Do you have any idea how to do this?
I mean I tried doing what the documentation said…
https://ionicframework.com/docs/api/components/tabs/Tab/
The right syntax is <ion-tab [show]="seeTabs"></ion-tab>
Hope it helps.
export class UserListPage { seeTabs ;}
ionViewDidLoad() { this.seeTabs = false;}
In my app I have 3 tabs. In the first tab there is a list that pushes to another page (inside the same tab, so the tabs remain at the bottom). When I switch to another tab, and I go back then to the first tab I am still at that subpage.
Is there a way to go always to the root. The problem is that inside the child-page I have also links, so the solution on Ionic 2 - How do I get back to the start page of a given tab did not work for me, as he redirects me also to the root when I click open a new page in the child.
Any other solutions?
I'm not sure if this would be the best way to fix that, but it should work. Suppose this is the page that contains all the tabs:
<ion-tabs>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(0)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(1)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(2)" tabTitle="First tab"></ion-tab>
</ion-tabs>
And in the component code:
import { Events } from 'ionic-angular';
// ...
constructor(public events: Events) {}
public onSelected(index: number): void {
if(index) this.events.publish('TabSelected');
}
So basically, we're publishing an event when the user selects any tab other than the first tab (index equal to 0).
The in the FirstTab, we can subscribe to that event, and use this.navCtrl.popToRoot() to close the opened pages inside of that tab:
// FirstTabCode
import { NavController, Events } from 'ionic-angular';
// ...
constructor(public navCtrl: NavController, public events: Events) {
this.events.subscribe('TabSelected', () => { this.navCtrl.popToRoot(); });
}
ngOnDestroy() {
this.events.unsubscribe('TabSelected');
}
Is there a way to add a new style to the Insert Link dialog in Typo3?
Currently they are "internal-link", "internal-link-new-window", or no style.
I have tried putting various things in the Page tsconfig with no results at all...
I found this on another site which looks like it does what I want but I can't get it to do anything:
RTE.classesAnchor {
tollerLink1 {
class = button
type = page
titleText = Button
}
}
RTE.default {
classesAnchor:=addToList(button)
}
In your TsConfig (Home Page Properties - Resources - Page TSConfig)
RTE.default.buttons {
link.properties.class.allowedClasses := addToList(internal-link-new-window)
}