Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(backdrop): make backdrop visible in basic playground #3200

Merged
merged 6 commits into from
Oct 17, 2023
Merged

fix(backdrop): make backdrop visible in basic playground #3200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
674b3f4
fix(backdrop): make backdrop visible in basic playground
Oct 17, 2023
49315bb
lint
Oct 17, 2023
099e984
remove duplicate React file
Oct 17, 2023
703da1b
use ion-color-dark instead of hardcoded color to handle dark mode
Oct 17, 2023
60b5d96
Update docs/api/backdrop.md
averyjohnston Oct 17, 2023
d007cad
Merge branch 'FW-5140' of https://github.com/ionic-team/ionic-docs in…
Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/api/backdrop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Backdrops are full screen components that overlay other components. They are use

## Basic Usage

The backdrop is transparent by default. The backdrop will prevent clicking or tapping on the content behind it.
The backdrop prevents clicking or tapping on the content behind it. It is transparent by default, so the below demo includes CSS to make it visible.

import Basic from '@site/static/usage/v7/backdrop/basic/index.md';

Expand Down
6 changes: 6 additions & 0 deletions static/usage/v7/backdrop/basic/angular/example_component_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
```css
ion-backdrop {
background: var(--ion-color-dark);
opacity: 0.3;
}
```
0 static/usage/v7/backdrop/basic/angular.md → ...p/basic/angular/example_component_html.md
View file
Open in desktop
File renamed without changes.
7 changes: 7 additions & 0 deletions static/usage/v7/backdrop/basic/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,13 @@
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />

<style>
ion-backdrop {
background: var(--ion-color-dark);
opacity: 0.3;
}
</style>
</head>

<body>
Expand Down
26 changes: 23 additions & 3 deletions static/usage/v7/backdrop/basic/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,33 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';

import react_main_tsx from './react/main_tsx.md';
import react_main_css from './react/main_css.md';

import vue from './vue.md';
import angular from './angular.md';

import angular_example_component_css from './angular/example_component_css.md';
import angular_example_component_html from './angular/example_component_html.md';

<Playground
version="7"
code={{ javascript, react, vue, angular }}
code={{
javascript,
react: {
files: {
'src/main.tsx': react_main_tsx,
'src/main.css': react_main_css,
},
},
vue,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.css': angular_example_component_css,
},
},
}}
src="usage/v7/backdrop/basic/demo.html"
devicePreview={true}
/>
7 changes: 7 additions & 0 deletions static/usage/v7/backdrop/basic/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
```html
<style>
ion-backdrop {
background: var(--ion-color-dark);
opacity: 0.3;
}
</style>

<ion-backdrop visible="true"></ion-backdrop>
<div class="ion-page">
<ion-header>
Expand Down
6 changes: 6 additions & 0 deletions static/usage/v7/backdrop/basic/react/main_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
```css
ion-backdrop {
background: var(--ion-color-dark);
opacity: 0.3;
}
```
2 changes: 2 additions & 0 deletions static/usage/v7/backdrop/basic/react.md → ...usage/v7/backdrop/basic/react/main_tsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
IonButton,
} from '@ionic/react';

import './main.css';

function Example() {
return (
<>
Expand Down
7 changes: 7 additions & 0 deletions static/usage/v7/backdrop/basic/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
```html
<style>
ion-backdrop {
background: var(--ion-color-dark);
opacity: 0.3;
}
</style>

<template>
<ion-backdrop :visible="true"></ion-backdrop>
<div class="ion-page">
Expand Down