Maintain a persistent activated state on a FAB?

Is it possible to maintain an activated state for a Floating Action Button’s list of sub-buttons?

The behaviour appears to default to auto-hide all buttons when clicked. What I’m going for is a small collapsible tool menu, that the user can choose to hide or reveal.

I tried using a hook, but the activated state on the IonFab doesn’t seem to be respected after the first render.

import { IonContent, IonFab, IonFabButton, IonFabList, IonIcon, IonPage } from '@ionic/react';
import { circle, triangle, square } from 'ionicons/icons'
import { useState } from 'react';

const TestComponent = () => {

  const [open, setOpen] = useState(false);

  return (
    <IonPage>
      <IonContent>
        <IonFab horizontal='start' vertical='top' slot='fixed' activated={open}>
          <IonFabButton onClick={() => setOpen(!!open)}>
            <IonIcon icon={circle} />
          </IonFabButton>
          <IonFabList >
            <IonFabButton color='light' onClick={() => setOpen(true)}>
              <IonIcon icon={triangle} />
            </IonFabButton>
            <IonFabButton color='light' onClick={() => setOpen(true)}>
              <IonIcon icon={square} />
            </IonFabButton>
          </IonFabList>
        </IonFab>
      </IonContent>
    </IonPage>
  )
};

export default TestComponent;

1 post - 1 participant

Read full topic