使用三点跨度触发 DropDown

Posted 2023-02-22

【中文标题】使用三点跨度触发 DropDown

【英文标题】：Use Three Dots span to trigger DropDown

【发布时间】：2020-05-24 04:36:02

【问题描述】：

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

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

我有一个跨度为三个点使用 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>

我只想看到三个点（我将添加鼠标悬停效果）。有没有办法使用快照作为切换>

【问题讨论】：

插入符号是生成的 ::after 伪元素。只需给 Dropdown 一个父类，然后给 display: none 伪元素。同样，覆盖按钮样式。

@Vishal - 听起来不错。但我不是 100% 确定如何做按钮部分。你能帮忙写伪代码吗？

【参考方案1】：

您可以通过传入自定义子组件来自定义 Dropdown。 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,希望对您有所帮助

【讨论】：

优秀的演示@Alex！如果其他人想知道如何摆脱悬停时的下划线，请将其添加到 css 文件中：.dropdown a:hover text-decoration-line: none;