mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 09:34:19 +08:00
fix(fab): fix fab activation
This commit is contained in:
Manu Mtz.-Almeida
@ -305,7 +305,7 @@ Buttons inside of an `<ion-fab>` container should now be written as an `<ion-fab
|
||||
**New Usage Example:**
|
||||
|
||||
```html
|
||||
<ion-fab vertical="top" horizontal="right" edge>
|
||||
<ion-fab vertical="top" horizontal="end" edge>
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
@ -334,8 +334,8 @@ The attributes to align the fab horizontally are now combined under the `horizon
|
||||
|
||||
| Old Property | New Property | Property Behavior |
|
||||
|--------------|----------------------|-------------------------------------------------------------------------|
|
||||
| left | `horizontal="left"` | Positions to the left of the viewport. |
|
||||
| right | `horizontal="right"` | Positions to the right of the viewport. |
|
||||
| left | Removed | |
|
||||
| right | Removed | |
|
||||
| center | `horizontal="center"`| Positions to the center of the viewport. |
|
||||
| start | `horizontal="start"` | Positions to the left of the viewport in LTR, and to the right in RTL. |
|
||||
| end | `horizontal="end"` | Positions to the right of the viewport in LTR, and to the left in RTL. |
|
||||
@ -360,7 +360,7 @@ _Note that `middle` has been changed to `center` for the vertical positioning._
|
||||
**New Usage Example:**
|
||||
|
||||
```html
|
||||
<ion-fab vertical="top" horizontal="right" edge>
|
||||
<ion-fab vertical="top" horizontal="end" edge>
|
||||
<!-- fab buttons and lists -->
|
||||
</ion-fab>
|
||||
|
||||
@ -387,7 +387,7 @@ The `<ion-fab>` container was previously placed inside of the fixed content by d
|
||||
**New Usage Example:**
|
||||
|
||||
```html
|
||||
<ion-fab vertical="top" horizontal="right" edge slot="fixed">
|
||||
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
|
||||
<!-- fab buttons and lists -->
|
||||
</ion-fab>
|
||||
<ion-content>
|
||||
|
||||
20
core/src/components.d.ts
vendored
20
core/src/components.d.ts
vendored
@ -1635,13 +1635,12 @@ declare global {
|
||||
/**
|
||||
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
|
||||
*/
|
||||
'href': string;
|
||||
'href': string | undefined;
|
||||
/**
|
||||
* 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).
|
||||
*/
|
||||
'mode': 'ios' | 'md';
|
||||
'show': boolean;
|
||||
'toggleActive': Function;
|
||||
/**
|
||||
* If true, the fab button will be translucent. Defaults to `false`.
|
||||
*/
|
||||
@ -1679,13 +1678,12 @@ declare global {
|
||||
/**
|
||||
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
|
||||
*/
|
||||
'href'?: string;
|
||||
'href'?: string | undefined;
|
||||
/**
|
||||
* 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).
|
||||
*/
|
||||
'mode'?: 'ios' | 'md';
|
||||
'show'?: boolean;
|
||||
'toggleActive'?: Function;
|
||||
/**
|
||||
* If true, the fab button will be translucent. Defaults to `false`.
|
||||
*/
|
||||
@ -1704,7 +1702,7 @@ declare global {
|
||||
/**
|
||||
* The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
|
||||
*/
|
||||
'side': 'left' | 'right' | 'top' | 'bottom';
|
||||
'side': 'start' | 'end' | 'top' | 'bottom';
|
||||
}
|
||||
var HTMLIonFabListElement: {
|
||||
prototype: HTMLIonFabListElement;
|
||||
@ -1730,7 +1728,7 @@ declare global {
|
||||
/**
|
||||
* The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
|
||||
*/
|
||||
'side'?: 'left' | 'right' | 'top' | 'bottom';
|
||||
'side'?: 'start' | 'end' | 'top' | 'bottom';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1738,6 +1736,7 @@ declare global {
|
||||
|
||||
declare global {
|
||||
interface HTMLIonFabElement extends HTMLStencilElement {
|
||||
'activated': boolean;
|
||||
/**
|
||||
* Close an active FAB list container
|
||||
*/
|
||||
@ -1747,9 +1746,9 @@ declare global {
|
||||
*/
|
||||
'edge': boolean;
|
||||
/**
|
||||
* Where to align the fab horizontally in the viewport. Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
|
||||
* Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`.
|
||||
*/
|
||||
'horizontal': 'left' | 'right' | 'center' | 'start' | 'end';
|
||||
'horizontal': 'start' | 'end' | 'center';
|
||||
/**
|
||||
* Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`.
|
||||
*/
|
||||
@ -1772,14 +1771,15 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonFabAttributes extends HTMLAttributes {
|
||||
'activated'?: boolean;
|
||||
/**
|
||||
* If true, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot.
|
||||
*/
|
||||
'edge'?: boolean;
|
||||
/**
|
||||
* Where to align the fab horizontally in the viewport. Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
|
||||
* Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`.
|
||||
*/
|
||||
'horizontal'?: 'left' | 'right' | 'center' | 'start' | 'end';
|
||||
'horizontal'?: 'start' | 'end' | 'center';
|
||||
/**
|
||||
* Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`.
|
||||
*/
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, Element, Prop, State } from '@stencil/core';
|
||||
import { Component, Element, Prop } from '@stencil/core';
|
||||
import { createThemedClasses, getElementClassMap } from '../../utils/theme';
|
||||
import { CssClassMap } from '../../index';
|
||||
|
||||
@ -11,12 +11,11 @@ import { CssClassMap } from '../../index';
|
||||
}
|
||||
})
|
||||
export class FabButton {
|
||||
|
||||
private inList = false;
|
||||
|
||||
@Element() private el: HTMLElement;
|
||||
|
||||
@State() private inContainer = false;
|
||||
|
||||
@State() private inList = false;
|
||||
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
@ -45,37 +44,26 @@ export class FabButton {
|
||||
* 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;
|
||||
@Prop() href: string | undefined;
|
||||
|
||||
/**
|
||||
* If true, the fab button will be translucent. Defaults to `false`.
|
||||
*/
|
||||
@Prop() translucent = false;
|
||||
|
||||
@Prop() toggleActive: Function;
|
||||
|
||||
@Prop() show = false;
|
||||
|
||||
|
||||
componentDidLoad() {
|
||||
componentWillLoad() {
|
||||
const parentNode = this.el.parentNode;
|
||||
const parentTag = parentNode ? parentNode.nodeName : null;
|
||||
|
||||
this.inList = (parentTag === 'ION-FAB-LIST');
|
||||
this.inContainer = (parentTag === 'ION-FAB');
|
||||
}
|
||||
|
||||
|
||||
clickedFab() {
|
||||
if (this.inContainer) {
|
||||
this.toggleActive();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the classes for fab buttons in lists
|
||||
*/
|
||||
getFabClassMap(): CssClassMap {
|
||||
private getFabClassMap(): CssClassMap {
|
||||
return {
|
||||
'fab-button-in-list': this.inList,
|
||||
[`fab-button-${this.mode}-in-list`]: this.inList,
|
||||
@ -89,10 +77,7 @@ export class FabButton {
|
||||
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,
|
||||
@ -104,8 +89,7 @@ export class FabButton {
|
||||
<TagType
|
||||
class={fabClasses}
|
||||
disabled={this.disabled}
|
||||
href={this.href}
|
||||
onClick={this.clickedFab.bind(this)}>
|
||||
href={this.href}>
|
||||
<ion-icon name='close' class='fab-button-close-icon'></ion-icon>
|
||||
<span class='fab-button-inner'>
|
||||
<slot></slot>
|
||||
|
||||
@ -83,11 +83,6 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
|
||||
boolean
|
||||
|
||||
|
||||
#### toggleActive
|
||||
|
||||
|
||||
|
||||
|
||||
#### translucent
|
||||
|
||||
boolean
|
||||
@ -142,11 +137,6 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
|
||||
boolean
|
||||
|
||||
|
||||
#### toggle-active
|
||||
|
||||
|
||||
|
||||
|
||||
#### translucent
|
||||
|
||||
boolean
|
||||
|
||||
@ -38,8 +38,8 @@ ion-fab-list {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.fab-list-side-left .fab-button-in-list,
|
||||
.fab-list-side-right .fab-button-in-list {
|
||||
.fab-list-side-start .fab-button-in-list,
|
||||
.fab-list-side-end .fab-button-in-list {
|
||||
@include margin(0, 8px);
|
||||
}
|
||||
|
||||
@ -50,14 +50,14 @@ ion-fab-list {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.fab-list-side-left {
|
||||
.fab-list-side-start {
|
||||
@include margin(0, $fab-size + $fab-list-margin);
|
||||
@include position-horizontal(null, 0);
|
||||
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.fab-list-side-right {
|
||||
.fab-list-side-end {
|
||||
@include margin(0, $fab-size + $fab-list-margin);
|
||||
@include position(null, null, null, 0);
|
||||
|
||||
|
||||
@ -15,20 +15,19 @@ export class FabList {
|
||||
|
||||
@Watch('activated')
|
||||
protected activatedChanged(activated: boolean) {
|
||||
const fabs = this.el.querySelectorAll('ion-fab-button');
|
||||
const fabs = Array.from(this.el.querySelectorAll('ion-fab-button'));
|
||||
|
||||
// if showing the fabs add a timeout, else show immediately
|
||||
const timeout = activated ? 30 : 0;
|
||||
for (let i = 0; i < fabs.length; i++) {
|
||||
const fab = fabs[i];
|
||||
fabs.forEach((fab, i) => {
|
||||
setTimeout(() => fab.show = activated, i * timeout);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
|
||||
*/
|
||||
@Prop() side: 'left' | 'right' | 'top' | 'bottom' = 'bottom';
|
||||
@Prop() side: 'start' | 'end' | 'top' | 'bottom' = 'bottom';
|
||||
|
||||
|
||||
hostData() {
|
||||
|
||||
@ -12,26 +12,6 @@ ion-fab {
|
||||
// FAB Horizontal Positioning
|
||||
// --------------------------------------------------
|
||||
|
||||
.fab-horizontal-left {
|
||||
// scss-lint:disable PropertySpelling
|
||||
@include multi-dir() {
|
||||
left: $fab-content-margin;
|
||||
|
||||
left: calc(#{$fab-content-margin} + constant(safe-area-inset-left));
|
||||
left: calc(#{$fab-content-margin} + env(safe-area-inset-left));
|
||||
}
|
||||
}
|
||||
|
||||
.fab-horizontal-right {
|
||||
// scss-lint:disable PropertySpelling
|
||||
@include multi-dir() {
|
||||
right: $fab-content-margin;
|
||||
|
||||
right: calc(#{$fab-content-margin} + constant(safe-area-inset-right));
|
||||
right: calc(#{$fab-content-margin} + env(safe-area-inset-right));
|
||||
}
|
||||
}
|
||||
|
||||
.fab-horizontal-center {
|
||||
@include position(null, null, null, 50%);
|
||||
@include margin-horizontal(-$fab-size / 2, null);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, Element, Method, Prop, State } from '@stencil/core';
|
||||
import { Component, Element, Listen, Method, Prop, Watch } from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -6,29 +6,52 @@ import { Component, Element, Method, Prop, State } from '@stencil/core';
|
||||
styleUrl: 'fab.scss'
|
||||
})
|
||||
export class Fab {
|
||||
@Element() private el: HTMLElement;
|
||||
|
||||
@State() activated = false;
|
||||
@Element() private el: HTMLElement;
|
||||
|
||||
/**
|
||||
* Where to align the fab horizontally in the viewport.
|
||||
* Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
|
||||
* Possible values are: `"center"`, `"start"`, `"end"`.
|
||||
*/
|
||||
@Prop() horizontal: 'left' | 'right' | 'center' | 'start' | 'end';
|
||||
@Prop() horizontal: 'start' | 'end' | 'center';
|
||||
|
||||
/**
|
||||
* Where to align the fab vertically in the viewport.
|
||||
* Possible values are: `"top"`, `"center"`, `"bottom"`.
|
||||
*/
|
||||
@Prop() vertical: 'top' | 'center' | 'bottom';
|
||||
@Prop() vertical: 'top' | 'bottom' | 'center';
|
||||
|
||||
/**
|
||||
* If true, the fab will display on the edge of the header if
|
||||
* `vertical` is `"top"`, and on the edge of the footer if
|
||||
* it is `"bottom"`. Should be used with a `fixed` slot.
|
||||
*/
|
||||
@Prop() edge: boolean;
|
||||
@Prop() edge = false;
|
||||
|
||||
@Prop({mutable: true}) activated = false;
|
||||
@Watch('activated')
|
||||
activatedChanged() {
|
||||
const activated = this.activated;
|
||||
const fab = this.el.querySelector('ion-fab-button');
|
||||
if (fab) {
|
||||
fab.activated = activated;
|
||||
}
|
||||
Array.from(this.el.querySelectorAll('ion-fab-list')).forEach(list => {
|
||||
list.activated = activated;
|
||||
});
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
this.activatedChanged();
|
||||
}
|
||||
|
||||
@Listen('click')
|
||||
onClick() {
|
||||
const hasList = !!this.el.querySelector('ion-fab-list');
|
||||
if (hasList) {
|
||||
this.activated = !this.activated;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close an active FAB list container
|
||||
@ -38,35 +61,14 @@ export class Fab {
|
||||
this.activated = false;
|
||||
}
|
||||
|
||||
toggleActive = () => {
|
||||
this.activated = !this.activated;
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
[`fab-horizontal-${this.horizontal}`]: this.horizontal,
|
||||
[`fab-vertical-${this.vertical}`]: this.vertical,
|
||||
[`fab-horizontal-${this.horizontal}`]: !!this.horizontal,
|
||||
[`fab-vertical-${this.vertical}`]: !!this.vertical,
|
||||
['fab-edge']: this.edge
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const fab = this.el.querySelector('ion-fab-button');
|
||||
if (fab) {
|
||||
fab.toggleActive = this.toggleActive;
|
||||
fab.activated = this.activated;
|
||||
}
|
||||
|
||||
const lists = this.el.querySelectorAll('ion-fab-list');
|
||||
for (let i = 0, length = lists.length; i < length; i += 1) {
|
||||
lists[i].activated = this.activated;
|
||||
}
|
||||
|
||||
return (
|
||||
<slot></slot>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -100,6 +100,11 @@ The fab should have one main fab button. Fabs can also contain fab lists which c
|
||||
|
||||
## Properties
|
||||
|
||||
#### activated
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### edge
|
||||
|
||||
boolean
|
||||
@ -114,7 +119,7 @@ it is `"bottom"`. Should be used with a `fixed` slot.
|
||||
string
|
||||
|
||||
Where to align the fab horizontally in the viewport.
|
||||
Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
|
||||
Possible values are: `"center"`, `"start"`, `"end"`.
|
||||
|
||||
|
||||
#### vertical
|
||||
@ -127,6 +132,11 @@ Possible values are: `"top"`, `"center"`, `"bottom"`.
|
||||
|
||||
## Attributes
|
||||
|
||||
#### activated
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### edge
|
||||
|
||||
boolean
|
||||
@ -141,7 +151,7 @@ it is `"bottom"`. Should be used with a `fixed` slot.
|
||||
string
|
||||
|
||||
Where to align the fab horizontally in the viewport.
|
||||
Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
|
||||
Possible values are: `"center"`, `"start"`, `"end"`.
|
||||
|
||||
|
||||
#### vertical
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<ion-button>Test</ion-button>
|
||||
<ion-fab-button>FAB</ion-fab-button>
|
||||
|
||||
<ion-fab vertical="top" horizontal="right" edge id="fab1" slot="fixed">
|
||||
<ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list>
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -33,7 +33,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="right" edge id="fab2" slot="fixed">
|
||||
<ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="start">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -43,7 +43,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
|
||||
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -53,7 +53,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="left" id="fab4" slot="fixed">
|
||||
<ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -79,7 +79,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab horizontal="right" vertical="center" slot="fixed">
|
||||
<ion-fab horizontal="end" vertical="center" slot="fixed">
|
||||
<ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
@ -115,26 +115,11 @@
|
||||
function clickMainFAB(container) {
|
||||
let message = 'Clicked open social menu';
|
||||
insertLog(message);
|
||||
|
||||
toggleLists(container);
|
||||
}
|
||||
|
||||
function openSocial(network, container) {
|
||||
let message = 'Share in ' + network;
|
||||
insertLog(message);
|
||||
|
||||
toggleLists(container);
|
||||
}
|
||||
|
||||
function toggleLists(container) {
|
||||
var fabButton = document.getElementById(container).querySelector('ion-fab-button');
|
||||
var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');
|
||||
|
||||
fabButton.activated = !fabButton.activated;
|
||||
|
||||
for (var i = 0; i < fabLists.length; i++) {
|
||||
fabLists[i].activated = !fabLists[i].activated;
|
||||
}
|
||||
}
|
||||
|
||||
function closeLists() {
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<ion-button>Test</ion-button>
|
||||
<ion-fab-button>FAB</ion-fab-button>
|
||||
|
||||
<ion-fab vertical="top" horizontal="right" edge id="fab1" slot="fixed">
|
||||
<ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list>
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -33,7 +33,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="right" edge id="fab2" slot="fixed">
|
||||
<ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="start">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -43,7 +43,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
|
||||
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -53,7 +53,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="left" id="fab4" slot="fixed">
|
||||
<ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -79,7 +79,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab horizontal="right" vertical="center" slot="fixed">
|
||||
<ion-fab horizontal="end" vertical="center" slot="fixed">
|
||||
<ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<f></f>
|
||||
<ion-fab-button>FAB</ion-fab-button>
|
||||
|
||||
<ion-fab vertical="top" horizontal="right" id="fab1" slot="fixed">
|
||||
<ion-fab vertical="top" horizontal="end" id="fab1" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list>
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -23,7 +23,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="right" id="fab2" slot="fixed">
|
||||
<ion-fab vertical="bottom" horizontal="end" id="fab2" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="start">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -33,7 +33,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
|
||||
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -43,7 +43,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="left" id="fab4" slot="fixed">
|
||||
<ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
|
||||
<ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -69,7 +69,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab horizontal="right" vertical="center" slot="fixed">
|
||||
<ion-fab horizontal="end" vertical="center" slot="fixed">
|
||||
<ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<pre id="log" style="right:10px; bottom:50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);" slot="fixed">log</pre>
|
||||
<ion-button>Test</ion-button>
|
||||
|
||||
<ion-fab vertical="top" horizontal="right" edge id="fab1" slot="fixed">
|
||||
<ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list>
|
||||
<ion-fab-button translucent onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -42,7 +42,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="right" edge id="fab2" slot="fixed">
|
||||
<ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="start">
|
||||
<ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -52,7 +52,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
|
||||
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -62,7 +62,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="left" id="fab4" slot="fixed">
|
||||
<ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
|
||||
<ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button translucent onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
@ -88,7 +88,7 @@
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab horizontal="right" vertical="center" slot="fixed">
|
||||
<ion-fab horizontal="end" vertical="center" slot="fixed">
|
||||
<ion-fab-button translucent color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
|
||||
Reference in New Issue
Block a user