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

fix(fab-button): adding size prop instead of [mini] (#16692)

Browse Source 
- Consistency with rest of API
- Auto docs
- Helps react

fixes #16680
This commit is contained in:
Manu MA
2018-12-14 23:16:20 +01:00
committed by GitHub
parent c2ada8445c
commit e8cec60faf
16 changed files with 484 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,6 +67,11 @@ export class FabButton implements ComponentInterface {
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
/**
* The size of the button. Set this to `small` in order to have a mini fab.
*/
@Prop() size?: 'small';
/**
* Emitted when the button has focus.
*/
@ -91,19 +96,21 @@ export class FabButton implements ComponentInterface {
}
hostData() {
const inList = hostContext('ion-fab-list', this.el);
const { el, disabled, color, activated, show, translucent, size, keyFocus } = this;
const inList = hostContext('ion-fab-list', el);
return {
'aria-disabled': this.disabled ? 'true' : null,
'aria-disabled': disabled ? 'true' : null,
class: {
...createColorClasses(this.color),
...createColorClasses(color),
'fab-button-in-list': inList,
'fab-button-translucent-in-list': inList && this.translucent,
'fab-button-close-active': this.activated,
'fab-button-show': this.show,
'fab-button-disabled': this.disabled,
'fab-button-translucent': this.translucent,
'fab-button-translucent-in-list': inList && translucent,
'fab-button-close-active': activated,
'fab-button-show': show,
'fab-button-disabled': disabled,
'fab-button-translucent': translucent,
'ion-activatable': true,
'focused': this.keyFocus,
'focused': keyFocus,
[`fab-button-${size}`]: size !== undefined,
}
};
}