Skip to content

docs(header, footer, tab-bar): document the scrollEffect prop #4845

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

Open
thetaPC wants to merge 5 commits into
base: major-10.0
Choose a base branch
from
+1,473 −98
Open

docs(header, footer, tab-bar): document the scrollEffect prop #4845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
acbeb4c
docs(header, footer, tab-bar): document the scrollEffect prop
thetaPC Nov 13, 2026
68f0173
docs(demo): remove dev build
thetaPC Nov 13, 2026
ae78843
docs(tutorials): drop iOS from the collapsible large title wording
thetaPC Nov 13, 2026
b9508a8
docs(updating): recommend scrollEffect over the deprecated collapse
thetaPC Nov 13, 2026
23f833b
docs(tab-bar): register icons in the JavaScript hide playground
thetaPC Nov 13, 2026
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/angular/add-to-existing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ Start by adding a template at `src/app/home/home.html`:
</ion-header>

<ion-content fullscreen="true">
<ion-header collapse="condense">
<ion-header scrollEffect="condense">
<ion-toolbar>
<ion-title size="large">Home</ion-title>
</ion-toolbar>
Expand Down
6 changes: 3 additions & 3 deletions docs/angular/quickstart.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ And the template, in the `home.page.html` file, uses those components:
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-header scrollEffect="condense">

@ShaneK ShaneK Nov 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The paragraph under this block still says the large title "displays on iOS devices", but with scrollEffect it condenses in every theme now. I think we can just drop "on iOS devices" from it. The React and Vue quickstarts have the same sentence, and I think the Your First App pages have a similar "due to iOS Collapsible Large Title support" line that could lose the "iOS" too. Since this PR removes the iOS-only note from the title page, the tutorials would end up contradicting it otherwise.

@thetaPC thetaPC Nov 13, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in ae78843.

<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
Expand All @@ -174,7 +174,7 @@ And the template, in the `home.page.html` file, uses those components:
</ion-content>
```

This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.

:::tip[Learn More]

Expand Down Expand Up @@ -317,7 +317,7 @@ Update the `ion-content` in your `new.page.html` to include a button and some it

```html title="src/app/new/new.page.html"
<ion-content [fullscreen]="true" #content>
<ion-header collapse="condense">
<ion-header scrollEffect="condense">
<ion-toolbar>
<ion-title size="large">new</ion-title>
</ion-toolbar>
Expand Down
8 changes: 4 additions & 4 deletions docs/angular/your-first-app.mdx
View file
Open in desktop
Comment thread
brandyscarney marked this conversation as resolved.
Resolved
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-header scrollEffect="condense">

@ShaneK ShaneK Nov 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text above this block says it's what the generated file contains, but the starters still generate <ion-header collapse="condense">, so anyone who runs ionic start will see something different from the docs. That's fine today since the starters are still on v9, but I think we'll want a matching change in the starters repo (tabs and blank, for Angular, React and Vue) before v10 ships. Is that tracked anywhere? The React and Vue versions of this page and the quickstarts have the same mismatch.

@thetaPC thetaPC Nov 13, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It wasn't tracked, it is now internally. The change is in ionic-team/starters#1936 against the new major-10.0 branch, covering list and sidemenu too.

<ion-toolbar>
<ion-title size="large">Tab 2</ion-title>
</ion-toolbar>
Expand All @@ -168,7 +168,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
</ion-content>
```

`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:

