在Ionic 7中，如何将汉堡菜单与其他组件一起嵌入到标题栏中？

dwthyt8l 于 11个月前发布在 Ionic

关注(0)|答案(1)|浏览(101)

我正在使用Ionic 7和React 18。我想为我的应用程序设计一个Ionic汉堡菜单，我想驻留在工具栏的右上角。我设计了这个Menu.tsx组件

const Menu: React.FC = () =>
{

  const onClickHandler = (): void =>
  {
    menuController.close();
  };

  return (
    <React.Fragment>
      <IonMenu
        side="start"
        menuId="first"
        content-id="menuContent"
        swipe-gesture={true}
        disabled={false}
        maxEdgeStart={100}
        hidden={false}
        type="overlay">
        <IonHeader translucent>
          <IonToolbar color="primary">
            <IonTitle>
              <IonIcon slot="start" icon={menuOutline}></IonIcon>
            </IonTitle>
            <IonButtons slot="start">
              <IonMenuButton
                autoHide={true}
                onClick={() => onClickHandler()}
              ></IonMenuButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonList>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
          </IonList>
        </IonContent>
      </IonMenu>
    </React.Fragment>
  );
};

export default Menu;

字符串
然后我把它放在我的App.tsx页面的IonHeader栏中

<IonHeader>
      <IonToolbar>
        <IonButtons slot='start'>
          <IonButton>
            <IonIcon icon={logoReact} />
          </IonButton>
        </IonButtons>
        <IonTitle>My site</IonTitle>
        <IonButtons slot='end'>
          <IonButton>
            <IonIcon icon={personCircle} />
          </IonButton>
        </IonButtons>
        <Menu/>
      </IonToolbar>
    </IonHeader>

型
然而，这并没有显示，根据我的演示-https://stackblitz.com/edit/an5yjh-vhnvgg?file=src%2Fcomponents%2FMenu.tsx,src%2FApp.tsx。我还需要做什么来让我的汉堡菜单出现？

ionic-framework

来源：https://stackoverflow.com/questions/77636348/in-ionic-7-how-do-i-embed-a-hamburger-menu-in-my-header-bar-alongside-other-com

1条答案

按热度按时间

jhkqcmku1#

你很接近了，但需要做一些调整才能让它工作：
1.添加<Menu/>元素作为<IonApp>元素的直接子元素。
1.在App.tsx中设置<IonContent>的id与menu元素中的id相同。因此，menuContent这将启用拖动行为以打开抽屉
额外奖励：我还在工具栏中添加了菜单按钮，这样用户也可以使用该按钮打开菜单。同时将IonPage元素作为根元素，这样布局就可以正常工作了！
Updated StackBlitz
Menu.tsx:

...
      <IonMenu
        side="start" // this puts the toolbar on the left side for ltr locales
        menuId="first"
        content-id="menuContent" // you should also use the same id in App.
        swipe-gesture={true}
        disabled={false}
        maxEdgeStart={100}
        hidden={false}
        type="overlay">
    ...

字符串
App.tsx

...
export default function App() {
  return (
    <IonApp>
      <Menu />
      <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton/>
          </IonButtons>
          <IonTitle>My site</IonTitle>
          <IonButtons slot="end">
            <IonButton>person</IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>
        <IonContent className="ion-padding" id="menuContent">
          <p>Hi there</p>
        </IonContent>
      </IonPage>
    </IonApp>
  );
}

型

赞(0）回复(0）举报 11个月前

我来回答

在Ionic 7中，如何将汉堡菜单与其他组件一起嵌入到标题栏中？

1条答案

相关问题

热门标签

最新问答