javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +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"`.
----------------------------------------------