javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(): update usage and examples

Browse Source
This commit is contained in:
mhartington
2018-05-30 12:40:43 -04:00
parent 8e164d6036
commit 3cdc696847
43 changed files with 389 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
core/src/components/fab-button/fab-button.tsx
View File

@ -2,7 +2,6 @@ import { Component, Element, Prop } from '@stencil/core';
import { Color, CssClassMap, Mode } from '../../interface';
import { createThemedClasses, getElementClassMap } from '../../utils/theme';
@Component({
tag: 'ion-fab-button',
styleUrls: {
@ -11,22 +10,18 @@ import { createThemedClasses, getElementClassMap } from '../../utils/theme';
}
})
export class FabButton {
private inList = false;
@Element() el!: HTMLElement;
/**
* 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 button.
*/
@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;
@ -57,7 +52,7 @@ export class FabButton {
const parentNode = this.el.parentNode;
const parentTag = parentNode ? parentNode.nodeName : null;
this.inList = (parentTag === 'ION-FAB-LIST');
this.inList = parentTag === 'ION-FAB-LIST';
}
/**
@ -67,34 +62,38 @@ export class FabButton {
return {
'fab-button-in-list': this.inList,
[`fab-button-${this.mode}-in-list`]: this.inList,
[`fab-button-translucent-${this.mode}-in-list`]: (this.inList && this.translucent),
[`fab-button-translucent-${this.mode}-in-list`]:
this.inList && this.translucent,
'fab-button-close-active': this.activated,
'fab-button-show': this.show,
'fab-button-show': this.show
};
}
render() {
const themedClasses = createThemedClasses(this.mode, this.color, 'fab-button');
const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-button-translucent') : {};
const themedClasses = createThemedClasses(
this.mode,
this.color,
'fab-button'
);
const translucentClasses = this.translucent
? createThemedClasses(this.mode, this.color, 'fab-button-translucent')
: {};
const hostClasses = getElementClassMap(this.el.classList);
const TagType = this.href ? 'a' : 'button';
const fabClasses = {
...this.getFabClassMap(),
...themedClasses,
...translucentClasses,
...hostClasses,
...hostClasses
};
return (
<TagType
class={fabClasses}
disabled={this.disabled}
href={this.href}>
<ion-icon name="close" class="fab-button-close-icon"></ion-icon>
<TagType class={fabClasses} disabled={this.disabled} href={this.href}>
<ion-icon name="close" class="fab-button-close-icon" />
<span class="fab-button-inner">
<slot></slot>
<slot />
</span>
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
{this.mode === 'md' && <ion-ripple-effect tapClick={true} />}
</TagType>
);
}