如何定位 React-Bootstrap 弹出窗口

2020-05-08 08:00:00 · 飞浪

介绍 React-Bootstrap将UI元素（例如表单、输入、按钮、弹出窗口、工具提示等）作为React组件提供，以便可以轻松导入和使用它们，而无需编写任何外部JavaScript或J

介绍

React-Bootstrap 将 UI 元素（例如表单、输入、按钮、弹出窗口、工具提示等）作为 React 组件提供，以便可以轻松导入和使用它们，而无需编写任何外部 JavaScript 或 JQuery。在本指南中，您将学习如何使用 React-Bootstrap 库中的弹出窗口组件，并学习如何将其定位在页面上。

什么是 Popover？

在使用 UI 元素之前，了解其用例很重要，以确保在正确的位置使用它。弹出窗口是一种只持续很短时间以显示页面上内容的视图，通常在点击事件时触发。使用弹出窗口可增强内容在大屏幕上的视觉效果，并帮助您将大块内容划分为更具吸引力和可呈现的视图。

例如，在电子商务 Web 应用中计算库存商品的价格时，您可以使用弹出窗口显示附加税费或运费。在另一种情况下，您可以使用弹出窗口显示您的博客应用正在营销的新型吉他型号的详细信息。

弹出窗口与工具提示

在设计界面方面，弹出窗口和工具提示非常相似。它们都会在触发时显示特定元素的内容；但是，两者之间存在一些明显的差异，这些差异决定了它们的用例。

工具提示通常在您将鼠标悬停在元素上时触发，而弹出窗口则在单击时触发。此外，工具提示提供有关元素的简短而准确的信息，以帮助用户了解元素的内容。另一方面，弹出窗口则更为冗长，包含大量信息，例如标题和内容描述。这就是为什么工具提示通常位于图标上，而弹出窗口的使用则更加随意。

叠加层

为了使用弹出窗口和工具提示组件，您还需要了解什么是覆盖层以及如何使用它。覆盖层是位于弹出窗口顶部的组件，控制其位置和可见性。弹出窗口组件的过渡和切换由覆盖层组件处理。可以将其想象为确保弹出窗口正常运行的包装器。

设置弹出窗口

首先创建一个项目。确保您的机器上安装了Nodejs和npm（至少 8 版或更高版本），以及代码编辑器和 Web 浏览器（最好是 Chrome 或 Firefox）。

使用create-react-app创建一个新项目：

      npx create-react-app react-bootstrap-popover

安装 React Bootstrap

首先，你应该在项目中安装 bootstrap。为此，在根目录中，运行以下命令来安装 React Bootstrap 库。

      npm install react-bootstrap bootstrap

清理模板

为了简洁起见，我们将所有代码放在App.js中。从App.js中删除徽标、App.css 及其所有导入。清除应用程序组件内的入门模板。您的App.js应如下所示：

      import React from 'react';


function App() {
  return (
    <div className="App">
      <h2>Hello</h2>
    </div>
  );
}

export default App;
    

添加 Popover 组件

为了使常规 Bootstrap 样式正常工作，请导入顶部的 Bootstrap 样式。

      import 'bootstrap/dist/css/bootstrap.min.css';

这相当于将 Bootstrap CDN 添加到您的index.html文件中。现在从react-bootstrap导入三个东西：Popover、OverlayTrigger 和 Button 。

      import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
    

要在Popover组件内创建弹出窗口，请渲染Popover.Title组件以指示弹出窗口的标题，并渲染Popover.Content组件以指示其内容。将此弹出窗口存储在常量变量中，并将其输出到 JSX 模板中。

      ...
 const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content again
      </Popover.Content>
    </Popover>
  );
  ...
    

在叠加层内输出弹出窗口，并使用触发器属性设置叠加层监听的事件类型。放置属性定义弹出窗口的位置。

      ....
     return (
    <div className="App">
    <OverlayTrigger trigger="click" placement="right" overlay={popover}>
      <Button variant="success">Click to trigger popover</Button>
    </OverlayTrigger>
    </div>
  );
   ....
    

最后，你的App.js应该看起来像这样。

      import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';


