Skip to content
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

Jump to bottom

docs(react, vue): update Quickstart page to use modern checkbox syntax #3415

Merged
merged 3 commits into from
Feb 5, 2024
Merged

docs(react, vue): update Quickstart page to use modern checkbox syntax #3415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01d668a
docs(react, vue): update Quickstart page to use modern checkbox syntax
Jan 30, 2024
eeed774
put more focus/detail on slots API
Feb 1, 2024
8744bd9
expand link target
Feb 5, 2024
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
16 changes: 6 additions & 10 deletions docs/react/quickstart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Long-standing typo.

:::

```tsx
Expand All @@ -180,11 +180,10 @@ For brevity, we're excluding repeating part of our component, like the function
<IonContent>
<IonList>
<IonItem>
<IonCheckbox slot="start" />
<IonLabel>
<IonCheckbox labelPlacement="end" justify="start">
<h1>Create Idea</h1>
<IonNote>Run Idea by Brandy</IonNote>
</IonLabel>
</IonCheckbox>
<IonBadge color="success" slot="end">
5 Days
</IonBadge>
Expand All @@ -198,20 +197,17 @@ Here in our `IonContent`, we're adding an `IonList` and a much more involved `Io

```tsx
<IonItem>
<IonCheckbox slot="start" />
<IonLabel>
<IonCheckbox labelPlacement="end" justify="start">
<h1>Create Idea</h1>
<IonNote>Run Idea by Brandy</IonNote>
</IonLabel>
</IonCheckbox>
<IonBadge color="success" slot="end">
5 Days
</IonBadge>
</IonItem>
```

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.

Expand Down
18 changes: 7 additions & 11 deletions docs/vue/quickstart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,12 +282,11 @@ For brevity, we are excluding repeating parts of our component, like the functio
<ion-content>
<ion-list>
<ion-item>
<ion-checkbox slot="start"></ion-checkbox>
<ion-label>
<ion-checkbox label-placement="end" justify="start">
<h1>Create Idea</h1>
<ion-note>Run Idea By Brandy</ion-note>
</ion-label>
<ion-badge color="success" slot="end"> 5 Days </ion-badge>
</ion-checkbox>
<ion-badge color="success" slot="end">5 Days</ion-badge>
</ion-item>
</ion-list>
</ion-content>
Expand All @@ -301,7 +300,6 @@ For brevity, we are excluding repeating parts of our component, like the functio
IonContent,
IonHeader,
IonItem,
IonLabel,
IonList,
IonNote,
IonPage,
Expand All @@ -315,16 +313,15 @@ Here in our `IonContent`, we are adding an `IonList` and a much more involved `I

```html
<ion-item>
<ion-checkbox slot="start"></ion-checkbox>
<ion-label>
<ion-checkbox label-placement="end" justify="start">
<h1>Create Idea</h1>
<ion-note>Run Idea By Brandy</ion-note>
</ion-label>
<ion-badge color="success" slot="end"> 5 Days </ion-badge>
</ion-checkbox>
<ion-badge color="success" slot="end">5 Days</ion-badge>
</ion-item>
```

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.

Expand Down Expand Up @@ -353,7 +350,6 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonNote,
IonPage,
Expand Down