`
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index 011cc4a268..21c9d6c02f 100644
--- a/core/src/components/popover/readme.md
+++ b/core/src/components/popover/readme.md
@@ -14,6 +14,53 @@ To present a popover, call the `present` method on a popover instance. In order
+## Usage
+
+### Angular
+
+```typescript
+import { Component } from '@angular/core';
+import { PopoverController } from '@ionic/angular';
+import { PopoverComponent } from '../../component/popover/popover.component';
+
+@Component({
+ selector: 'popover-example',
+ templateUrl: 'popover-example.html',
+ styleUrls: ['./popover-example.css']
+})
+export class PopoverExample {
+ constructor(public popoverController: PopoverController) {}
+
+ async presentPopover(ev: any) {
+ const popover = await this.popoverController.create({
+ component: PopoverComponent,
+ event: ev,
+ translucent: true
+ });
+ return await popover.present();
+ }
+}
+```
+
+
+### Javascript
+
+```javascript
+async function presentPopover(ev) {
+ const popoverController = document.querySelector('ion-popover-controller');
+ await popoverController.componentOnReady();
+
+ const popover = await popoverController.create({
+ component: 'popover-example-page',
+ translucent: true
+ event: ev,
+ });
+ return await popover.present();
+}
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/radio-group/readme.md b/core/src/components/radio-group/readme.md
index cf2f4ce836..423d5aefe1 100644
--- a/core/src/components/radio-group/readme.md
+++ b/core/src/components/radio-group/readme.md
@@ -11,6 +11,47 @@ radio button within the same group.
+## Usage
+
+### Angular / javascript
+
+```html
+
+
+
+ Auto Manufacturers
+
+
+
+ Cord
+
+
+
+ Duesenberg
+
+
+
+ Hudson
+
+
+
+ Packard
+
+
+
+ Studebaker
+
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md
index b6738bf054..da71ca445b 100644
--- a/core/src/components/radio/readme.md
+++ b/core/src/components/radio/readme.md
@@ -10,6 +10,37 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid
+## Usage
+
+### Angular / javascript
+
+```html
+
+
+
+ Name
+
+
+
+ Biff
+
+
+
+ Griff
+
+
+
+ Buford
+
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md
index e587216223..afa19b6537 100644
--- a/core/src/components/range/readme.md
+++ b/core/src/components/range/readme.md
@@ -15,6 +15,75 @@ left or right of the range.
+## Usage
+
+### Angular
+
+```html
+
+
+
+
+
+
+ -200
+ 200
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+### Javascript
+
+```html
+
+
+
+
+
+
+ -200
+ 200
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md
index e648dc0859..b009bf4b66 100644
--- a/core/src/components/refresher/readme.md
+++ b/core/src/components/refresher/readme.md
@@ -13,6 +13,79 @@ refresher.
+## Usage
+
+### Angular
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'refresher-example',
+ templateUrl: 'refresher-example.html',
+ styleUrls: ['./refresher-example.css'],
+})
+export class RefresherExample {
+ constructor() {}
+
+ doRefresh(event) {
+ console.log('Begin async operation');
+
+ setTimeout(() => {
+ console.log('Async operation has ended');
+ event.target.complete();
+ }, 2000);
+ }
+}
+```
+
+
+### Javascript
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md
index 2e8ba5584f..f85cb52fe0 100644
--- a/core/src/components/reorder-group/readme.md
+++ b/core/src/components/reorder-group/readme.md
@@ -49,6 +49,126 @@ This utility is really handy when
+## Usage
+
+### Angular
+
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2 (default ion-reorder slot="start")
+
+
+
+
+
+ Item 3 (custom ion-reorder)
+
+
+
+
+
+
+
+ Item 4 (custom ion-reorder slot="start")
+
+
+
+
+
+
+
+
+ Item 5 (the whole item can be dragged)
+
+
+
+
+
+
+
+```
+
+
+### Javascript
+
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+ Item 2 (default ion-reorder slot="start")
+
+
+
+
+
+ Item 3 (custom ion-reorder)
+
+
+
+
+
+
+
+ Item 4 (custom ion-reorder slot="start")
+
+
+
+
+
+
+
+
+ Item 5 (the whole item can be dragged)
+
+
+
+
+
+
+
+```
+
+```javascript
+const reorderGroup = document.querySelector('ion-reorder-group');
+reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+ // finishing the reorder, true means ion-reorder-group with reorder the DOM
+ detail.complete(true);
+
+ // or:
+ // reorderGroup.complete(true)
+});
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md
index 5f734b56e1..1ef5e31ac1 100644
--- a/core/src/components/ripple-effect/readme.md
+++ b/core/src/components/ripple-effect/readme.md
@@ -6,6 +6,24 @@ The ripple effect component adds the [Material Design ink ripple interaction eff
+## Usage
+
+### Javascript
+
+```html
+
+
+
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/router/readme.md b/core/src/components/router/readme.md
index 298d6b1a91..920277f08c 100644
--- a/core/src/components/router/readme.md
+++ b/core/src/components/router/readme.md
@@ -18,6 +18,39 @@ If you're using Angular, please see [ion-router-outlet](../router-outlet) instea
+## Usage
+
+### Javascript
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index bd57f70d6b..ea8fa984f4 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -9,6 +9,77 @@ A Searchbar should be used instead of an input to search lists. A clear button i
+## Usage
+
+### Angular
+
+```html
+
+
+
+```
+
+
+### Javascript
+
+```html
+
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index 67894517e1..1d33348fb5 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -6,6 +6,316 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen
+## Usage
+
+### Angular
+
+```html
+
+
+
+ Friends
+
+
+ Enemies
+
+
+
+
+
+
+ Paid
+
+
+ Free
+
+
+ Top
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bookmarks
+
+
+ Reading List
+
+
+ Shared Links
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+```
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'segment-button-example',
+ templateUrl: 'segment-button-example.html',
+ styleUrls: ['./segment-button-example.css'],
+})
+export class SegmentButtonExample {
+ segmentButtonClicked(ev: any) {
+ console.log('Segment button clicked', ev);
+ }
+}
+```
+
+
+### Javascript
+
+```html
+
+
+
+ Friends
+
+
+ Enemies
+
+
+
+
+
+
+ Paid
+
+
+ Free
+
+
+ Top
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bookmarks
+
+
+ Reading List
+
+
+ Shared Links
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+```
+
+```javascript
+// Listen for ionClick on all segment buttons
+const segmentButtons = document.querySelectorAll('ion-segment-button')
+for (let i = 0; i < segmentButtons.length; i++) {
+ segmentButtons[i].addEventListener('ionSelect', (ev) => {
+ console.log('Segment button clicked', ev);
+ })
+}
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md
index 12292034cc..a5f80ba150 100644
--- a/core/src/components/segment/readme.md
+++ b/core/src/components/segment/readme.md
@@ -8,6 +8,204 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
+## Usage
+
+### Angular
+
+```html
+
+
+
+ Friends
+
+
+ Enemies
+
+
+
+
+
+
+ Sunny
+
+
+ Rainy
+
+
+
+
+
+
+ Dogs
+
+
+ Cats
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Standard
+
+
+ Hybrid
+
+
+ Satellite
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'segment-example',
+ templateUrl: 'segment-example.html',
+ styleUrls: ['./segment-example.css'],
+})
+export class SegmentExample {
+ segmentChanged(ev: any) {
+ console.log('Segment changed', ev);
+ }
+}
+```
+
+
+### Javascript
+
+```html
+
+
+
+ Friends
+
+
+ Enemies
+
+
+
+
+
+
+ Sunny
+
+
+ Rainy
+
+
+
+
+
+
+ Dogs
+
+
+ Cats
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Standard
+
+
+ Hybrid
+
+
+ Satellite
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```javascript
+// Listen for ionChange on all segments
+const segments = document.querySelectorAll('ion-segment')
+for (let i = 0; i < segments.length; i++) {
+ segments[i].addEventListener('ionChange', (ev) => {
+ console.log('Segment changed', ev);
+ })
+}
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
index 2fb458e2f8..21fc5ce7dc 100644
--- a/core/src/components/select/readme.md
+++ b/core/src/components/select/readme.md
@@ -39,6 +39,284 @@ Since select uses the alert, action sheet and popover interfaces, options can be
+## Usage
+
+### Angular
+
+## Single Selection
+
+```html
+
+ Single Selection
+
+
+ Gender
+
+ Female
+ Male
+
+
+
+
+ Hair Color
+
+ Brown
+ Blonde
+ Black
+ Red
+
+
+
+
+```
+
+## Multiple Selection
+
+```html
+
+ Multiple Selection
+
+
+ Toppings
+
+ Bacon
+ Black Olives
+ Extra Cheese
+ Green Peppers
+ Mushrooms
+ Onions
+ Pepperoni
+ Pineapple
+ Sausage
+ Spinach
+
+
+
+
+ Pets
+
+ Bird
+ Cat
+ Dog
+ Honey Badger
+
+
+
+```
+
+## Interface Options
+
+```html
+
+ Interface Options
+
+
+ Alert
+
+ Bacon
+ Black Olives
+ Extra Cheese
+ Green Peppers
+ Mushrooms
+ Onions
+ Pepperoni
+ Pineapple
+ Sausage
+ Spinach
+
+
+
+
+ Popover
+
+ Brown
+ Blonde
+ Black
+ Red
+
+
+
+
+ Action Sheet
+
+ Red
+ Purple
+ Yellow
+ Orange
+ Green
+
+
+
+
+```
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'select-example',
+ templateUrl: 'select-example.html',
+ styleUrls: ['./select-example.css'],
+})
+export class SelectExample {
+ customAlertOptions: any = {
+ header: 'Pizza Toppings',
+ subHeader: 'Select your toppings',
+ message: '$1.00 per topping',
+ translucent: true
+ };
+
+ customPopoverOptions: any = {
+ header: 'Hair Color',
+ subHeader: 'Select your hair color',
+ message: 'Only select your dominant hair color'
+ };
+
+ customActionSheetOptions: any = {
+ header: 'Colors',
+ subHeader: 'Select your favorite color'
+ };
+}
+```
+
+
+### Javascript
+
+## Single Selection
+
+```html
+
+ Single Selection
+
+
+ Gender
+
+ Female
+ Male
+
+
+
+
+ Hair Color
+
+ Brown
+ Blonde
+ Black
+ Red
+
+
+
+
+```
+
+## Multiple Selection
+
+```html
+
+ Multiple Selection
+
+
+ Toppings
+
+ Bacon
+ Black Olives
+ Extra Cheese
+ Green Peppers
+ Mushrooms
+ Onions
+ Pepperoni
+ Pineapple
+ Sausage
+ Spinach
+
+
+
+
+ Pets
+
+ Bird
+ Cat
+ Dog
+ Honey Badger
+
+
+
+```
+
+## Interface Options
+
+```html
+
+ Interface Options
+
+
+ Alert
+
+ Bacon
+ Black Olives
+ Extra Cheese
+ Green Peppers
+ Mushrooms
+ Onions
+ Pepperoni
+ Pineapple
+ Sausage
+ Spinach
+
+
+
+
+ Popover
+
+ Brown
+ Blonde
+ Black
+ Red
+
+
+
+
+ Action Sheet
+
+ Red
+ Purple
+ Yellow
+ Orange
+ Green
+
+
+
+
+```
+
+```javascript
+var customAlertSelect = document.getElementById('customAlertSelect');
+var customAlertOptions = {
+ header: 'Pizza Toppings',
+ subHeader: 'Select your toppings',
+ message: '$1.00 per topping',
+ translucent: true
+};
+customAlertSelect.interfaceOptions = customAlertOptions;
+
+var customPopoverSelect = document.getElementById('customPopoverSelect');
+var customPopoverOptions = {
+ header: 'Hair Color',
+ subHeader: 'Select your hair color',
+ message: 'Only select your dominant hair color'
+};
+customPopoverSelect.interfaceOptions = customPopoverOptions;
+
+var customActionSheetSelect = document.getElementById('customActionSheetSelect');
+var customActionSheetOptions = {
+ header: 'Colors',
+ subHeader: 'Select your favorite color'
+};
+customActionSheetSelect.interfaceOptions = customActionSheetOptions;
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/skeleton-text/readme.md b/core/src/components/skeleton-text/readme.md
index 007fbb1cf6..7debd73f65 100644
--- a/core/src/components/skeleton-text/readme.md
+++ b/core/src/components/skeleton-text/readme.md
@@ -6,6 +6,14 @@ Skeleton Text is a component for rendering placeholder content. The element will
+## Usage
+
+### Javascript
+
+
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md
index bb02ffde58..564621ada1 100644
--- a/core/src/components/slides/readme.md
+++ b/core/src/components/slides/readme.md
@@ -19,6 +19,66 @@ Licensed under MIT
+## Usage
+
+### Angular
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'slides-example',
+ template: `
+
+
+ Slide 1
+
+
+ Slide 2
+
+
+ Slide 3
+
+
+ `
+})
+export class SlideExample {
+ slideOpts = {
+ effect: 'flip'
+ };
+ constructor() {}
+}
+```
+
+
+### Javascript
+
+```html
+
+
+
+ Slide 1
+
+
+
+ Slide 2
+
+
+
+ Slide 3
+
+
+```
+
+```javascript
+var slides = document.querySelector('ion-slides');
+slides.options = {
+ effect: 'flip'
+}
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md
index d8459830d2..63e7e1a067 100644
--- a/core/src/components/spinner/readme.md
+++ b/core/src/components/spinner/readme.md
@@ -9,6 +9,38 @@ The default spinner to use is based on the platform. The default spinner for `io
+## Usage
+
+### Angular / javascript
+
+```html
+
+
+
+
+
+
+ Menu
+
+
+
+
+
+
+```
+
+
+### Javascript
+
+```html
+
+
+
+
+
+ Menu
+
+
+
+
+
+
+ Hello
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/tab-bar/readme.md b/core/src/components/tab-bar/readme.md
index 6f76c67124..72183fe844 100644
--- a/core/src/components/tab-bar/readme.md
+++ b/core/src/components/tab-bar/readme.md
@@ -6,6 +6,34 @@ The tab bar is a UI component that contains a set of [tab buttons](../tab-button
+## Usage
+
+### Angular / javascript
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index 4a327e8520..0ba3c5ede3 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -8,6 +8,56 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
+## Usage
+
+### Javascript
+
+```html
+
+
+
+
+ Schedule
+
+
+
+ Speakers
+
+
+
+ Map
+
+
+
+ About
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index 32298cd8f2..de0eecdb1b 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -87,6 +87,105 @@ Using tabs with Angular's router is fairly straight forward. The only additional
+## Usage
+
+### Angular
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Schedule
+ 6
+
+
+
+ Speakers
+
+
+
+ Map
+
+
+
+ About
+
+
+
+
+```
+
+
+### Javascript
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Schedule
+ 6
+
+
+
+ Speakers
+
+
+
+ Map
+
+
+
+ About
+
+
+
+
+```
+
+
+
## Events
| Event | Description | Detail |
diff --git a/core/src/components/text/readme.md b/core/src/components/text/readme.md
index d721cdfaff..028cf9c548 100644
--- a/core/src/components/text/readme.md
+++ b/core/src/components/text/readme.md
@@ -6,6 +6,42 @@ The text component is a simple component that can be used to style the text colo
+## Usage
+
+### Javascript
+
+```html
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+ H4: The quick brown fox jumps over the lazy dog
+
+
+
+ H5: The quick brown fox jumps over the lazy dog
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets was big dish of beef chow mein.
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md
index bab7a26f47..3659375621 100644
--- a/core/src/components/textarea/readme.md
+++ b/core/src/components/textarea/readme.md
@@ -11,6 +11,91 @@ The textarea component accepts the [native textarea attributes](https://develope
+## Usage
+
+### Angular
+
+```html
+
+
+
+
+
+
+ Description
+
+
+
+
+ Summary
+
+
+
+
+
+
+ Comment
+
+
+
+
+ Notes
+
+```
+
+
+### Javascript
+
+```html
+
+
+
+
+
+
+ Description
+
+
+
+
+ Summary
+
+
+
+
+
+
+ Comment
+
+
+
+
+ Notes
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/thumbnail/readme.md b/core/src/components/thumbnail/readme.md
index c170499bbe..b44e868e59 100644
--- a/core/src/components/thumbnail/readme.md
+++ b/core/src/components/thumbnail/readme.md
@@ -8,6 +8,25 @@ Thumbnails can be used by themselves or inside of any element. If placed inside
+## Usage
+
+### Javascript
+
+```html
+
+
+
+
+
+
+ Item Thumbnail
+
+```
+
+
+
## CSS Custom Properties
| Name | Description |
diff --git a/core/src/components/title/readme.md b/core/src/components/title/readme.md
index 34c9821810..dd554b1e84 100644
--- a/core/src/components/title/readme.md
+++ b/core/src/components/title/readme.md
@@ -7,6 +7,22 @@
+## Usage
+
+### Javascript
+
+```html
+
+
+
+ Settings
+
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md
index 6201a9de9f..9938acc328 100644
--- a/core/src/components/toast/readme.md
+++ b/core/src/components/toast/readme.md
@@ -18,6 +18,75 @@ The toast can be dismissed automatically after a specific amount of time by pass
+## Usage
+
+### Angular
+
+```typescript
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+ selector: 'toast-example',
+ templateUrl: 'toast-example.html',
+ styleUrls: ['./toast-example.css'],
+})
+export class ToastExample {
+
+ constructor(public toastController: ToastController) {}
+
+ async presentToast() {
+ const toast = await this.toastController.create({
+ message: 'Your settings have been saved.',
+ duration: 2000
+ });
+ toast.present();
+ }
+
+ async presentToastWithOptions() {
+ const toast = await this.toastController.create({
+ message: 'Click to Close',
+ showCloseButton: true,
+ position: 'top',
+ closeButtonText: 'Done'
+ });
+ toast.present();
+ }
+
+}
+```
+
+
+### Javascript
+
+```javascript
+async function presentToast() {
+ const toastController = document.querySelector('ion-toast-controller');
+ await toastController.componentOnReady();
+
+ const toast = await toastController.create({
+ message: 'Your settings have been saved.',
+ duration: 2000
+ });
+ return await toast.present();
+}
+
+async function presentToastWithOptions() {
+ const toastController = document.querySelector('ion-toast-controller');
+ await toastController.componentOnReady();
+
+ const toast = await toastController.create({
+ message: 'Click to Close',
+ showCloseButton: true,
+ position: 'top',
+ closeButtonText: 'Done'
+ });
+ return await toast.present();
+}
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md
index 3f5466d5ce..c21a20aff9 100644
--- a/core/src/components/toggle/readme.md
+++ b/core/src/components/toggle/readme.md
@@ -7,6 +7,87 @@ Toggles change the state of a single option. Toggles can be switched on or off b
+## Usage
+
+### Angular
+
+```html
+
+
+
+ Pepperoni
+
+
+
+ Sausage
+
+
+
+ Mushrooms
+
+
+```
+
+
+### Javascript
+
+```html
+
+
+
+ Pepperoni
+
+
+
+ Sausage
+
+
+
+ Mushrooms
+
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md
index 6c1594e61b..1f9f75c8c2 100644
--- a/core/src/components/toolbar/readme.md
+++ b/core/src/components/toolbar/readme.md
@@ -24,6 +24,325 @@ In `md` mode, the `` will receive a box-shadow on the bottom, and th
+## Usage
+
+### Angular
+
+```html
+
+ Title Only
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Buttons
+
+
+
+
+
+
+
+ Solid Buttons
+
+
+ Help
+
+
+
+
+
+
+
+
+
+ Outline Buttons
+
+
+ Edit
+
+
+
+
+
+
+
+ Account
+
+
+
+
+ Edit
+
+
+ Text Only Buttons
+
+
+
+
+
+
+
+
+
+ Left side menu toggle
+
+
+
+
+
+
+
+ Right side menu toggle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Secondary Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dark Toolbar
+
+```
+
+
+### Javascript
+
+```html
+
+ Title Only
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Buttons
+
+
+
+
+
+
+
+ Solid Buttons
+
+
+ Help
+
+
+
+
+
+
+
+
+
+ Outline Buttons
+
+
+ Edit
+
+
+
+
+
+
+
+ Account
+
+
+
+
+ Edit
+
+
+ Text Only Buttons
+
+
+
+
+
+
+
+
+
+ Left side menu toggle
+
+
+
+
+
+
+
+ Right side menu toggle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Secondary Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dark Toolbar
+
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
diff --git a/core/src/components/virtual-scroll/readme.md b/core/src/components/virtual-scroll/readme.md
index 0b15cfd298..de12ee25dd 100644
--- a/core/src/components/virtual-scroll/readme.md
+++ b/core/src/components/virtual-scroll/readme.md
@@ -181,6 +181,77 @@ dataset, so please make sure they're performant.
+## Usage
+
+### Angular
+
+```html
+
+
+
+
+
+
+ {{ item.name }}
+
+ {{ item.content }}
+
+
+
+```
+
+```typescript
+export class VirtualScrollPageComponent {
+ items: any[] = [];
+
+ constructor() {
+ for (let i = 0; i < 1000; i++) {
+ this.items.push({
+ name: i + ' - ' + images[rotateImg],
+ imgSrc: getImgSrc(),
+ avatarSrc: getImgSrc(),
+ imgHeight: Math.floor(Math.random() * 50 + 150),
+ content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
+ });
+
+ rotateImg++;
+ if (rotateImg === images.length) {
+ rotateImg = 0;
+ }
+ }
+ }
+}
+
+const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+const images = [
+ 'bandit',
+ 'batmobile',
+ 'blues-brothers',
+ 'bueller',
+ 'delorean',
+ 'eleanor',
+ 'general-lee',
+ 'ghostbusters',
+ 'knight-rider',
+ 'mirth-mobile'
+];
+
+function getImgSrc() {
+ const src = 'https://dummyimage.com/600x400/${Math.round( Math.random() * 99999)}/fff.png';
+ rotateImg++;
+ if (rotateImg === images.length) {
+ rotateImg = 0;
+ }
+ return src;
+}
+
+let rotateImg = 0;
+```
+
+
+
## Properties
| Property | Attribute | Description | Type | Default |
+
+