function App() {
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content again
      </Popover.Content>
    </Popover>
  );
  
 
  return (
    <div className="App">
    <OverlayTrigger trigger="click" placement="right" overlay={popover}>
      <Button variant="success">Click to trigger popover</Button>
    </OverlayTrigger>
    </div>
  );
}

export default App;
    

测试 UI

要查看根目录内的 UI，请运行此代码。

      npm start

这将启动本地开发服务器（通常在端口 3000 上），当您单击按钮时，您可以看到弹出框按钮和弹出框本身。请记住设置弹出框按钮或其容器 div 的样式，使其显示在页面的中心。

现在弹出窗口和覆盖层已准备好，您可以定位弹出窗口。

使用 Placement 属性定位 Popover

由于覆盖组件处理弹出窗口组件的实用程序类，因此设置弹出窗口位置的一种方便方法是使用 placement prop。它已设置为right；因此弹出窗口位于按钮的右侧。您可以将其设置为四个位置中的任意一个：顶部、左侧、底部和下方。

将弹出窗口置于左侧

将左侧传入放置道具内，以将弹出窗口定位到左侧。

      ....
<OverlayTrigger trigger="click" placement="left" overlay={popover}>
      <Button variant="success">Click to trigger popover</Button>
    </OverlayTrigger>
   ....
    

将弹出窗口置于顶部

在placement prop中传入top，将弹出窗口定位在按钮的顶部

      ...
<OverlayTrigger trigger="click" placement="top" overlay={popover}>
      <Button variant="success">Click to trigger popover</Button>
    </OverlayTrigger>
 ...
    

将弹出窗口置于底部

在placement prop 中传入bottom，将弹出窗口定位在按钮的底部

      ...
<OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
      <Button variant="success">Click to trigger popover</Button>
    </OverlayTrigger>
...
    

使用自定义组件定位弹出窗口

为了获得精确的位置，您可以构建一个自定义的弹出窗口组件，计算其位置，然后将该位置传递给 placement prop。positionLeft和positionTop组件可用于将精确计算的位置传递给Overlay组件。

在根目录里面创建一个新组件CustomPopover，并添加以下代码：

      import React from 'react';
import Popover from 'react-bootstrap/Popover';
import 'bootstrap/dist/css/bootstrap.min.css';

const CustomPopover=({props})=> {
        const position=calculatePosition;
        const calculatePosition=()=>{
            //set position here
        }

      return (
        <Popover {...props} positionLeft={position}>
        {props.children }
      </Popover>
      )
    
  }

  export default CustomPopover;
    

您可以使用一个简单的函数来计算弹出窗口的精确位置。然后，您只需将此CustomPopover组件渲染为子组件，即可在Overlay组件中使用它。

如果您收到任何警告或错误，您可以通过更新package.json文件并运行命令npm i来使用本指南中使用的 react-bootstrap 的精确版本。

      ....
    "bootstrap": "^4.4.1",
    "react-bootstrap": "^1.0.1",
    ....
    

结论

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何定位 React-Bootstrap 弹出窗口

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

... const popover = ( <Popover id="popover-basic"> <Popover.Title as="h3">Popover title</Popover.Title> <Popover.Content> Popover content <strong>some strong content</strong> Normal content again </Popover.Content> </Popover> ); ...

.... return ( <div className="App"> <OverlayTrigger trigger="click" placement="right" overlay={popover}> <Button variant="success">Click to trigger popover</Button> </OverlayTrigger> </div> ); ....

import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import Popover from 'react-bootstrap/Popover'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import Button from 'react-bootstrap/Button'; function App() { const popover = ( <Popover id="popover-basic"> <Popover.Title as="h3">Popover title</Popover.Title> <Popover.Content> Popover content <strong>some strong content</strong> Normal content again </Popover.Content> </Popover> ); return ( <div className="App"> <OverlayTrigger trigger="click" placement="right" overlay={popover}> <Button variant="success">Click to trigger popover</Button> </OverlayTrigger> </div> ); } export default App;

import React from 'react'; import Popover from 'react-bootstrap/Popover'; import 'bootstrap/dist/css/bootstrap.min.css'; const CustomPopover=({props})=> { const position=calculatePosition; const calculatePosition=()=>{ //set position here } return ( <Popover {...props} positionLeft={position}> {props.children } </Popover> ) } export default CustomPopover;