时间戳

首页 > 解决方案 > 有没有办法让 chakra ui MenuList 项目始终可见

javascript - 有没有办法让 chakra ui MenuList 项目始终可见

问题描述

我正在使用 Chakra UI 创建菜单。我有这样的事情：

<Menu>
    <MenuButton>hover over this</MenuButton>

    <MenuList>
        <Flex>To show/hide this</Flex> 
    </MenuList>
</Menu>

我正在尝试在悬停时动态打开标签。MenuList 默认是在用户单击时打开。当我单击按钮然后将鼠标悬停在它上面时，我的悬停状态有效。我正在尝试找出一种方法，以便用户不必单击 MenuButton 即可将鼠标悬停在其上工作。

标签： javascriptcssreactjsnext.jschakra-ui

解决方案

添加到 Bassem 的答案。我们可以将 onMouseEnter 和 onMouseLeave 添加到菜单列表中，这样当我们离开按钮时它就不会关闭。

import React from "react";
import {
  Flex,
  MenuItem,
  Menu,
  MenuButton,
  MenuList,
  Button,
  useDisclosure
} from "@chakra-ui/react";

export default function App() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <div className="App">
      <Flex height="100vh" align="center" justifyContent="center" bg="gray.100">
        <Menu isOpen={isOpen}>
          <MenuButton
            as={Button}
            variant="solid"
            colorScheme="teal"
            onMouseEnter={onOpen}
            onMouseLeave={onClose}
          >
            Hover Me
          </MenuButton>
          <MenuList onMouseEnter={onOpen} onMouseLeave={onClose}>
            <MenuItem>Download</MenuItem>
            <MenuItem>Create a Copy</MenuItem>
            <MenuItem>Mark as Draft</MenuItem>
            <MenuItem>Delete</MenuItem>
            <MenuItem>Attend a Workshop</MenuItem>
          </MenuList>
        </Menu>
      </Flex>
    </div>
  );
}

你可以在这里阅读更多https://www.coffeeclass.io/snippets/use-disclosure-menu-chakra-ui

推荐阅读