Overlays 说明、补充 bootstrap react

pencil 26天前 29

一组组件,用于定位漂亮的覆盖图、工具提示、弹出窗口和其他任何您需要的内容。
概述
关于React Boostrap Overlay组件需要知道的事情。
覆盖依赖于第三方库Popper.js。它自动包含在React引导中,但是您应该参考API以获得更高级的用例。
<Tooltip>和<Popover>组件不会自行定位。而不是<Overlay>(或<OverlayTrigger>)组件,注入ref和style props。
工具提示需要<Overlay>组件注入特定的道具
禁用元素的工具提示必须在包装器元素上触发。
Overlay 覆盖
覆盖是定位和控制工具提示可见性的基本组件。它是一个围绕Popper.js的包装器,增加了对转换和可见性切换的支持
创建覆盖图
套印格式至少由两个元素组成,“套印格式”,即要定位的元素,以及“目标”,即套印格式所定位的元素。您也可以有一个“arrow”元素,比如工具提示和弹出窗口,但这是可选的。请务必查看Popper文档,以了解有关注入道具的更多详细信息。
OverlayTrigger 覆层起重工
因为上面的模式非常常见,但是很冗长,所以我们包含了<OverlayTrigger>组件来帮助处理常见用例。它甚至具有延迟显示或隐藏的功能,以及一些不同的“触发”事件,您可以混合和匹配。
请注意,触发组件必须能够接受ref,因为<OverlayTrigger>将尝试添加一个ref。可以对函数组件使用forwardRef()。
Customizing trigger behavior 自定义触发器行为
对于更高级的行为,<OverlayTrigger>接受一个子函数,该子函数传入与配置的触发器属性相对应的注入ref和事件处理程序。
你可以手动将道具应用到你想要的任何元素,或者将它们分开。下面的示例显示了如何将覆盖定位到与触发其可见性的元素不同的元素。
Tooltips 工具提示
一个工具提示组件,可以作为锚定标记标题属性的更时尚的替代。
示例
将鼠标悬停在下面的链接上以查看工具提示。
Popovers 烤松饼
一个popover组件,比如iOS中的那些。
Disabled elements 禁用的元
具有disabled属性的元素不是交互式的,这意味着用户不能悬停或单击它们来触发popover(或工具提示)。作为一种解决方法,您需要从包装器<div>或<span>触发覆盖,并覆盖禁用元素上的指针事件。
Changing containers更换容器
您可以指定一个容器来控制覆盖所附加到的DOM元素。这在样式与套印格式冲突时特别有用。
Updating position dynamically  动态更新位置
由于我们无法知道每次覆盖图更改大小时,要重新定位它,如果要更新覆盖图的位置以响应更改,则需要手动操作。
为此,Overlay组件还向popper prop注入scheduleUpdate()方法,Overlay组件可以使用该方法重新定位自身。
API
    Overlay
    OverlayTrigger
    Tooltip
    Popover
    PopoverContent
    PopoverTitle






















最新回复 (0)
返回
发新帖