From 50dedd7931956fab04bb913d1e5b810d14ca03a0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Mon, 9 Jul 2018 16:18:22 -0400
Subject: [PATCH] docs(components): add usage examples for components missing
 them

---
 core/src/components/card/usage/angular.md     |  48 +++++
 .../components/chip-button/usage/angular.md   |  26 +++
 core/src/components/chip/usage/angular.md     |  48 +++++
 .../components/fab-button/usage/angular.md    |  23 +++
 core/src/components/fab-list/usage/angular.md |  16 ++
 core/src/components/fab/usage/angular.md      |  81 ++++++++
 core/src/components/grid/usage/angular.md     | 179 ++++++++++++++++++
 core/src/components/icon/usage/angular.md     |  18 ++
 core/src/components/icon/usage/javascript.md  |   2 +-
 .../components/item-divider/usage/angular.md  |  40 ++++
 .../components/item-group/usage/angular.md    | 103 ++++++++++
 core/src/components/reorder/usage/angular.md  |  88 +++++++++
 core/src/components/spinner/usage/angular.md  |  25 +++
 13 files changed, 696 insertions(+), 1 deletion(-)
 create mode 100644 core/src/components/card/usage/angular.md
 create mode 100644 core/src/components/chip-button/usage/angular.md
 create mode 100644 core/src/components/chip/usage/angular.md
 create mode 100644 core/src/components/fab-button/usage/angular.md
 create mode 100644 core/src/components/fab-list/usage/angular.md
 create mode 100644 core/src/components/fab/usage/angular.md
 create mode 100644 core/src/components/grid/usage/angular.md
 create mode 100644 core/src/components/icon/usage/angular.md
 create mode 100644 core/src/components/item-divider/usage/angular.md
 create mode 100644 core/src/components/item-group/usage/angular.md
 create mode 100644 core/src/components/reorder/usage/angular.md
 create mode 100644 core/src/components/spinner/usage/angular.md

