diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md index be12d1645ab..f7bef34201b 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. +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 b57c81e45ee..25acbd0062e 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, 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. @@ -353,7 +350,6 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto IonHeader, IonIcon, IonItem, - IonLabel, IonList, IonNote, IonPage,