Используйте три точки, чтобы вызвать DropDown - PullRequest
Новая
       5

Используйте три точки, чтобы вызвать DropDown

0 голосов
/ 08 февраля 2020

Я использую реагирование - bootstrap, и у меня есть кнопка с кареткой, которая вызывает раскрывающийся список.

enter image description here

Но мне нужно использовать вместо этого вертикальные 3 точки, а не в стиле кнопки.

У меня есть диапазон, который использует класс CSS для трех точек, но, похоже, не могу найти способ избавиться от кнопки и Caret.

Теперь у меня есть туго: 

<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>

Я просто хочу увидеть три точки (я добавлю эффект наведения мыши). Есть ли способ использовать оснастку в качестве переключателя>

1 Ответ

1 голос
/ 08 февраля 2020

Вы можете настроить Dropdown, передавая пользовательские подкомпоненты. Пользовательские выпадающие компоненты 

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>

примеры кодов и поле , надеюсь, будет полезным

...