diff --git a/core/src/components/card/usage/angular.md b/core/src/components/card/usage/angular.md
new file mode 100644
index 0000000000..094bfc7f87
--- /dev/null
+++ b/core/src/components/card/usage/angular.md
@@ -0,0 +1,48 @@
+```html
+<ion-card>
+  <ion-card-header>
+    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    <ion-card-title>Card Title</ion-card-title>
+  </ion-card-header>
+
+  <ion-card-content>
+    Keep close to Nature's heart... and break clear away, once in awhile,
+    and climb a mountain or spend a week in the woods. Wash your spirit clean.
+  </ion-card-content>
+</ion-card>
+
+<ion-card>
+  <ion-item>
+    <ion-icon name="pin" slot="start"></ion-icon>
+    <ion-label>ion-item in a card, icon left, button right</ion-label>
+    <ion-button fill="outline" slot="end">View</ion-button>
+  </ion-item>
+
+  <ion-card-content>
+    This is content, without any paragraph or header tags,
+    within an ion-card-content element.
+  </ion-card-content>
+</ion-card>
+
+<ion-card>
+  <ion-item href="#" class="activated">
+    <ion-icon name="wifi" slot="start"></ion-icon>
+    <ion-label>Card Link Item 1 .activated</ion-label>
+  </ion-item>
+
+  <ion-item href="#">
+    <ion-icon name="wine" slot="start"></ion-icon>
+    <ion-label>Card Link Item 2</ion-label>
+  </ion-item>
+
+  <ion-item class="activated">
+    <ion-icon name="warning" slot="start"></ion-icon>
+    <ion-label>Card Button Item 1 .activated</ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-icon name="walk" slot="start"></ion-icon>
+    <ion-label>Card Button Item 2</ion-label>
+  </ion-item>
+</ion-card>
+```
\ No newline at end of file
diff --git a/core/src/components/chip-button/usage/angular.md b/core/src/components/chip-button/usage/angular.md
new file mode 100644
index 0000000000..964ea06b3c
--- /dev/null
+++ b/core/src/components/chip-button/usage/angular.md
@@ -0,0 +1,26 @@
+```html
+<ion-chip>
+  <ion-label>Button Chip</ion-label>
+  <ion-chip-button fill="clear" color="light">
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin" color="primary"></ion-icon>
+  <ion-label>Icon Chip</ion-label>
+  <ion-chip-button>
+    <ion-icon name="close"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Avatar Chip</ion-label>
+  <ion-chip-button fill="clear" color="dark">
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+```
diff --git a/core/src/components/chip/usage/angular.md b/core/src/components/chip/usage/angular.md
new file mode 100644
index 0000000000..7eaabb19bd
--- /dev/null
+++ b/core/src/components/chip/usage/angular.md
@@ -0,0 +1,48 @@
+```html
+<ion-chip>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-label color="secondary">Secondary Label</ion-label>
+</ion-chip>
+
+<ion-chip color="secondary">
+  <ion-label color="dark">Secondary w/ Dark label</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin"></ion-icon>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="heart" color="dark"></ion-icon>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-label>Button Chip</ion-label>
+  <ion-chip-button fill="clear" color="light">
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin" color="primary"></ion-icon>
+  <ion-label>Icon Chip</ion-label>
+  <ion-chip-button>
+    <ion-icon name="close"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Avatar Chip</ion-label>
+  <ion-chip-button fill="clear" color="dark">
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+```
diff --git a/core/src/components/fab-button/usage/angular.md b/core/src/components/fab-button/usage/angular.md
new file mode 100644
index 0000000000..21aa6270f9
--- /dev/null
+++ b/core/src/components/fab-button/usage/angular.md
@@ -0,0 +1,23 @@
+```html
+<ion-content>
+
+  <!-- Fixed Floating Action Button that does not scroll with the content -->
+  <ion-fab>
+    <ion-fab-button>Button</ion-fab-button>
+  </ion-fab>
+
+  <!-- Default Floating Action Button that scrolls with the content.-->
+  <ion-fab-button>Default</ion-fab-button>
+
+  <!-- Mini -->
+  <ion-fab-button mini>Mini</ion-fab-button>
+
+  <!-- Colors -->
+  <ion-fab-button color="primary">Primary</ion-fab-button>
+  <ion-fab-button color="secondary">Secondary</ion-fab-button>
+  <ion-fab-button color="danger">Danger</ion-fab-button>
+  <ion-fab-button color="light">Light</ion-fab-button>
+  <ion-fab-button color="dark">Dark</ion-fab-button>
+
+</ion-content>
+```
diff --git a/core/src/components/fab-list/usage/angular.md b/core/src/components/fab-list/usage/angular.md
new file mode 100644
index 0000000000..feb7aafeac
--- /dev/null
+++ b/core/src/components/fab-list/usage/angular.md
@@ -0,0 +1,16 @@
+```html
+<ion-fab vertical="bottom" horizontal="end">
+  <ion-fab-button>Share</ion-fab-button>
+
+  <ion-fab-list side="top">
+    <ion-fab-button>Facebook</ion-fab-button>
+    <ion-fab-button>Twitter</ion-fab-button>
+    <ion-fab-button>Youtube</ion-fab-button>
+  </ion-fab-list>
+
+  <ion-fab-list side="start">
+    <ion-fab-button>Vimeo</ion-fab-button>
+  </ion-fab-list>
+
+</ion-fab>
+```
diff --git a/core/src/components/fab/usage/angular.md b/core/src/components/fab/usage/angular.md
new file mode 100644
index 0000000000..3645f979ea
--- /dev/null
+++ b/core/src/components/fab/usage/angular.md
@@ -0,0 +1,81 @@
+```html
+<ion-content>
+  <!-- fab placed to the top end -->
+  <ion-fab vertical="top" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="add"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+
+  <!-- fab placed to the bottom end -->
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="arrow-dropleft"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+
+  <!-- fab placed to the top start -->
+  <ion-fab vertical="top" horizontal="start" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="arrow-dropright"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+
+  <!-- fab placed to the bottom start -->
+  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="arrow-dropup"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+
+  <!-- fab placed to the (vertical) center and start -->
+  <ion-fab vertical="center" horizontal="start" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="share"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+
+  <!-- fab placed to the (vertical) center and end -->
+  <ion-fab vertical="center" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="add"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+
+  <!-- fab placed to the top and end and on the top edge of the content overlapping header -->
+  <ion-fab vertical="top" horizontal="end" edge slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="person"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+
+  <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
+  <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="settings"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="end">
+      <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <!-- fab placed in the center of the content with a list on each side -->
+  <ion-fab vertical="center" horizontal="center" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="share"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="top">
+      <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="bottom">
+      <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="start">
+      <ion-fab-button><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+    </ion-fab-list>
+    <ion-fab-list side="end">
+      <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+</ion-content>
+```
diff --git a/core/src/components/grid/usage/angular.md b/core/src/components/grid/usage/angular.md
new file mode 100644
index 0000000000..310eb8d938
--- /dev/null
+++ b/core/src/components/grid/usage/angular.md
@@ -0,0 +1,179 @@
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="6">
+      ion-col [size="6"]
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="3">
+      ion-col [size="3"]
+    </ion-col>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col size="3">
+      ion-col [size="3"]
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="3">
+      ion-col [size="3"]
+    </ion-col>
+    <ion-col size="3" offset="3">
+      ion-col [size="3"] [offset="3"]
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+      <br>#
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col align-self-start>
+      ion-col [start]
+    </ion-col>
+    <ion-col align-self-center>
+      ion-col [center]
+    </ion-col>
+    <ion-col align-self-end>
+      ion-col [end]
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+    </ion-col>
+  </ion-row>
+
+  <ion-row align-items-start>
+    <ion-col>
+      [start] ion-col
+    </ion-col>
+    <ion-col>
+      [start] ion-col
+    </ion-col>
+    <ion-col align-self-end>
+      [start] ion-col [end]
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+    </ion-col>
+  </ion-row>
+
+  <ion-row align-items-center>
+    <ion-col>
+      [center] ion-col
+    </ion-col>
+    <ion-col>
+      [center] ion-col
+    </ion-col>
+    <ion-col>
+      [center] ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+    </ion-col>
+  </ion-row>
+
+  <ion-row align-items-end>
+    <ion-col>
+      [end] ion-col
+    </ion-col>
+    <ion-col align-self-start>
+      [end] ion-col [start]
+    </ion-col>
+    <ion-col>
+      [end] ion-col
+    </ion-col>
+    <ion-col>
+      ion-col
+      <br>#
+      <br>#
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="12" size-sm>
+      ion-col [size="12"] [size-sm]
+    </ion-col>
+    <ion-col size="12" size-sm>
+      ion-col [size="12"] [size-sm]
+    </ion-col>
+    <ion-col size="12" size-sm>
+      ion-col [size="12"] [size-sm]
+    </ion-col>
+    <ion-col size="12" size-sm>
+      ion-col [size="12"] [size-sm]
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="12" size-md>
+      ion-col [size="12"] [size-md]
+    </ion-col>
+    <ion-col size="12" size-md>
+      ion-col [size="12"] [size-md]
+    </ion-col>
+    <ion-col size="12" size-md>
+      ion-col [size="12"] [size-md]
+    </ion-col>
+    <ion-col size="12" size-md>
+      ion-col [size="12"] [size-md]
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="6" size-lg offset="3">
+      ion-col [size="6"] [size-lg] [offset="3"]
+    </ion-col>
+    <ion-col size="3" size-lg>
+      ion-col [size="3"] [size-lg]
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
\ No newline at end of file
diff --git a/core/src/components/icon/usage/angular.md b/core/src/components/icon/usage/angular.md
new file mode 100644
index 0000000000..97d37c9b7c
--- /dev/null
+++ b/core/src/components/icon/usage/angular.md
@@ -0,0 +1,18 @@
+```html
+<!-- automatically uses the correct "star" icon depending on the mode -->
+<ion-icon name="star"></ion-icon>
+
+<!-- explicitly set the icon for each mode -->
+<ion-icon ios="ios-home" md="md-home"></ion-icon>
+
+<!-- always use the same icon, no matter what the mode is -->
+<ion-icon name="ios-clock"></ion-icon>
+<ion-icon name="logo-twitter"></ion-icon>
+
+<!-- use a custom svg icon -->
+<ion-icon src="/path/to/external/file.svg"></ion-icon>
+
+<!-- set the icon size -->
+<ion-icon size="small" name="heart"></ion-icon>
+<ion-icon size="large" name="heart"></ion-icon>
+```
diff --git a/core/src/components/icon/usage/javascript.md b/core/src/components/icon/usage/javascript.md
index 8737eafdfe..97d37c9b7c 100644
--- a/core/src/components/icon/usage/javascript.md
+++ b/core/src/components/icon/usage/javascript.md
@@ -2,7 +2,7 @@
 <!-- automatically uses the correct "star" icon depending on the mode -->
 <ion-icon name="star"></ion-icon>
 
