From f64bf4a81c4443b739023ac960d1bd75571e5601 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 4 Feb 2016 12:49:43 -0500
Subject: [PATCH] docs(demos): add searchbar API demo

references driftyco/ionic-site#397
---
 demos/searchbar/index.ts                |  6 ++++
 demos/searchbar/main.html               | 41 +++++++++++++++++++++++++
 ionic/components/searchbar/searchbar.ts |  1 +
 3 files changed, 48 insertions(+)
 create mode 100644 demos/searchbar/index.ts
 create mode 100644 demos/searchbar/main.html

diff --git a/demos/searchbar/index.ts b/demos/searchbar/index.ts
new file mode 100644
index 0000000000..405e893db7
--- /dev/null
+++ b/demos/searchbar/index.ts
@@ -0,0 +1,6 @@
+import {App} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'main.html'
+})
+class ApiDemoApp {}
diff --git a/demos/searchbar/main.html b/demos/searchbar/main.html
new file mode 100644
index 0000000000..86af559a67
--- /dev/null
+++ b/demos/searchbar/main.html
@@ -0,0 +1,41 @@
+<ion-toolbar>
+  <ion-title>Searchbar</ion-title>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-searchbar placeholder="Default Toolbar"></ion-searchbar>
+</ion-toolbar>
+
+<ion-toolbar primary>
+  <ion-searchbar placeholder="Primary Toolbar"></ion-searchbar>
+</ion-toolbar>
+
+<ion-toolbar secondary>
+  <ion-searchbar placeholder="Secondary Toolbar"></ion-searchbar>
+</ion-toolbar>
+
+<ion-content class="searchbar-demo">
+  <p padding-left padding-right>Searchbars can be placed in a toolbar or anywhere in the content.</p>
+
+  <ion-searchbar placeholder="Default Searchbar"></ion-searchbar>
+  <hr>
+
+  <ion-searchbar placeholder="Primary Searchbar" primary></ion-searchbar>
+  <hr>
+
+  <ion-searchbar placeholder="Secondary Searchbar" secondary></ion-searchbar>
+  <hr>
+
+  <ion-searchbar placeholder="Danger Searchbar" danger></ion-searchbar>
+
+</ion-content>
+
+<ion-toolbar danger position="bottom">
+  <ion-searchbar placeholder="Danger Toolbar"></ion-searchbar>
+</ion-toolbar>
+
+<style>
+  .searchbar-demo hr {
+    background-color: transparent;
+  }
+</style>
diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index 6db1911909..7a218addd3 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -55,6 +55,7 @@ export class SearchbarInput {
  * @property {Any} [cancel] - Expression to evaluate when the cancel button is clicked
  * @property {Any} [clear] - Expression to evaluate when the clear input button is clicked
  *
+ * @demo /docs/v2/demos/searchbar/
  * @see {@link /docs/v2/components#searchbar Searchbar Component Docs}
  */
 @Component({