ionic-team / ionic-team/ionic-framework
feat: Dynamic breakpoints for Sheet Modals
- 主要言語
- TypeScript
- スター
- 52.7k
- フォーク
- 13.3k
- 平均マージ
- 1日 15時間
- マージ済み PR(30日)
- 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
Sheet modals can have dynamic content within their container. When the content changes, the height of the sheet modal can also change. Sheet modals should offer the ability to the developer, to update the breakpoint values dynamically, so that the sheet modal will both animate to the updated height smoothly as well as the clip point for the breakpoint will respond to the updated height.
### Describe the Use Case
Twitter spaces highlights this example perfectly.
|Initial Breakpoint|Max Breakpoint|
|---|---|
||
|
When the number of participants in a Twitter space increases, the height of the modal will also increase, changing the breakpoint value:
|Updated Breakpoint|Max Breakpoint|
|---|---|
||
|
### Describe Preferred Solution
Dynamic breakpoints should happen automatically, with limited customization from the implementer. For example:
```html
```
```ts
breakpoints = [0, 0.25];
onClick() {
this.breakpoints = [0, 0.5];
}
```
Developers should be able to update the value of `breakpoints` at any point once the sheet modal is presented and the sheet modal should respond and update accordingly.
### Describe Alternatives
Other options have been explored here: https://github.com/sean-perkins/modal-sheet-hans
1. Presenting a new sheet modal when the state changes. Functional, but the transition between dismissing the previous sheet modal and presenting the new sheet modal is noticeable and not ideal.
2. Dynamically changing the height of the modal. Displays similarly, but does not transition between height changes. Also the gesture behavior responds incorrectly.
### Related Code
Supporting this internally will require changes similar to: https://github.com/ionic-team/ionic-framework/commit/f08456700246e7b14ef9eb2354bfdd9499a76d74
We will need to safeguard against instances where:
- The current breakpoint is no longer in the list of available breakpoints
- The sheet gesture needs to be re-created as a result of the breakpoints being modified
### Additional Information
Duplicate feature request as: #24752, with updated use case.
コントリビューションガイド
調査の方向性
Start by reviewing the implementation changes referenced by commit f08456700246e7b14ef9eb2354bfdd9499a76d74 and compare this request with duplicate issue #24752. Trace breakpoint updates and sheet gesture creation, then verify that changing breakpoints after presentation animates to the new height, handles a removed current breakpoint, and recreates the gesture when needed.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- typescript
- 領域
- frontend
- issue の種類
- 機能追加
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 25/100