时间戳

首页 > 解决方案 > 基于移动设备上点击位置的下拉列表弹出 CSS

css - 基于移动设备上点击位置的下拉列表弹出 CSS

问题描述

我是 React.js 的新手。我们使用 material-io CSS 框架来构建我们的应用程序。

我的任务是在下拉菜单中显示菜单项，该菜单项在移动设备上打开时根据菜单的位置打开到顶部或底部。

它类似于 Facebook 视频部分，当用户单击 (...) 图标时，它会根据图标的屏幕位置显示选项。

Facebook 顶部出现

Facebook底部出现] 2

Facebook 菜单底部出现

Facebook底部出现

标签： cssreactjsmaterial-uireact-material

解决方案

您可以使用 react-power-tooltip。用来：

  1. 从 Npm 安装 $ npm install react-power-tooltip --save

  2. 导入到项目 import Tooltip from 'react-power-tooltip'

  3. 将悬停状态和鼠标事件处理程序添加到封闭的目标组件

    class Test extends Component {
  state = {
    show: false
  }

  showTooltip = bool => {
    this.setState({ show: bool })
  }

  render() {
    return (
      {/* Target element position needs to be RELATIVE */}
      <div 
        style={{ position: 'relative' }}
        onMouseOver={() => this.showTooltip(true)} 
        onMouseLeave={() => this.showTooltip(false)}>

          {/* ADD TOOLTIP HERE */}

        </div>
    );
  }
}
export default Test;

  4. 在目标元素内添加工具提示

    {/* Add options/text via span elements */}
<Tooltip show={this.state.show}>
  <span>Some text</span>
</Tooltip>

欲了解更多信息： https ://justinrhodes1.github.io/react-power-tooltip/

推荐阅读