Skip to content

Commit b14dbab

Browse files
thetaPCthetaPC
committed
docs(react): update page 7 example
1 parent 49de97c commit b14dbab

File tree

2 files changed

+74
-58
lines changed

2 files changed

+74
-58
lines changed

‎docs/react/your-first-app/7-live-reload.md‎

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,33 @@ const Tab2: React.FC = () => {
117117

118118
return (
119119
<IonPage>
120-
<IonContent>
121-
{/* ...existing code... */}
120+
<IonHeader>
121+
<IonToolbar>
122+
<IonTitle>Photo Gallery</IonTitle>
123+
</IonToolbar>
124+
</IonHeader>
125+
<IonContent fullscreen>
126+
<IonHeader collapse="condense">
127+
<IonToolbar>
128+
<IonTitle size="large">Photo Gallery</IonTitle>
129+
</IonToolbar>
130+
</IonHeader>
131+
132+
<IonGrid>
133+
<IonRow>
134+
{photos.map((photo) => (
135+
<IonCol size="6" key={photo.filepath}>
136+
<IonImg src={photo.webviewPath} />
137+
</IonCol>
138+
))}
139+
</IonRow>
140+
</IonGrid>
141+
142+
<IonFab vertical="bottom" horizontal="center" slot="fixed">
143+
<IonFabButton onClick={() => addNewToGallery()}>
144+
<IonIcon icon={camera}></IonIcon>
145+
</IonFabButton>
146+
</IonFab>
122147

123148
{/* CHANGE: Add action sheet for deleting photos */}
124149
<IonActionSheet
@@ -157,33 +182,16 @@ export default Tab2;
157182
Add a click handler to the `<IonImg>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
158183

159184
```tsx
160-
<IonPage>
161-
<IonHeader>
162-
<IonToolbar>
163-
<IonTitle>Photo Gallery</IonTitle>
164-
</IonToolbar>
165-
</IonHeader>
166-
<IonContent fullscreen>
167-
<IonHeader collapse="condense">
168-
<IonToolbar>
169-
<IonTitle size="large">Photo Gallery</IonTitle>
170-
</IonToolbar>
171-
</IonHeader>
172-
173-
<IonGrid>
174-
<IonRow>
175-
{photos.map((photo) => (
176-
<IonCol size="6" key={photo.filepath}>
177-
{/* CHANGE: Add a click event listener to each image. */}
178-
<IonImg src={photo.webviewPath} onClick={() => setPhotoToDelete(photo)} />
179-
</IonCol>
180-
))}
181-
</IonRow>
182-
</IonGrid>
183-
184-
{/* ...existing code... */}
185-
</IonContent>
186-
</IonPage>
185+
<IonGrid>
186+
<IonRow>
187+
{photos.map((photo) => (
188+
<IonCol size="6" key={photo.filepath}>
189+
{/* CHANGE: Add a click event listener to each image. */}
190+
<IonImg src={photo.webviewPath} onClick={() => setPhotoToDelete(photo)} />
191+
</IonCol>
192+
))}
193+
</IonRow>
194+
</IonGrid>
187195
```
188196

189197
Remember that removing the photo from the `photos` array triggers the `cachePhotos` method for us automatically.

‎versioned_docs/version-v7/react/your-first-app/7-live-reload.md‎

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,33 @@ const Tab2: React.FC = () => {
117117

118118
return (
119119
<IonPage>
120-
<IonContent>
121-
{/* ...existing code... */}
120+
<IonHeader>
121+
<IonToolbar>
122+
<IonTitle>Photo Gallery</IonTitle>
123+
</IonToolbar>
124+
</IonHeader>
125+
<IonContent fullscreen>
126+
<IonHeader collapse="condense">
127+
<IonToolbar>
128+
<IonTitle size="large">Photo Gallery</IonTitle>
129+
</IonToolbar>
130+
</IonHeader>
131+
132+
<IonGrid>
133+
<IonRow>
134+
{photos.map((photo) => (
135+
<IonCol size="6" key={photo.filepath}>
136+
<IonImg src={photo.webviewPath} />
137+
</IonCol>
138+
))}
139+
</IonRow>
140+
</IonGrid>
141+
142+
<IonFab vertical="bottom" horizontal="center" slot="fixed">
143+
<IonFabButton onClick={() => addNewToGallery()}>
144+
<IonIcon icon={camera}></IonIcon>
145+
</IonFabButton>
146+
</IonFab>
122147

123148
{/* CHANGE: Add action sheet for deleting photos */}
124149
<IonActionSheet
@@ -157,33 +182,16 @@ export default Tab2;
157182
Add a click handler to the `<IonImg>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
158183

159184
```tsx
160-
<IonPage>
161-
<IonHeader>
162-
<IonToolbar>
163-
<IonTitle>Photo Gallery</IonTitle>
164-
</IonToolbar>
165-
</IonHeader>
166-
<IonContent fullscreen>
167-
<IonHeader collapse="condense">
168-
<IonToolbar>
169-
<IonTitle size="large">Photo Gallery</IonTitle>
170-
</IonToolbar>
171-
</IonHeader>
172-
173-
<IonGrid>
174-
<IonRow>
175-
{photos.map((photo) => (
176-
<IonCol size="6" key={photo.filepath}>
177-
{/* CHANGE: Add a click event listener to each image. */}
178-
<IonImg src={photo.webviewPath} onClick={() => setPhotoToDelete(photo)} />
179-
</IonCol>
180-
))}
181-
</IonRow>
182-
</IonGrid>
183-
184-
{/* ...existing code... */}
185-
</IonContent>
186-
</IonPage>
185+
<IonGrid>
186+
<IonRow>
187+
{photos.map((photo) => (
188+
<IonCol size="6" key={photo.filepath}>
189+
{/* CHANGE: Add a click event listener to each image. */}
190+
<IonImg src={photo.webviewPath} onClick={() => setPhotoToDelete(photo)} />
191+
</IonCol>
192+
))}
193+
</IonRow>
194+
</IonGrid>
187195
```
188196

189197
Remember that removing the photo from the `photos` array triggers the `cachePhotos` method for us automatically.

0 commit comments

Comments
 (0)