chore(): add demos and docs

packages/core/src/components/chip-button/chip-button.tsx

@@ -13,22 +13,20 @@ export class ChipButton {
   @Element() private el: HTMLElement;
 
   /**
-   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * Contains a URL or a URL fragment that the hyperlink points to.
    * If this property is set, an anchor tag will be rendered.
    */
   @Prop() href: string;
 
   /**
-   * @input {string} The color to use from your Sass `$colors` map.
+   * The color to use.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color: string;
 
   /**
-   * @input {string} The mode determines which platform styles to use.
+   * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode: 'ios' | 'md';
 
@@ -38,7 +36,7 @@ export class ChipButton {
   @Prop() fill: string;
 
   /**
-   * @input {boolean} If true, sets the button into a disabled state.
+   * If true, sets the button into a disabled state.
    */
   @Prop() disabled = false;
 

packages/core/src/components/chip-button/readme.md

@@ -1,6 +1,37 @@
 # ion-chip-button
 
 
+A chip-button is an inset button that is placed inside of a chip.
+
+
+```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>
+```
+
 
 <!-- Auto Generated Below -->
 
@@ -11,11 +42,16 @@
 
 string
 
+The color to use.
+Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+
 
 #### disabled
 
 boolean
 
+If true, sets the button into a disabled state.
+
 
 #### fill
 
@@ -28,11 +64,17 @@ Set to `"clear"` for a transparent button style.
 
 string
 
+Contains a URL or a URL fragment that the hyperlink points to.
+If this property is set, an anchor tag will be rendered.
+
 
 #### mode
 
 any
 
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
 
 ## Attributes
 
@@ -40,11 +82,16 @@ any
 
 string
 
+The color to use.
+Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+
 
 #### disabled
 
 boolean
 
+If true, sets the button into a disabled state.
+
 
 #### fill
 
@@ -57,11 +104,17 @@ Set to `"clear"` for a transparent button style.
 
 string
 
+Contains a URL or a URL fragment that the hyperlink points to.
+If this property is set, an anchor tag will be rendered.
+
 
 #### mode
 
 any
 
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
 
 
 ----------------------------------------------

packages/core/src/components/chip/chip.tsx

@@ -13,16 +13,14 @@ import { Component, Prop } from '@stencil/core';
 })
 export class Chip {
   /**
-   * @input {string} The color to use from your Sass `$colors` map.
+   * The color to use.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color: string;
 
   /**
-   * @input {string} The mode determines which platform styles to use.
+   * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode: 'ios' | 'md';
 

packages/core/src/components/chip/readme.md

@@ -62,11 +62,17 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 
 string
 
+The color to use.
+Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+
 
 #### mode
 
 any
 
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
 
 ## Attributes
 
@@ -74,11 +80,17 @@ any
 
 string
 
+The color to use.
+Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+
 
 #### mode
 
 any
 
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
 
 
 ----------------------------------------------

packages/core/src/components/content/content.tsx

@@ -26,22 +26,22 @@ export class Content {
   @Prop({ context: 'dom' }) dom: DomController;
 
   /**
-   * @output {ScrollEvent} Emitted when the scrolling first starts.
+   * Emitted when the scrolling first starts.
    */
   @Prop() ionScrollStart: Function;
 
   /**
-   * @output {ScrollEvent} Emitted on every scroll event.
+   * Emitted on every scroll event.
    */
   @Prop() ionScroll: Function;
 
   /**
-   * @output {ScrollEvent} Emitted when scrolling ends.
+   * Emitted when scrolling ends.
    */
   @Prop() ionScrollEnd: Function;
 
   /**
-   * @input {boolean} If true, the content will scroll behind the headers
+   * If true, the content will scroll behind the headers
    * and footers. This effect can easily be seen by setting the toolbar
    * to transparent.
    */
@@ -77,8 +77,8 @@ export class Content {
   /**
    * Scroll to the top of the content component.
    *
-   * @param {number} [duration]  Duration of the scroll animation in milliseconds. Defaults to `300`.
+   * Duration of the scroll animation in milliseconds. Defaults to `300`.
-   * @returns {Promise} Returns a promise which is resolved when the scroll has completed.
+   * Returns a promise which is resolved when the scroll has completed.
    */
   @Method()
   scrollToTop(duration = 300) {
@@ -88,8 +88,8 @@ export class Content {
   /**
    * Scroll to the bottom of the content component.
    *
-   * @param {number} [duration]  Duration of the scroll animation in milliseconds. Defaults to `300`.
+   * Duration of the scroll animation in milliseconds. Defaults to `300`.
-   * @returns {Promise} Returns a promise which is resolved when the scroll has completed.
+   * Returns a promise which is resolved when the scroll has completed.
    */
   @Method()
   scrollToBottom(duration = 300) {

packages/core/src/components/content/readme.md

@@ -1,6 +1,15 @@
 # ion-content
 
+Content component provides an easy to use content area with some useful methods
+to control the scrollable area. There should only be one content in a single
+view component.
 
+```html
+<ion-content>
+  Add your content here!
+</ion-content>
+
+```
 
 <!-- Auto Generated Below -->
 
@@ -11,21 +20,31 @@
 
 boolean
 
+If true, the content will scroll behind the headers
+and footers. This effect can easily be seen by setting the toolbar
+to transparent.
+
 
 #### ionScroll
 
 any
 
+Emitted on every scroll event.
+
 
 #### ionScrollEnd
 
 any
 
+Emitted when scrolling ends.
+
 
 #### ionScrollStart
 
 any
 
+Emitted when the scrolling first starts.
+
 
 ## Attributes
 
@@ -33,21 +52,31 @@ any
 
 boolean
 
+If true, the content will scroll behind the headers
+and footers. This effect can easily be seen by setting the toolbar
+to transparent.
+
 
 #### ionScroll
 
 any
 
+Emitted on every scroll event.
+
 
 #### ionScrollEnd
 
 any
 
+Emitted when scrolling ends.
+
 
 #### ionScrollStart
 
 any
 
+Emitted when the scrolling first starts.
+
 
 ## Methods
 
@@ -58,11 +87,17 @@ any
 
 Scroll to the bottom of the content component.
 
+Duration of the scroll animation in milliseconds. Defaults to `300`.
+Returns a promise which is resolved when the scroll has completed.
+
 
 #### scrollToTop()
 
 Scroll to the top of the content component.
 
+Duration of the scroll animation in milliseconds. Defaults to `300`.
+Returns a promise which is resolved when the scroll has completed.
+
 
 
 ----------------------------------------------

packages/demos/angular/src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ const routes: Routes = [
   { path: 'actionSheet', loadChildren: 'app/action-sheet/action-sheet.module#ActionSheetModule' },
   { path: 'badge', loadChildren: 'app/badge/badge.module#BadgeModule' },
   { path: 'card', loadChildren: 'app/card/card.module#CardModule' },
+  { path: 'content', loadChildren: 'app/content/content.module#ContentModule' },
   { path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
   { path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' },
   { path: 'nav', loadChildren: 'app/nav/nav.module#NavModule' },

packages/demos/angular/src/app/content/content-page.component.ts

@@ -0,0 +1,72 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card-page',
+  styles: [
+    `
+      div.box {
+        display: block;
+        margin: 15px auto;
+        max-width: 150px;
+        height: 150px;
+        background: blue;
+      }
+
+      div.box:last-of-type {
+        background: yellow;
+      }
+    `
+  ],
+  template: `
+  <ion-app>
+  <ion-page class="show-page">
+  <ion-header #header>
+    <ion-toolbar style="display: none" #toolbar>
+      <ion-title>Hidden Toolbar</ion-title>
+    </ion-toolbar>
+    <ion-toolbar>
+      <ion-title>Content - Basic</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+    <ion-content padding style="text-align: center" #content>
+      <p>
+      <ion-button (click)="toggleFullscreen(content)">Toggle content.fullscreen</ion-button>
+      <p>
+        <ion-button (click)="toggleDisplay(header)" color="secondary">Toggle header</ion-button>
+        <ion-button (click)="toggleDisplay(footer)" color="secondary">Toggle footer</ion-button>
+        <ion-button (click)="toggleDisplay(toolbar)" color="secondary">Toggle 2nd toolbar</ion-button>
+      </p>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+    </ion-content>
+
+
+  <ion-footer #footer>
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</ion-page>
+</ion-app>
+  `
+})
+export class ContentPageComponent {
+  constructor() {}
+
+  toggleFullscreen(content) {
+    content.fullscreen = !content.fullscreen;
+    console.log('content.fullscren =', content.fullscreen);
+  }
+
+  toggleDisplay(el) {
+    el.style.display = !el.style.display ? 'none' : null;
+  }
+}

packages/demos/angular/src/app/content/content-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ContentPageComponent } from './content-page.component';
+
+const routes: Routes = [
+  { path: '', component: ContentPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ContentRoutingModule { }

packages/demos/angular/src/app/content/content.module.ts

@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ContentPageComponent } from './content-page.component';
+import { ContentRoutingModule } from './content-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ContentRoutingModule
+  ],
+  declarations: [ContentPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ContentModule { }

packages/demos/angular/src/app/home-page/home-page.component.html

@@ -18,6 +18,9 @@
   <li>
     <a href='card'>Card Page</a>
   </li>
+  <li>
+    <a href='content'>Content Page</a>
+  </li>
   <li>
     <a href='actionSheet'>Action Sheet Page</a>
   </li>