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

使用三点跨度触发下拉

react-bootstrap reactjs css

Craig · 技术社区 · 6 年前

我正在使用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 回复 | 直到 6 年前

Alex 6 年前

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

推荐文章

Bing Lan · 为什么我的react bootstrap列表组显示不同?

8 年前

boking · 使用onSubmit而不是onClick时,react await不等待

8 年前

ananai · ReactJS引导导航栏不在一行中

8 年前

Prajwal · react引导面包屑与react路由器dom

8 年前

Mike · 反应:为什么我包装JSX的DIV突然变得很窄,不允许我的布局扩展?

8 年前

Emixam23 · React路由器引导和导航栏重定向

8 年前

p_mcp · React引导选项卡上禁用的键盘事件

8 年前

amar ghodke · React 16 Hidden button Modal(隐藏按钮模式)在单击时无法打开

8 年前

NIrav Modi · React引导表是否提供带有清除按钮的标题TextFilter?

8 年前

Diego Unanue · 带有引导列的映射

8 年前