javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +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.
----------------------------------------------