如何在 Popover 中放置 Tabs
How to place Tabs inside Popover
我有应用程序具有选项卡视图的要求。第四个选项卡有弹出窗口,弹出窗口包含更多 3 个菜单,应该作为一个选项卡,这意味着它应该像其他 3 个选项卡一样打开。
我试过了,但是页面没有显示,因为它没有将弹出页面设置为选项卡视图中的根页面。
tabs.html
<ion-tabs #myTab>
<ion-tab [root]="tab1Root" tabIcon="theme-business"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="theme-table"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="theme-like"></ion-tab>
<ion-tab (ionSelect)="presentPopover($event)" tabIcon="ios-apps-outline"></ion-tab>
</ion-tabs>
tabs.ts
presentPopover(event) {
let popover = this.popoverCtrl.create(TabPopoverPage, {});
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}
tabPopover.html
<ion-content padding>
<ion-list>
<button ion-item (click)="openPage('SalonDetailsPage')">
<ion-icon name="theme-profile" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage('SalesReportPage')">
<ion-icon name="theme-wallet" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage('SettingsPage')">
<ion-icon name="theme-setting" item-left></ion-icon>
Setting
</button>
</ion-list>
</ion-content>
tabPopover.ts
openPage(pageName: any) {
// this.navCtrl.setRoot(pageName);
this.navCtrl.push(pageName);
}
不胜感激!
Please Note, while this implementation is not the best and there are probably a dozen other ways to solve this problem, this was the easiest.
you can find a working example here: https://stackblitz.com/edit/ionic-v3-custom-tabs
可能有一种方法可以通过编程方式添加一个新的 ion-tab 项,但我无法在 ionic 文档中找到它,但这是我根据这个问题对实现的看法
第 1 步:
我们目前有 4 个选项卡项,我们添加了我们需要的额外选项卡项。
<ion-tab [root]="tab4Root" show= "false" tabIcon="person"></ion-tab>
<ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
<ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab>
注意显示属性
显示:根据 ionic 文档隐藏选项卡元素。 https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties
这会创建 ion-tab 元素但会隐藏它们。
第 2 步:
我们需要引用已用 <ion-tabs #myTab>
定义的 ion-tabs 元素
页数:tabs.ts
// 我们使用模板引用获取离子标签,然后将其分配给局部变量 tabRef
@ViewChild('myTab') tabRef: Tabs;
presentPopover(event) {
let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}
我们需要一种方法来引用此组件 (TabsPage),因此我们将其作为导航参数传递
https://ionicframework.com/docs/api/components/popover/PopoverController/#create
https://ionicframework.com/docs/api/navigation/NavParams/#get
第 3 步:
页面:popover.html
<button ion-item (click)="openPage(4)">
<ion-icon name="person" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage(5)">
<ion-icon name="cash" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage(6)">
<ion-icon name="settings" item-left></ion-icon>
Setting
</button>
//每个数字代表我们希望导航到的页面的标签索引:https://ionicframework.com/docs/api/components/tabs/Tabs/#selecting-a-tab
页面:PopoverPage
// the tabs page ref
tabsPageRef: TabsPage;
constructor(
public navCtrl: NavController,
public navParams: NavParams
) {
// recall the navpage: this from the TabsPage?
this.tabsPageRef = this.navParams.get('navpage');
}
openPage(pageName: any) {
// here, we are using the reference of the TabsPage to access the local variable tabref
this.tabsPageRef.tabRef.select(pageName)
}
我有应用程序具有选项卡视图的要求。第四个选项卡有弹出窗口,弹出窗口包含更多 3 个菜单,应该作为一个选项卡,这意味着它应该像其他 3 个选项卡一样打开。
我试过了,但是页面没有显示,因为它没有将弹出页面设置为选项卡视图中的根页面。
tabs.html
<ion-tabs #myTab>
<ion-tab [root]="tab1Root" tabIcon="theme-business"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="theme-table"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="theme-like"></ion-tab>
<ion-tab (ionSelect)="presentPopover($event)" tabIcon="ios-apps-outline"></ion-tab>
</ion-tabs>
tabs.ts
presentPopover(event) {
let popover = this.popoverCtrl.create(TabPopoverPage, {});
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}
tabPopover.html
<ion-content padding>
<ion-list>
<button ion-item (click)="openPage('SalonDetailsPage')">
<ion-icon name="theme-profile" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage('SalesReportPage')">
<ion-icon name="theme-wallet" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage('SettingsPage')">
<ion-icon name="theme-setting" item-left></ion-icon>
Setting
</button>
</ion-list>
</ion-content>
tabPopover.ts
openPage(pageName: any) {
// this.navCtrl.setRoot(pageName);
this.navCtrl.push(pageName);
}
不胜感激!
Please Note, while this implementation is not the best and there are probably a dozen other ways to solve this problem, this was the easiest. you can find a working example here: https://stackblitz.com/edit/ionic-v3-custom-tabs
可能有一种方法可以通过编程方式添加一个新的 ion-tab 项,但我无法在 ionic 文档中找到它,但这是我根据这个问题对实现的看法
第 1 步:
我们目前有 4 个选项卡项,我们添加了我们需要的额外选项卡项。
<ion-tab [root]="tab4Root" show= "false" tabIcon="person"></ion-tab>
<ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
<ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab>
注意显示属性 显示:根据 ionic 文档隐藏选项卡元素。 https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties 这会创建 ion-tab 元素但会隐藏它们。
第 2 步:
我们需要引用已用 <ion-tabs #myTab>
页数:tabs.ts
// 我们使用模板引用获取离子标签,然后将其分配给局部变量 tabRef
@ViewChild('myTab') tabRef: Tabs;
presentPopover(event) {
let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}
我们需要一种方法来引用此组件 (TabsPage),因此我们将其作为导航参数传递 https://ionicframework.com/docs/api/components/popover/PopoverController/#create https://ionicframework.com/docs/api/navigation/NavParams/#get
第 3 步:
页面:popover.html
<button ion-item (click)="openPage(4)">
<ion-icon name="person" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage(5)">
<ion-icon name="cash" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage(6)">
<ion-icon name="settings" item-left></ion-icon>
Setting
</button>
//每个数字代表我们希望导航到的页面的标签索引:https://ionicframework.com/docs/api/components/tabs/Tabs/#selecting-a-tab
页面:PopoverPage
// the tabs page ref
tabsPageRef: TabsPage;
constructor(
public navCtrl: NavController,
public navParams: NavParams
) {
// recall the navpage: this from the TabsPage?
this.tabsPageRef = this.navParams.get('navpage');
}
openPage(pageName: any) {
// here, we are using the reference of the TabsPage to access the local variable tabref
this.tabsPageRef.tabRef.select(pageName)
}