ionic-team / ionic-team/ionic-framework

feat: toast - allow fine grained control over toast position

未关闭
#29,990 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
triage
主要语言
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/docs/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

The toast either gets in the way, or is out of eyesight.

I want to position it as a lower-third.

I have an ion-footer / ion-toolbar in my app, and if I put the toast at the bottom then it covers the ui and gets in the way.

Putting it at the middle or top, even I miss it sometimes, as the app developer. Modern phones are tall and its out of my eyesight when I'm pressing an ok or save button in the footer of the screen.

I wanted to adjust it but the component uses css shadow parts and the positioning is done in a part that is not exposed.

This doesn't work because it just moves the text inside the toast, not the background and actual toast:

```css
.util-brand-toast::part(container) {
transform: translate3d(0, -30%, 0) !important;
}
```

This doesn't work because its not exposed:

```css
.util-brand-toast .toast-wraper.toast-bottom {
transform: translate3d(0, -30%, 0) !important;
}
```

This does "work" but it affects the outer container, and I'm nervous that it's not a clean way of doing things:

```css
.util-brand-toast {
transform: translate3d(0, -30%, 0) !important;
}
```

It ends up like this:

image

### Describe the Use Case

Allow fine grained control over the toast position

### Describe Preferred Solution

Access to the `.toast-wrapper` or some setting method.

### Describe Alternatives

_No response_

### Related Code

_No response_

### Additional Information

_No response_

贡献指南

打开贡献指南

调研方向

No file or test is named. Start from the toast component's shadow-part definition and the positioning implementation described as the unexposed toast wrapper; determine how a public wrapper part or positioning setting should support lower-third placement without moving only the text. Done means the toast can be positioned between the footer and the viewport edge without covering the footer, with behavior covered by appropriate tests.

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

评估

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

把新 issue 发到你的邮箱

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