From 512a08f396042e392c31d03ac2d554e863dc83d2 Mon Sep 17 00:00:00 2001 From: mhartington Date: Thu, 11 Jan 2018 17:01:19 -0500 Subject: [PATCH] chore(): add demos and docs --- .../components/chip-button/chip-button.tsx | 10 ++- .../core/src/components/chip-button/readme.md | 53 ++++++++++++++ packages/core/src/components/chip/chip.tsx | 6 +- packages/core/src/components/chip/readme.md | 12 ++++ .../core/src/components/content/content.tsx | 16 ++--- .../core/src/components/content/readme.md | 35 +++++++++ .../angular/src/app/app-routing.module.ts | 1 + .../src/app/content/content-page.component.ts | 72 +++++++++++++++++++ .../src/app/content/content-routing.module.ts | 14 ++++ .../angular/src/app/content/content.module.ts | 15 ++++ .../app/home-page/home-page.component.html | 3 + 11 files changed, 219 insertions(+), 18 deletions(-) create mode 100644 packages/demos/angular/src/app/content/content-page.component.ts create mode 100644 packages/demos/angular/src/app/content/content-routing.module.ts create mode 100644 packages/demos/angular/src/app/content/content.module.ts diff --git a/packages/core/src/components/chip-button/chip-button.tsx b/packages/core/src/components/chip-button/chip-button.tsx index 0880e8ee32..945425763b 100644 --- a/packages/core/src/components/chip-button/chip-button.tsx +++ b/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; diff --git a/packages/core/src/components/chip-button/readme.md b/packages/core/src/components/chip-button/readme.md index 9213ffe587..666374fed6 100644 --- a/packages/core/src/components/chip-button/readme.md +++ b/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 + + + Button Chip + + + + + + + + Icon Chip + + + + + + + + + + Avatar Chip + + + + +``` + @@ -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"`. + ---------------------------------------------- diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx index 3ddaaa86a9..c672232db5 100644 --- a/packages/core/src/components/chip/chip.tsx +++ b/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'; diff --git a/packages/core/src/components/chip/readme.md b/packages/core/src/components/chip/readme.md index 8334ece34e..86ba7de964 100644 --- a/packages/core/src/components/chip/readme.md +++ b/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"`. + ---------------------------------------------- diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx index ac5b731e34..91e0cb3646 100644 --- a/packages/core/src/components/content/content.tsx +++ b/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`. - * @returns {Promise} Returns a promise which is resolved when the scroll has completed. + * Duration of the scroll animation in milliseconds. Defaults to `300`. + * 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`. - * @returns {Promise} Returns a promise which is resolved when the scroll has completed. + * Duration of the scroll animation in milliseconds. Defaults to `300`. + * Returns a promise which is resolved when the scroll has completed. */ @Method() scrollToBottom(duration = 300) { diff --git a/packages/core/src/components/content/readme.md b/packages/core/src/components/content/readme.md index b5011519a5..dac76ace04 100644 --- a/packages/core/src/components/content/readme.md +++ b/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 + + Add your content here! + + +``` @@ -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. + ---------------------------------------------- diff --git a/packages/demos/angular/src/app/app-routing.module.ts b/packages/demos/angular/src/app/app-routing.module.ts index f3ecb76d6d..764c580b00 100644 --- a/packages/demos/angular/src/app/app-routing.module.ts +++ b/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' }, diff --git a/packages/demos/angular/src/app/content/content-page.component.ts b/packages/demos/angular/src/app/content/content-page.component.ts new file mode 100644 index 0000000000..27ed437d36 --- /dev/null +++ b/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: ` + + + + + Hidden Toolbar + + + Content - Basic + + + + +

+ Toggle content.fullscreen +

+ Toggle header + Toggle footer + Toggle 2nd toolbar +

+
+
+
+
+
+
+
+
+
+ + + + + + Footer + + + + + ` +}) +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; + } +} diff --git a/packages/demos/angular/src/app/content/content-routing.module.ts b/packages/demos/angular/src/app/content/content-routing.module.ts new file mode 100644 index 0000000000..50a9fd73ae --- /dev/null +++ b/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 { } diff --git a/packages/demos/angular/src/app/content/content.module.ts b/packages/demos/angular/src/app/content/content.module.ts new file mode 100644 index 0000000000..1ce1245c4d --- /dev/null +++ b/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 { } diff --git a/packages/demos/angular/src/app/home-page/home-page.component.html b/packages/demos/angular/src/app/home-page/home-page.component.html index db71ac1de4..cba2413841 100644 --- a/packages/demos/angular/src/app/home-page/home-page.component.html +++ b/packages/demos/angular/src/app/home-page/home-page.component.html @@ -18,6 +18,9 @@
  • Card Page
    • +
  • + Content Page +
  • Action Sheet Page