ionic-team / ionic-team/ionic-framework

feat: customize where modal is appended to

未关闭
#24,198 17 条评论 14 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: feature request
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

Specifying the parent component for a modal.

Similar requests:
https://github.com/ionic-team/ionic-framework/issues/22689
https://github.com/ionic-team/ionic-framework/issues/23250

### Describe the Use Case

I'm attempting to use the new sheet modal within a map UI. The problem is, the map is not the only feature of my app - it's a "tab" within my app.

If I launch a sheet modal within the map tab, it covers my tab bar. It'd be nice to be able to tie the sheet model to that specific tab, so that users can still navigate tabs while having a location / sheet modal active on the map tab.

### Describe Preferred Solution

Perhaps there could be a ModalOption to allow for specifying the parent component, which by default would be `ion-app`?

### Describe Alternatives

I'm not aware of any other way to do this within the current framework version 6.RC.2

### Related Code
https://github.com/ionic-team/ionic-framework/blob/61be8aa140c38338b94b2234d732bab67e431093/core/src/utils/overlays.ts#L59-L60

### Additional Information
_No response_

贡献指南

打开贡献指南

调研方向

Start with core/src/utils/overlays.ts around lines 59-60 and review the related issues linked in the request. Determine how a modal could target a parent component instead of ion-app, then verify that the proposed behavior supports sheet modals within a tab while preserving existing default behavior.

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
frontend
Issue 类型
功能
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。