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

从语义用户界面反应下拉菜单中删除插入符号

semantic-ui-react semantic-ui reactjs

rimraf · 技术社区 · 7 年前

有人知道如何删除屏幕上的插入符号吗 <Menu><Dropdown>...

import React from 'react'
import { Dropdown, Menu } from 'semantic-ui-react'
import { Menu as MenuIcon } from 'react-feather'

// this automatically renders a right-hand caret on the menu
// I added my own icon 'MenuIcon' from the feather icon set 
// and i want to get rid of the caret
const Header = () => (
  <Menu vertical compact>
    <Dropdown item text={<MenuIcon/>}>
      <Dropdown.Menu>
        <Dropdown.Item>Electronics</Dropdown.Item>
        <Dropdown.Item>Automotive</Dropdown.Item>
        <Dropdown.Item>Home</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  </Menu>
)

export default Header

1 回复 | 直到 7 年前

Oleksandr Fediashov 7 年前

Dropdown 组件实现了 icon shorthand ,因此您可以使用以下内容:

 <Dropdown icon={null} /> // will render nothing
 <Dropdown icon='remove' /> // will render 'remove' icon
 <Dropdown icon={{ name: 'remove', onClick: () => console.log('iconClick') /> // will render 'remove' icon and add event hanlder
 <Dropdown icon={<Icon name='remove' />} /> // will render 'Icon' component

推荐文章