ionic-team / ionic-team/ionic-framework

CSS4 box-shadow variable for toolbar-background

未關閉
#17,544 2 則留言 2 個 reaction 已指派 0 人 在 GitHub 檢視
package: core type: feature request
主要語言
TypeScript
星號
52.7k
分支
13.3k
平均合併
1 天 14 小時
30 天內合併 PR
50

描述

# Feature Request
Please add a css4 box-shadow variable for ion-header ion-toolbar:last-child or ion-footer ion-toolbar:first-child.

**Ionic version:**
[x] **4.x**

**Describe the Feature Request**
Ionic 4 has no satisfying option to add a box-shadow to the header in iOS mode. Adding a box-shadow to the ion-toolbar or ion-header does not work, because it leaves an ugly navigation animation if the header is not the same size on the parent / child pages.

![ionic4-shadow-problem](https://user-images.githubusercontent.com/11189008/53091077-4cc1db80-3511-11e9-84c8-f511a6d37c23.gif)

**Describe Preferred Solution**
CSS4 box-shadow variable for ion-header ion-toolbar:last-child or ion-footer ion-toolbar:first-child. This was the fix for adding a good looking box-shadow to toolbars in Ionic 3 and is prevented with the new shadow DOM.

**Additional Context**
The solution given in https://github.com/ionic-team/ionic/issues/16895 does not fix the problem because then the navigation animation looks bad.

貢獻指南

開啟貢獻指南

研究方向

先定位 ion-header、ion-footer 和 ion-toolbar 的 iOS-mode 樣式,然後檢視現有 toolbar CSS 變數的定義方式。針對已回報的導覽動畫情況驗證此變更,並確認要求的 box-shadow 變數可以在不改變版面配置的情況下,為相關的第一個或最後一個 toolbar 設定樣式。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
css, typescript
領域
design, frontend
Issue 類型
功能
難度
3/5
預估耗時
1-2 天
活躍度
停滯
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。