docs(popover): add customization playgrounds #2348
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| <style> | ||
| ion-popover { | ||
| --background: rgba(40, 173, 218, 0.6); | ||
| --backdrop-opacity: 0.6; |
There was a problem hiding this comment.
Any particular reason why you opted to use the backdrop opacity CSS variable instead of setting opacity on ::part(backdrop)?
There was a problem hiding this comment.
Just to show that the variable exists, mostly 😆 I can change it if you like, although that makes me wonder why we have the variable in the first place 😄
There was a problem hiding this comment.
It's up to you. The variable was added before shadow parts were available in most browsers. Though with the shadow part it's redundant.
There was a problem hiding this comment.
So it turns out that ion-popover has a default value for --backdrop-opacity built-in: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.ios.scss#L11 This overwrites setting opacity on the ion-backdrop directly, so setting a custom --backdrop-opacity on the popover is the cleanest way of doing things.
|
That misalignment does look like an Ionic bug, yeah. Interestingly, React and Vue show slightly different behavior from Angular, though all three frameworks are misaligned in some capacity. I'll get some repro apps together and post an issue. |
|
Issue created: ionic-team/ionic-framework#25337 |
Adds the following playgrounds:
Also removes a dead link from the existing docs.