docs(): update usage and examples

This commit is contained in:
mhartington
2018-05-30 16:51:54 -04:00
parent 62755f3824
commit 89a7d169e9
31 changed files with 693 additions and 444 deletions

View File

@ -1,7 +1,6 @@
import { Component, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
@Component({
tag: 'ion-item-option',
host: {
@ -14,16 +13,13 @@ import { Color, Mode } from '../../interface';
})
export class ItemOption {
/**
* The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
* The color to use for the option
*/
@Prop() color?: Color;
/**
* 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!: Mode;
@ -64,17 +60,17 @@ export class ItemOption {
class="item-option-button"
disabled={this.disabled}
href={this.href}
onClick={this.clickedOptionButton.bind(this)}>
onClick={this.clickedOptionButton.bind(this)}
>
<span class="item-option-button-inner">
<slot name="start"></slot>
<slot name="top"></slot>
<slot name="icon-only"></slot>
<slot></slot>
<slot name="bottom"></slot>
<slot name="end"></slot>
<slot name="start" />
<slot name="top" />
<slot name="icon-only" />
<slot />
<slot name="bottom" />
<slot name="end" />
</span>
</TagType>
);
}
}

View File

@ -1,10 +1,9 @@
# ion-item-option
The option button for an `ion-item-sliding`. Must be placed inside of an `<ion-item-options>`.
You can combine the `(ionSwipe)` event and the `expandable` directive to create a full swipe
You can combine the `ionSwipe` event and the `expandable` directive to create a full swipe
action for the item.
<!-- Auto Generated Below -->
@ -14,9 +13,7 @@ action for the item.
string
The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app).
The color to use for the option
#### disabled
@ -47,7 +44,6 @@ string
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).
## Attributes
@ -56,9 +52,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string
The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app).
The color to use for the option
#### disabled
@ -89,7 +83,6 @@ string
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).