Prevent ion-fab-list from closing when selecting element in it

ionic 4 fab-button example
ionic fab button transparent
ionic favorite button
ion-fab-button disabled
ion-fab button size
ionic circular button
ionic 4 fab button center
ionic footer fab

I'm trying to make a form pop up when a fab is clicked. I'm using ionic 4 but each time a fab or other component in the ion-fab-list is clicked. the ion-fab-list automatically closes. How can i click on an element and prevent it from closing

i have tried using @ViewChildbut it doesn't work. One thing i have noted about the @ViewChilddecorator is that it required two parameters which i have not seen other solution do.

form.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController, IonFab } from '@ionic/angular'

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],
})
export class FormComponent implements OnInit {
  isFabListOpen = false

  toggleFab(): void {
    this.isFabListOpen = !this.isFabListOpen
    console.log('lol')
  }

  constructor() {}

  ngOnInit() {}

}

form.component.scss

ion-fab {
  position: fixed;
  left: 84%;
  float: right;
}

ion-fab-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 350px;
  right: 130px;
}

form.component.html

<ion-fab horizontal="end" vertical="bottom" slot="fixed" [activated]="isFabListOpen">
  <ion-fab-button color="light" (click)="toggleFab()">
    <ion-icon name="arrow-dropleft"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top" [hidden]="isFabListOpen">
    <!-- <ion-fab-button color="light">
      <ion-icon name="logo-facebook"></ion-icon>
    </ion-fab-button>
    <ion-fab-button color="light">
      <ion-icon name="logo-twitter"></ion-icon>
    </ion-fab-button>
    <ion-fab-button color="light">
      <ion-icon name="logo-vimeo"></ion-icon>
    </ion-fab-button> -->
    <form action="">
      <ion-item>
        <ion-label>quote</ion-label>
        <ion-input type="text" placeholder="Awesome Input"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>author</ion-label>
        <ion-input type="text" placeholder="Awesome Input"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>author</ion-label>
        <ion-input type="text" placeholder="Awesome Input"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>day</ion-label>
        <ion-datetime displayFormat="DD MM YY" placeholder="Leave empty to select today"></ion-datetime>
      </ion-item>
      <ion-button>
        Save
      </ion-button>
    </form>
  </ion-fab-list>
</ion-fab>


The fab list should still remain even when clicking on the fabs or components but instead close when clicked.

You could reopen another fab immediately with the same data as soon as it is clicked. It will look like it never went away =D

How to not close Fab on click? - ionic, Anyone knows how to not close a fab group when a button is clicked? I would like to keep the fab open when I select the action buttons but only <ion-fab-list side​="end"> <ion-fab-button color="medium" onClick={() => this. If true, both the ion-fab-button and all ion-fab-list inside ion-fab will become active. That means ion-fab-button will become a close icon and ion-fab-list will become visible. Attribute

Remove toggleFab() from the button. ion-fab-button does the same thing. You don't need the function to trigger it to close or open. You actually don't even need to include the activated attribute unless you're using it somewhere else because it defaults to false. Here's what's happening under the hood:

  1. Hitting ion-fab-button changes isFabListOpen & activated to true
  2. Fab opens
  3. toggleFab() fires, this.isFabListOpen = !this.isFabListOpen
  4. isFabListOpen & activated is now false
  5. Modal is now closed

ion-fab, The same fab container can contain several fab-list elements with different side values. Usage. angular javascript react stencil vue. 6. so if we decide to close the project (WBS element) in middle of the month, we wont be able to close, but at the same time how do we prevent technician to re use the same WBS element to a different order? since sometimes technician keep using the WBS element that they are not supposed to.

I did it using JavaScript like this:

<ion-fab class="remote_controller" vertical="bottom" horizontal="center" slot="fixed">
  <ion-fab-button>
    <ion-icon name="game-controller"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top">
    <ion-fab-button id="up" onclick="stop_close(this)">
      <ion-icon name="caret-up"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="bottom">
    <ion-fab-button id="down" onclick="stop_close(this)">
      <ion-icon name="caret-down"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="start">
    <ion-fab-button id="left" onclick="stop_close(this)">
      <ion-icon name="caret-back"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="end">
    <ion-fab-button id="right" onclick="stop_close(this)">
      <ion-icon name="caret-forward"></ion-icon>
      </ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

and

<script>
  function stop_close(event){
    $('.remote_controller')[0].activated = false;

    //do stuff with the button
  }
</script>

FAB list feature: labels and backdrop options · Issue #8425 · ionic , Feature request It would be cool if the FAB list could support labels and an not to style Ionic's elements (namely div.button-effect which was causing the problem​). Color attribute no longer works in FAB list [RC3] #9373. Closed as the one preventing this solution from working in Android because I can  Closable List Items Click on the "x" symbol to the right of the list item to close/hide it.

FAB: re-use in component · Issue #8422 · ionic-team/ionic · GitHub, I create a component with the FAB in it and use that on all pages I want it to be on​. FAB: re-use in component #8422. Closed. Manduro opened this issue on Oct ion-fab> <ion-icon name="add"></ion-icon> </button> <ion-fab-list it in the <​div class="fixed-content"> where <ion-fab> elements go as well. The Select component is meant to be interchangeable with a native <select> element. If you are looking for more advanced features, like combobox, multiselect, autocomplete, async or creatable support, head to the Autocomplete component. It's meant to be an improved version of the "react-select" and "downshift" packages. Native Select

Ionic 3 basics, This is where we'll use the Ionic fab-list to include a set of additional floating action buttons The selectors to style the text color of the native text elements have been Keep in mind that i will not be using Angular material, i will just use CSS and How to Change Ionic 4 CSS Custom Properties, How to Close Ionic Toast,  Closing action begins when hydraulic fluid is pumped into the closing chamber of the spherical BOP below the piston. As the piston rises, it pushes the element up, and the elements spherical shape causes it to close in at the top as it moves upwards. The element seals around the drill string as the piston continue to rise.

Ionic 4 fab button with text, I built the share button with ion-fab so i can open two share buttons (share on in an ion-item (or ion-card) of an ion-list and manipulate each element without { console.log('fab closing'); this.hide = false; } else { console.log('fab opening'); So basically, if index is equal to the index of the selected row and hide is true, the​  The container for the list is a <select> element. The entire list is encased in the <select></select> pair. Give the select element an ID. You’ll use this ID to refer to the element in code. Add an option element to the select element. It helps to indent the options to remind yourself that they’re part of the select object.

Comments
  • Post your ts code that includes toggleFab()
  • I've included it