-<!-- explicity set the icon for each mode -->
+<!-- explicitly set the icon for each mode -->
 <ion-icon ios="ios-home" md="md-home"></ion-icon>
 
 <!-- always use the same icon, no matter what the mode is -->
diff --git a/core/src/components/item-divider/usage/angular.md b/core/src/components/item-divider/usage/angular.md
new file mode 100644
index 0000000000..0f5d7326fe
--- /dev/null
+++ b/core/src/components/item-divider/usage/angular.md
@@ -0,0 +1,40 @@
+```html
+<ion-item-divider>
+  <ion-label>
+    Basic Item Divider
+  </ion-label>
+</ion-item-divider>
+
+<ion-item-divider color="secondary">
+  <ion-label>
+    Secondary Item Divider
+  </ion-label>
+</ion-item-divider>
+
+<!-- Item Dividers in a List -->
+<ion-list>
+  <ion-item-divider>
+    <ion-label>
+      Section A
+    </ion-label>
+  </ion-item-divider>
+
+  <ion-item><ion-label>A1</ion-label></ion-item>
+  <ion-item><ion-label>A2</ion-label></ion-item>
+  <ion-item><ion-label>A3</ion-label></ion-item>
+  <ion-item><ion-label>A4</ion-label></ion-item>
+  <ion-item><ion-label>A5</ion-label></ion-item>
+
+  <ion-item-divider>
+    <ion-label>
+      Section B
+    </ion-label>
+  </ion-item-divider>
+
+  <ion-item><ion-label>B1</ion-label></ion-item>
+  <ion-item><ion-label>B2</ion-label></ion-item>
+  <ion-item><ion-label>B3</ion-label></ion-item>
+  <ion-item><ion-label>B4</ion-label></ion-item>
+  <ion-item><ion-label>B5</ion-label></ion-item>
+</ion-list>
+```
diff --git a/core/src/components/item-group/usage/angular.md b/core/src/components/item-group/usage/angular.md
new file mode 100644
index 0000000000..48932bae80
--- /dev/null
+++ b/core/src/components/item-group/usage/angular.md
@@ -0,0 +1,103 @@
+```html
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>A</ion-label>
+  </ion-item-divider>
+
+  <ion-item>
+    <ion-label>Angola</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Argentina</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Armenia</ion-label>
+  </ion-item>
+</ion-item-group>
+
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>B</ion-label>
+  </ion-item-divider>
+
+  <ion-item>
+    <ion-label>Bangladesh</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Belarus</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>Belgium</ion-label>
+  </ion-item>
+</ion-item-group>
+
+
+<!-- They can also be used to group sliding items -->
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>
+      Fruits
+    </ion-label>
+  </ion-item-divider>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        <h3>Grapes</h3>
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        <h3>Apples</h3>
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-item-group>
+
+<ion-item-group>
+  <ion-item-divider>
+    <ion-label>
+      Vegetables
+    </ion-label>
+  </ion-item-divider>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        <h3>Carrots</h3>
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        <h3>Celery</h3>
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option>
+        Favorite
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</ion-item-group>
+```
diff --git a/core/src/components/reorder/usage/angular.md b/core/src/components/reorder/usage/angular.md
new file mode 100644
index 0000000000..be27939097
--- /dev/null
+++ b/core/src/components/reorder/usage/angular.md
@@ -0,0 +1,88 @@
+```html
+<ion-content>
+  <ion-list>
+    <ion-reorder-group>
+
+      <ion-item>
+        <ion-label>
+          Item 1
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 2
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 3 (default ion-reorder slot="start")
+        </ion-label>
+        <ion-reorder slot="start"></ion-reorder>
+      </ion-item>
+
+      <ion-item color="secondary">
+        <ion-label>
+          Item 4 (default ion-reorder slot="start")
+        </ion-label>
+        <ion-reorder slot="start"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 5 (custom ion-reorder)
+        </ion-label>
+        <ion-reorder slot="end">
+          <ion-icon name="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 6 (custom ion-reorder)
+        </ion-label>
+        <ion-reorder slot="end">
+          <ion-icon name="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 7 (custom ion-reorder slot="start")
+        </ion-label>
+        <ion-reorder slot="start">
+          <ion-icon name="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 8 (the whole item can be dragged)
+          </ion-label>
+          </ion-item>
+      </ion-reorder>
+
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 9 (the whole item can be dragged)
+          </ion-label>
+          </ion-item>
+      </ion-reorder>
+
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 10 (the whole item can be dragged)
+          </ion-label>
+          </ion-item>
+      </ion-reorder>
+
+    </ion-reorder-group>
+  </ion-list>
+</ion-content>
+```
diff --git a/core/src/components/spinner/usage/angular.md b/core/src/components/spinner/usage/angular.md
new file mode 100644
index 0000000000..058ba97b54
--- /dev/null
+++ b/core/src/components/spinner/usage/angular.md
@@ -0,0 +1,25 @@
+```html
+<!-- Default Spinner -->
+<ion-spinner></ion-spinner>
+
+<!-- Lines -->
+<ion-spinner name="lines"></ion-spinner>
+
+<!-- Lines Small -->
+<ion-spinner name="lines-small"></ion-spinner>
+
+<!-- Dots -->
+<ion-spinner name="dots"></ion-spinner>
+
+<!-- Bubbles -->
+<ion-spinner name="bubbles"></ion-spinner>
+
+<!-- Circles -->
+<ion-spinner name="circles"></ion-spinner>
+
+<!-- Crescent -->
+<ion-spinner name="crescent"></ion-spinner>
+
+<!-- Paused Default Spinner -->
+<ion-spinner paused></ion-spinner>
+```