From 01d668afd017550dbf849591ae9e1b75ddcd929a Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 30 Jan 2024 13:54:22 -0600 Subject: [PATCH 1/3] docs(react, vue): update Quickstart page to use modern checkbox syntax --- docs/react/quickstart.md | 16 ++++++---------- docs/vue/quickstart.md | 18 +++++++----------- 2 files changed, 13 insertions(+), 21 deletions(-) diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md index be12d1645ab..e9dfcb40b7b 100644 --- a/docs/react/quickstart.md +++ b/docs/react/quickstart.md @@ -171,7 +171,7 @@ When creating your own pages, don't forget to have `IonPage` be the root compone Our current content is relatively simple but does not contain anything that could be used in a real app, so let's change that. :::note -For brevity, we're excluding repeating part of our component, like the function declaration or import statements for other components. +For brevity, we're excluding repeating parts of our component, like the function declaration or import statements for other components. ::: ```tsx @@ -180,11 +180,10 @@ For brevity, we're excluding repeating part of our component, like the function - - +

Create Idea

Run Idea by Brandy - + 5 Days @@ -198,20 +197,17 @@ Here in our `IonContent`, we're adding an `IonList` and a much more involved `Io ```tsx - - +

Create Idea

Run Idea by Brandy - + 5 Days ``` -Item is important as it clearly shows the mix of React concepts and Web Component concepts. The first clear example of a React concept is self-closing tags for React Components in `IonCheckbox`. This is just a simpler way of writing components that do not contain any child content. - -From the Web Components side, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a React API, but a web standards API. +Item is important as it clearly shows the mix of React concepts and Web Component concepts. From the Web Components side, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a React API, but a web standards API. Let's look at another component from Ionic, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we'll need three components: a FAB, a FAB Button, and an Icon. diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md index b57c81e45ee..0e9160db3b7 100644 --- a/docs/vue/quickstart.md +++ b/docs/vue/quickstart.md @@ -282,12 +282,11 @@ For brevity, we are excluding repeating parts of our component, like the functio - - +

Create Idea

Run Idea By Brandy - - 5 Days + + 5 Days @@ -301,7 +300,6 @@ For brevity, we are excluding repeating parts of our component, like the functio IonContent, IonHeader, IonItem, - IonLabel, IonList, IonNote, IonPage, @@ -315,16 +313,15 @@ Here in our `IonContent`, we are adding an `IonList` and a much more involved `I ```html - - +

Create Idea

Run Idea By Brandy - - 5 Days + + 5 Days ``` -Looking at our code, we have a special attribute called slot. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a Vue API, but a web standards API. Additionally, this is different from the slots API you may recall from Vue 2. +Looking at our code, we have a special attribute called slot. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a Vue API, but a web standards API. Additionally, this is different from the slots API you may recall from Vue 2. Let's look at another component from Ionic Framework, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we will need three components: a FAB, a FAB Button, and an Icon. @@ -353,7 +350,6 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto IonHeader, IonIcon, IonItem, - IonLabel, IonList, IonNote, IonPage, From eeed7748d37d2bc48465a33318a399fdd5aac600 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 1 Feb 2024 09:44:37 -0600 Subject: [PATCH 2/3] put more focus/detail on slots API --- docs/react/quickstart.md | 2 +- docs/vue/quickstart.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md index e9dfcb40b7b..be9b0192230 100644 --- a/docs/react/quickstart.md +++ b/docs/react/quickstart.md @@ -207,7 +207,7 @@ Here in our `IonContent`, we're adding an `IonList` and a much more involved `Io ``` -Item is important as it clearly shows the mix of React concepts and Web Component concepts. From the Web Components side, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a React API, but a web standards API. +Looking at our code, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a React API, but a web standards API, and it is used in many Ionic Framework components. (For more information on slots, see the MDN docs [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).) Let's look at another component from Ionic, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we'll need three components: a FAB, a FAB Button, and an Icon. diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md index 0e9160db3b7..879e0d84031 100644 --- a/docs/vue/quickstart.md +++ b/docs/vue/quickstart.md @@ -321,7 +321,7 @@ Here in our `IonContent`, we are adding an `IonList` and a much more involved `I ``` -Looking at our code, we have a special attribute called slot. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a Vue API, but a web standards API. Additionally, this is different from the slots API you may recall from Vue 2. +Looking at our code, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a Vue API, but a web standards API, and it is used across many Ionic Framework components. Additionally, this is different from the slots API you may recall from Vue 2. (For more information on slots, see the MDN docs [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).) Let's look at another component from Ionic Framework, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we will need three components: a FAB, a FAB Button, and an Icon. From 8744bd917dce6b109e21a25e0a21d8f4529bc4b2 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Mon, 5 Feb 2024 12:34:41 -0600 Subject: [PATCH 3/3] expand link target --- docs/react/quickstart.md | 2 +- docs/vue/quickstart.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md index be9b0192230..f7bef34201b 100644 --- a/docs/react/quickstart.md +++ b/docs/react/quickstart.md @@ -207,7 +207,7 @@ Here in our `IonContent`, we're adding an `IonList` and a much more involved `Io ``` -Looking at our code, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a React API, but a web standards API, and it is used in many Ionic Framework components. (For more information on slots, see the MDN docs [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).) +Looking at our code, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a React API, but a web standards API, and it is used in many Ionic Framework components. (For more information on slots, [see the MDN docs here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).) Let's look at another component from Ionic, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we'll need three components: a FAB, a FAB Button, and an Icon. diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md index 879e0d84031..25acbd0062e 100644 --- a/docs/vue/quickstart.md +++ b/docs/vue/quickstart.md @@ -321,7 +321,7 @@ Here in our `IonContent`, we are adding an `IonList` and a much more involved `I ``` -Looking at our code, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a Vue API, but a web standards API, and it is used across many Ionic Framework components. Additionally, this is different from the slots API you may recall from Vue 2. (For more information on slots, see the MDN docs [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).) +Looking at our code, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a Vue API, but a web standards API, and it is used across many Ionic Framework components. Additionally, this is different from the slots API you may recall from Vue 2. (For more information on slots, [see the MDN docs here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).) Let's look at another component from Ionic Framework, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we will need three components: a FAB, a FAB Button, and an Icon.