```html
<ion-header [translucent]="true">
Expand All @@ -179,7 +179,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-header scrollEffect="condense">
<ion-toolbar>
<!-- CHANGE: Update title -->
<ion-title size="large">Photo Gallery</ion-title>
Expand All @@ -200,7 +200,7 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
</ion-header>

<ion-content>
<ion-header collapse="condense">
<ion-header scrollEffect="condense">
<ion-toolbar>
<ion-title size="large">Photo Gallery</ion-title>
</ion-toolbar>
Expand Down
4 changes: 2 additions & 2 deletions docs/angular/your-first-app/2-taking-photos.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` method when the F
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-header scrollEffect="condense">
<ion-toolbar>
<ion-title size="large">Photo Gallery</ion-title>
</ion-toolbar>
Expand Down Expand Up @@ -241,7 +241,7 @@ Next, switch to `tab2.page.html` to display the images. We'll add a [Grid compon
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-header scrollEffect="condense">
<ion-toolbar>
<ion-title size="large">Photo Gallery</ion-title>
</ion-toolbar>
Expand Down
2 changes: 1 addition & 1 deletion docs/angular/your-first-app/7-live-reload.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ Open `tab2.page.html` and wrap each image in a `<button>` element with a click h
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-header scrollEffect="condense">
<ion-toolbar>
<ion-title size="large">Photo Gallery</ion-title>
</ion-toolbar>
Expand Down
8 changes: 1 addition & 7 deletions docs/api/buttons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,7 @@ import Types from '@site/static/usage/v10/buttons/types/index.mdx';

## Collapsible Buttons {/* #collapsible-buttons */}

