代码之家 › 专栏 › 技术社区 › Craig

使用三点跨度触发下拉

react-bootstrap reactjs css

Craig · 技术社区 · 5 年前

我正在使用reactbootstrap,并且有一个带有插入符号的按钮,可以触发下拉菜单。

但我需要使用垂直的3个点,而不是按钮样式。

我有一个span,它使用CSS类来表示三个点,但似乎找不到摆脱按钮和插入符号的方法。

我现在紧张的是:

<Dropdown>
    <Dropdown.Toggle>
      <span className="threedots"></span>
    </Dropdown.Toggle>
    <Dropdown.Menu size="sm" title=""> 
      <Dropdown.Header>Options</Dropdown.Header>
      <Dropdown.Item .... ></Dropdown.Item>
    </Dropdown.Menu>
 </Dropdown>

我只想看到三个点(我会添加鼠标悬停效果)。是否有方法将捕捉用作切换>

0 回复 | 直到 5 年前

Alex 5 年前

您可以通过传入自定义子组件来自定义下拉菜单。 Custom Dropdown Components

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <a
    href=""
    ref={ref}
    onClick={e => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {/* custom icon */}
    {children}

  </a>
));

然后作为自定义切换传递

<Dropdown >
    <Dropdown.Toggle as={CustomToggle}>
    </Dropdown.Toggle>
    <Dropdown.Menu size="sm" title=""> 
      <Dropdown.Header>Options</Dropdown.Header>
      <Dropdown.Item .... ></Dropdown.Item>
    </Dropdown.Menu>
 </Dropdown>

sample codesandbox ,希望有帮助