From 7a2f6bacd951f1709b8c92cf3a16c5602c5e1282 Mon Sep 17 00:00:00 2001 From: Austin-Spriggs Date: Thu, 11 Jun 2026 08:36:20 -0500 Subject: [PATCH 1/4] docs: description of condensed headers / collapsible title on Quickstart pages now mentions iOS-only --- docs/angular/quickstart.md | 2 +- docs/react/quickstart.md | 2 +- docs/vue/quickstart.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/angular/quickstart.md b/docs/angular/quickstart.md index e2d7b1436f0..fa7bcf218bf 100644 --- a/docs/angular/quickstart.md +++ b/docs/angular/quickstart.md @@ -172,7 +172,7 @@ And the template, in the `home.page.html` file, uses those components: ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#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. +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#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. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md index 220dc010585..3b7a9fd079f 100644 --- a/docs/react/quickstart.md +++ b/docs/react/quickstart.md @@ -156,7 +156,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](/docs/api/title.md#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. +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](/docs/api/title.md#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. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md index b1bb31141af..97080b04e19 100644 --- a/docs/vue/quickstart.md +++ b/docs/vue/quickstart.md @@ -160,7 +160,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#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. +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#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. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. From c65ac68002deb6a354f6e8d1efd8c2d90037bed8 Mon Sep 17 00:00:00 2001 From: Austin-Spriggs Date: Thu, 11 Jun 2026 15:58:13 -0500 Subject: [PATCH 2/4] docs: versioned Quickstart guides now mention condensed heders are iOS-only --- versioned_docs/version-v5/vue/quickstart.md | 2 +- versioned_docs/version-v6/react/quickstart.md | 2 +- versioned_docs/version-v6/vue/quickstart.md | 2 +- versioned_docs/version-v7/angular/quickstart.md | 2 +- versioned_docs/version-v7/react/quickstart.md | 2 +- versioned_docs/version-v7/vue/quickstart.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/versioned_docs/version-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.md index d67b4a2282f..5d8a4113ebb 100644 --- a/versioned_docs/version-v5/vue/quickstart.md +++ b/versioned_docs/version-v5/vue/quickstart.md @@ -290,7 +290,7 @@ For our styles, notice that we have specified our styles to be `scoped`. This me When creating your own pages, do not forget to have `IonPage` be the root component for them. Having `IonPage` be the root component is important because it helps ensure transitions work properly as well as provides the base CSS the Ionic Framework components rely on. ::: -`IonHeader` is a component meant to exist at the top of the page. It does not do much by itself, aside from handling some flexbox-based layout. It is meant to hold components, like `IonToolbar` or `IonSearchbar`. +`IonHeader` is a component meant to exist at the top of the page. It does not do much by itself, aside from handling some flexbox-based layout. It is meant to hold components, like `IonToolbar` or `IonSearchbar`. The second header shows a [collapsible large title](/docs/api/title.md#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. `IonContent` is, as its name suggests, the main content area for our page. It is responsible for providing a scrollable content that users will interact with, plus any scroll events that could be used in an app. diff --git a/versioned_docs/version-v6/react/quickstart.md b/versioned_docs/version-v6/react/quickstart.md index 220dc010585..3b7a9fd079f 100644 --- a/versioned_docs/version-v6/react/quickstart.md +++ b/versioned_docs/version-v6/react/quickstart.md @@ -156,7 +156,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](/docs/api/title.md#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. +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](/docs/api/title.md#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. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md index b1bb31141af..99673e7b5ef 100644 --- a/versioned_docs/version-v6/vue/quickstart.md +++ b/versioned_docs/version-v6/vue/quickstart.md @@ -160,7 +160,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#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. +This creates a page with a header and scrollable content area. TThe second header shows a [collapsible large title](/docs/api/title.md#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. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. diff --git a/versioned_docs/version-v7/angular/quickstart.md b/versioned_docs/version-v7/angular/quickstart.md index e2d7b1436f0..fa7bcf218bf 100644 --- a/versioned_docs/version-v7/angular/quickstart.md +++ b/versioned_docs/version-v7/angular/quickstart.md @@ -172,7 +172,7 @@ And the template, in the `home.page.html` file, uses those components: ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#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. +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#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. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. diff --git a/versioned_docs/version-v7/react/quickstart.md b/versioned_docs/version-v7/react/quickstart.md index 220dc010585..3b7a9fd079f 100644 --- a/versioned_docs/version-v7/react/quickstart.md +++ b/versioned_docs/version-v7/react/quickstart.md @@ -156,7 +156,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](/docs/api/title.md#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. +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](/docs/api/title.md#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. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. diff --git a/versioned_docs/version-v7/vue/quickstart.md b/versioned_docs/version-v7/vue/quickstart.md index b1bb31141af..97080b04e19 100644 --- a/versioned_docs/version-v7/vue/quickstart.md +++ b/versioned_docs/version-v7/vue/quickstart.md @@ -160,7 +160,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#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. +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#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. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. From fe2c0fb6cbf0961490790e18558b3163d9fe76e0 Mon Sep 17 00:00:00 2001 From: Austin-Spriggs Date: Sat, 13 Jun 2026 23:21:47 -0500 Subject: [PATCH 3/4] docs: reverted v5 changes --- versioned_docs/version-v5/vue/quickstart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.md index 5d8a4113ebb..d67b4a2282f 100644 --- a/versioned_docs/version-v5/vue/quickstart.md +++ b/versioned_docs/version-v5/vue/quickstart.md @@ -290,7 +290,7 @@ For our styles, notice that we have specified our styles to be `scoped`. This me When creating your own pages, do not forget to have `IonPage` be the root component for them. Having `IonPage` be the root component is important because it helps ensure transitions work properly as well as provides the base CSS the Ionic Framework components rely on. ::: -`IonHeader` is a component meant to exist at the top of the page. It does not do much by itself, aside from handling some flexbox-based layout. It is meant to hold components, like `IonToolbar` or `IonSearchbar`. The second header shows a [collapsible large title](/docs/api/title.md#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. +`IonHeader` is a component meant to exist at the top of the page. It does not do much by itself, aside from handling some flexbox-based layout. It is meant to hold components, like `IonToolbar` or `IonSearchbar`. `IonContent` is, as its name suggests, the main content area for our page. It is responsible for providing a scrollable content that users will interact with, plus any scroll events that could be used in an app. From e07561fefaecf00279dccce2fb3f3293020e66c4 Mon Sep 17 00:00:00 2001 From: Austin-Spriggs Date: Sat, 13 Jun 2026 23:24:58 -0500 Subject: [PATCH 4/4] docs: fixed missed typo --- versioned_docs/version-v6/vue/quickstart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md index 99673e7b5ef..97080b04e19 100644 --- a/versioned_docs/version-v6/vue/quickstart.md +++ b/versioned_docs/version-v6/vue/quickstart.md @@ -160,7 +160,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue ``` -This creates a page with a header and scrollable content area. TThe second header shows a [collapsible large title](/docs/api/title.md#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](/docs/api/title.md#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. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.