Ionic-framework: FAB: re-use in component

Created on 3 Oct 2016 · 11Comments · Source: ionic-team/ionic-framework

Short description of the problem:

I'd like to use the same FAB on multiple (tab) pages. I create a component with the FAB in it and use that on all pages I want it to be on. The <ion-fab> is now wrapped in a component and not a direct child of <ion-content>. Because of this the FAB is not detected correctly and no <div class="fixed-content"> is created, making it a standard FAB instead of a fixed one.

Component template create-button:

<ion-fab bottom right #fab>
  <button ion-fab>
    <ion-icon name="add"></ion-icon>
  </button>
  <ion-fab-list side="top">
    <button ion-fab (click)="showCreateTopic(fab)">
      <ion-icon name="chatboxes"></ion-icon>
    </button>
    <button ion-fab (click)="showCreateEvent(fab)">
      <ion-icon name="calendar"></ion-icon>
    </button>
  </ion-fab-list>
</ion-fab>

Page template:

<ion-header>
  <ion-navbar>
    <ion-title>FAB in component</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <create-button>
  </create-button>
</ion-content>

Which Ionic Version?
2.0.0-rc.0

Plunker that shows an example of your issue

I can't find a RC.0 compatible plunkr.

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a

Source

Manduro

Most helpful comment

Sure, here is a simplified version of my implementation:

Custom FAB Component:

@Component({
  selector: 'custom-fab',
  template: `
    <ion-fab>
      <button ion-fab>...</button>
    </ion-fab>
  `,
  styles: [`
    :host { right: 15px; bottom: 15px; }
    :host ion-fab { position: static; }
  `]
})
export class CustomFabComponent {}

Included in a page with the [ion-fixed] attribute:

<ion-header>
  <ion-navbar>
    <ion-title>Custom FAB Component</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  (...)
  <custom-fab ion-fixed></custom-fab>
</ion-content>

Manduro on 2 Dec 2016

👍7 🎉2

All 11 comments

Hello, thanks for using Ionic! We actually do not recommend that the ion-fab component be wrapped in another custom component. Our ion-fab is already its own custom component and is not made to be a child component of another custom component besides ion-content. Sorry for any hassle this causes. Thanks!

jgw96 on 3 Oct 2016

I want to use the same FAB in most of my app's pages (which is a pretty common use case), so copying it all over is not an option.

Making us unable to use Ionic components in our own components is a huge limitation in my opinion and against the Angular 2 design principles.

Manduro on 3 Oct 2016

👍2

I've found a solution using the undocumented [ion-fixed] attribute. It would be great if this feature could be added to the documentation, as I had to find it looking through the source code.

Adding this attribute to my custom component containing the ion-fab places it in the <div class="fixed-content"> where <ion-fab> elements go as well. Then all you need to do is add some styles to the custom component: bottom: 0; right: 0; or anyway you'd like to have it positioned.

Manduro on 3 Oct 2016

@Manduro
I am running through the same issue. Could you please detail your solution ?

@jgw96
I totally agree with Manduro that duplicating the same fab menu between pages goes against DRY angular 2 principles. Is there any other workaround ? Anyway, thanks for the amazing job you are doing on Ionic !

chocopoule on 1 Dec 2016

Sure, here is a simplified version of my implementation:

Custom FAB Component:

@Component({
  selector: 'custom-fab',
  template: `
    <ion-fab>
      <button ion-fab>...</button>
    </ion-fab>
  `,
  styles: [`
    :host { right: 15px; bottom: 15px; }
    :host ion-fab { position: static; }
  `]
})
export class CustomFabComponent {}

Included in a page with the [ion-fixed] attribute:

<ion-header>
  <ion-navbar>
    <ion-title>Custom FAB Component</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  (...)
  <custom-fab ion-fixed></custom-fab>
</ion-content>

Manduro on 2 Dec 2016

👍7 🎉2

@Manduro Thx !

chocopoule on 9 Dec 2016

👎1

The problem is that ion-fab has to be a direct child of ion-content, so you can create a custom component contained by a ion-fab. The positionning of the fab is visible on your page markup, which is nice.

<ion-content>
  <!-- ... -->
  <ion-fab bottom left>
    <my-component></my-component>
  </ion-fab>
  <!-- ... -->
</ion-content>

Edit: it works, but i have an error message in the console
FAB container needs a main <button ion-fab>
Not the best solution, i'll try with a directive instead

gerard-pmh on 25 Apr 2017

What's the status on this issue? I'm missing the same feature (bug?) as @Manduro.

I think it's very much an anti pattern to not allow your custom components be wrapped in other components.

Sincerely Emil

yunderboy on 10 Jul 2017

@gerard-pmh I would really like to see how your "my-component" look! :-)

yunderboy on 11 Jul 2017

Hey everyone, please check out my comment here for more information!

brandyscarney on 21 Jul 2017

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.