javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): add demos and docs

Browse Source
This commit is contained in:
mhartington
2018-01-11 17:01:19 -05:00
parent ab9498403c
commit 512a08f396
11 changed files with 219 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/core/src/components/chip-button/chip-button.tsx
View File

@ -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;

53
packages/core/src/components/chip-button/readme.md
View File

@ -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"`.
----------------------------------------------

6
packages/core/src/components/chip/chip.tsx
View File

@ -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';

12
packages/core/src/components/chip/readme.md
View File

@ -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"`.
----------------------------------------------

16
packages/core/src/components/content/content.tsx
View File

@ -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) {

35
packages/core/src/components/content/readme.md
View File

@ -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.
----------------------------------------------

1
packages/demos/angular/src/app/app-routing.module.ts
View File

@ -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' },

72
packages/demos/angular/src/app/content/content-page.component.ts Normal file
View File

@ -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;
}
}

14
packages/demos/angular/src/app/content/content-routing.module.ts Normal file
View File

@ -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 { }

15
packages/demos/angular/src/app/content/content.module.ts Normal file
View File

@ -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 { }

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

@ -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>