The `collapse` property can be set on the buttons to collapse them when the header collapses. This is typically used with [collapsible large titles](./title#collapsible-large-titles).

:::info

This feature is only available for iOS.

:::
The `collapse` property can be set on the buttons to collapse them when the header collapses. This is typically used with [collapsible large titles](./title.mdx#collapsible-large-titles).

{/* Reuse the playground from the Title directory */}
import CollapsibleLargeTitleButtons from '@site/static/usage/v10/title/collapsible-large-title/buttons/index.mdx';
Expand Down
12 changes: 11 additions & 1 deletion docs/api/footer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import Translucent from '@site/static/usage/v10/footer/translucent/index.mdx';

## Fade Footer {/* #fade-footer */}

Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the footer to `"fade"`. When the content is scrolled to the end, the background and border on the footer will fade away. This effect will only apply when the mode is `"ios"`.
Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `scrollEffect` property on the footer to `"fade"`. When the content is scrolled to the end, the background and border on the footer will fade away.

import Fade from '@site/static/usage/v10/footer/fade/index.mdx';

Expand All @@ -51,6 +51,16 @@ import CustomScrollTarget from '@site/static/usage/v10/footer/custom-scroll-targ

<CustomScrollTarget />

## Hide Footer {/* #hide-footer */}

The footer can slide out of view as the content is scrolled down, giving the content more room, and slide back in as soon as the content is scrolled up. This can be achieved by setting the `scrollEffect` property on the footer to `"hide"`.

When the footer contains a [tab bar](./tab-bar.mdx), set `scrollEffect` on the footer rather than the tab bar so the whole footer hides together.

import Hide from '@site/static/usage/v10/footer/hide/index.mdx';

<Hide />

## Borders {/* #borders */}

In `"md"` mode, the footer will have a `box-shadow` on the top. In `"ios"` mode, it will receive a `border` on the top. These can be removed by adding the `.ion-no-border` class to the footer.
Expand Down
14 changes: 11 additions & 3 deletions docs/api/header.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,17 @@ import Translucent from '@site/static/usage/v10/header/translucent/index.mdx';

## Condensed Header {/* #condensed-header */}

Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the `collapse` property to `"condense"` on the header inside of the content. This effect will only apply when the mode is "ios".
Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the `scrollEffect` property to `"condense"` on the header inside of the content.

@ShaneK ShaneK Nov 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the v10 updating guide needs a header/footer entry for this, since switching from collapse to scrollEffect isn't a straight rename. With scrollEffect the condense and fade effects apply on md too, so an app that follows the deprecation warning will suddenly show its large-title header on Android, where md used to hide it. The guide doesn't mention collapse at all right now. A follow-up PR is fine if you'd rather, it'd just be nice to note that in the PR body.

@thetaPC thetaPC Nov 13, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added in b9508a8.


import Condense from '@site/static/usage/v10/header/condense/index.mdx';

<Condense />

## Fade Header {/* #fade-header */}

Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the header to `"fade"`. When the page is first loaded, the background and border on the header will be hidden. As the content is scrolled, the header will fade back in. This effect will only apply when the mode is "ios".
Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `scrollEffect` property on the header to `"fade"`. When the page is first loaded, the background and border on the header will be hidden. As the content is scrolled, the header will fade back in.

This functionality can be combined with a [Condensed Header](#condensed-header) as well. The `collapse` property with a value set to `"fade"` should be on the header outside of the content.
This functionality can be combined with a [Condensed Header](#condensed-header) as well. The `scrollEffect` property with a value set to `"fade"` should be on the header outside of the content.

import Fade from '@site/static/usage/v10/header/fade/index.mdx';

Expand All @@ -61,6 +61,14 @@ import CustomScrollTarget from '@site/static/usage/v10/header/custom-scroll-targ

<CustomScrollTarget />

## Hide Header {/* #hide-header */}

The header can slide out of view as the content is scrolled down, giving the content more room, and slide back in as soon as the content is scrolled up. This can be achieved by setting the `scrollEffect` property on the header to `"hide"`.

import Hide from '@site/static/usage/v10/header/hide/index.mdx';

<Hide />

## Borders {/* #borders */}

In `"md"` mode, the header will have a `box-shadow` on the bottom. In `"ios"` mode, it will receive a `border` on the bottom. These can be removed by adding the `.ion-no-border` class to the header.
Expand Down
10 changes: 10 additions & 0 deletions docs/api/tab-bar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,16 @@ import InsideTabBar from '@site/static/usage/v10/badge/inside-tab-bar/index.mdx'

<InsideTabBar />

## Hide Tab Bar {/* #hide-tab-bar */}

The tab bar can slide out of view as the content is scrolled down, giving the content more room, and slide back in as soon as the content is scrolled up. This can be achieved by setting the `scrollEffect` property on the tab bar to `"hide"`.

When the tab bar is inside a [footer](./footer.mdx), `scrollEffect` on the tab bar is ignored. Set it on the footer instead so the whole footer hides together.

import Hide from '@site/static/usage/v10/tab-bar/hide/index.mdx';

<Hide />

## Properties {/* #properties */}

<Props />
Expand Down
6 changes: 0 additions & 6 deletions docs/api/title.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,6 @@ import Basic from '@site/static/usage/v10/title/basic/index.mdx';

The large title will display when the [content](./content) is scrolled to the start of the scroll container. When the title is scrolled behind the header, the condensed title will fade in.

:::info

This feature is only available for iOS.

:::

import CollapsibleLargeTitle from '@site/static/usage/v10/title/collapsible-large-title/basic/index.mdx';

<CollapsibleLargeTitle />
Expand Down
2 changes: 1 addition & 1 deletion docs/react/add-to-existing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ const Home = () => {
</IonHeader>

<IonContent fullscreen={true}>
<IonHeader collapse="condense">
<IonHeader scrollEffect="condense">
<IonToolbar>
<IonTitle size="large">Home</IonTitle>
</IonToolbar>
Expand Down
6 changes: 3 additions & 3 deletions docs/react/quickstart.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const Home: React.FC = () => {
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonHeader scrollEffect="condense">
<IonToolbar>
<IonTitle size="large">Blank</IonTitle>
</IonToolbar>
Expand All @@ -150,7 +150,7 @@ const Home: React.FC = () => {
export default Home;
```

This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.

:::tip[Learn More]

Expand Down Expand Up @@ -205,7 +205,7 @@ const New: React.FC = () => {
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonHeader scrollEffect="condense">
<IonToolbar>
<IonTitle size="large">New</IonTitle>
</IonToolbar>
Expand Down
8 changes: 4 additions & 4 deletions docs/react/your-first-app.mdx
View file
Open in desktop
Comment thread
brandyscarney marked this conversation as resolved.
Resolved
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ const Tab2: React.FC = () => {
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonHeader scrollEffect="condense">
<IonToolbar>
<IonTitle size="large">Tab 2</IonTitle>
</IonToolbar>
Expand All @@ -169,7 +169,7 @@ const Tab2: React.FC = () => {
export default Tab2;
```

`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:

```tsx
<IonPage>
Expand All @@ -180,7 +180,7 @@ export default Tab2;
</IonToolbar>
</IonHeader>
<IonContent>
<IonHeader collapse="condense">
<IonHeader scrollEffect="condense">
<IonToolbar>
{/* CHANGE: Update title */}
<IonTitle size="large">Photo Gallery</IonTitle>
Expand Down Expand Up @@ -212,7 +212,7 @@ const Tab2: React.FC = () => {
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonHeader scrollEffect="condense">
<IonToolbar>
<IonTitle size="large">Photo Gallery</IonTitle>
</IonToolbar>
Expand Down
4 changes: 2 additions & 2 deletions docs/react/your-first-app/2-taking-photos.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const Tab2: React.FC = () => {
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonHeader scrollEffect="condense">
<IonToolbar>
<IonTitle size="large">Photo Gallery</IonTitle>
</IonToolbar>
Expand Down Expand Up @@ -233,7 +233,7 @@ const Tab2: React.FC = () => {
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonHeader scrollEffect="condense">
<IonToolbar>
<IonTitle size="large">Photo Gallery</IonTitle>
</IonToolbar>
Expand Down
2 changes: 1 addition & 1 deletion docs/react/your-first-app/7-live-reload.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const Tab2: React.FC = () => {
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonHeader scrollEffect="condense">
<IonToolbar>
<IonTitle size="large">Photo Gallery</IonTitle>
</IonToolbar>
Expand Down
15 changes: 15 additions & 0 deletions docs/updating/10-0.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,18 @@ Coercion also moves from Stencil to Angular, which changes the result for number
- A sheet `ion-modal` shows the drag handle unless `handle` is exactly `false`.

Both values reach inputs routinely, from the `async` pipe before its first emission and from form control values, so coercing them would silently change which of those branches runs.

## Recommended Changes {/* #recommended-changes */}

The following changes are not required to update to Ionic 10, as your application will continue to work. However, we recommend making them now, since the deprecated APIs will be removed in a future major version.

### Header and Footer {/* #header-and-footer */}

The `collapse` property on `ion-header` and `ion-footer` is deprecated. Use `scrollEffect` instead, which takes the same values:

```diff
- <ion-header collapse="condense">
+ <ion-header scroll-effect="condense">
```

This is not a direct rename. `collapse` only applies when the mode is `ios`, while `scrollEffect` applies in every mode. After switching, the [condensed header](../api/header.mdx#condensed-header), [fade header](../api/header.mdx#fade-header), and [fade footer](../api/footer.mdx#fade-footer) effects also apply in `md`. For example, a page with a condensed header shows the large title in `md`, where it was previously hidden.
2 changes: 1 addition & 1 deletion docs/vue/add-to-existing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ Create a new file at `src/views/HomePage.vue` with the following:
</ion-header>

<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-header scroll-effect="condense">
<ion-toolbar>
<ion-title size="large">Home</ion-title>
</ion-toolbar>
Expand Down
6 changes: 3 additions & 3 deletions docs/vue/quickstart.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ The Home page component, defined in `HomePage.vue`, imports the Ionic components
</ion-header>

<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-header scroll-effect="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
Expand All @@ -162,7 +162,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
<!-- ...styles... -->
```

This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.

:::tip[Learn More]

Expand Down Expand Up @@ -207,7 +207,7 @@ Create a new page at `NewPage.vue`:
</ion-header>

<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-header scroll-effect="condense">
<ion-toolbar>
<ion-title size="large">New</ion-title>
</ion-toolbar>
Expand Down
8 changes: 4 additions & 4 deletions docs/vue/your-first-app.mdx
View file
Open in desktop
Comment thread
brandyscarney marked this conversation as resolved.
Resolved
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ Open `/src/views/Tab2Page.vue`. It contains:
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-header scroll-effect="condense">
<ion-toolbar>
<ion-title size="large">Tab 2</ion-title>
</ion-toolbar>
Expand All @@ -172,7 +172,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
</script>
```

`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:

```vue
<template>
Expand All @@ -184,7 +184,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-header scroll-effect="condense">
<ion-toolbar>
<!-- CHANGE: Update title -->
<ion-title size="large">Photo Gallery</ion-title>
Expand All @@ -208,7 +208,7 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-header scroll-effect="condense">
<ion-toolbar>
<ion-title size="large">Photo Gallery</ion-title>
</ion-toolbar>
Expand Down
Loading
Loading