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

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

10
core/src/components/fab-button/fab-button.scss
View File

@ -164,14 +164,14 @@
}
// FAB Mini
// FAB small (mini
// --------------------------------------------------
:host([mini]) {
@include margin(($fab-size - $fab-mini-size) / 2);
:host(.fab-button-small) {
@include margin(($fab-size - $fab-small-size) / 2);
width: #{$fab-mini-size};
height: #{$fab-mini-size};
width: #{$fab-small-size};
height: #{$fab-small-size};
}
// FAB Close Icon

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,
}
};
}

2
core/src/components/fab-button/fab-button.vars.scss
View File

@ -7,7 +7,7 @@
$fab-size: 56px !default;
/// @prop - Width and height of the mini FAB button
$fab-mini-size: 40px !default;
$fab-small-size: 40px !default;
/// @prop - Border radius of the FAB button
$fab-border-radius: 50% !default;

3
core/src/components/fab-button/readme.md
View File

@ -23,7 +23,7 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
<ion-fab-button>Default</ion-fab-button>
<!-- Mini -->
<ion-fab-button mini>Mini</ion-fab-button>
<ion-fab-button size="small">Mini</ion-fab-button>
<!-- Colors -->
<ion-fab-button color="primary">Primary</ion-fab-button>
@ -48,6 +48,7 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |

8
core/src/components/fab-button/test/standalone/index.html
View File

@ -15,13 +15,13 @@
<p>
<ion-fab-button>Default</ion-fab-button>
<ion-fab-button><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button mini>Mini</ion-fab-button>
<ion-fab-button mini><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button size="small">Mini</ion-fab-button>
<ion-fab-button size="small"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
<ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button mini class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button size="small" class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button class="fab-button-in-list activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button mini class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button size="small" class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
</p>
<h3>Colors</h3>

2
core/src/components/fab-button/usage/angular.md
View File

@ -10,7 +10,7 @@
<ion-fab-button>Default</ion-fab-button>
<!-- Mini -->
<ion-fab-button mini>Mini</ion-fab-button>
<ion-fab-button size="small">Mini</ion-fab-button>
<!-- Colors -->
<ion-fab-button color="primary">Primary</ion-fab-button>

2
core/src/components/fab-button/usage/javascript.md
View File

@ -10,7 +10,7 @@
<ion-fab-button>Default</ion-fab-button>
<!-- Mini -->
<ion-fab-button mini>Mini</ion-fab-button>
<ion-fab-button size="small">Mini</ion-fab-button>
<!-- Colors -->
<ion-fab-button color="primary">Primary</ion-fab-button>