反应定位门户
定位门户是一个低级反应组件,用于构建各种 完全定位的飞行器 被固定在景点的另一部分. 这可用于创建下拉,工具提示,上下文菜单等.
定位门户的构建尽可能不开放 这意味着它只创建微小的DOM 并且不依赖于特定样式的图书馆。 它只在出入口上使用一些内置样式来进行定位.
门户相对于其主机在DOM中的位置由下列定义: 定位战略。 。 。 . 默认定位策略应足以用于大量使用案例. 要么就把门户放在上面 (左或右对齐)到锚或下方,取决于当前取景口中可用的空间. 此默认策略完全适合构建例如自定义下拉.
还有可能覆盖定位战略. 工具提示的示例如下: 故事书。 。 。 .
见 故事书 需要更多的实例.
安装
$ npm install @codastic/react-positioning-portal react react-dom --save
使用量
基本用途 <PositioningPortal /> 州治在外边.
import { useState } from 'react';
import { PositioningPortal } from '@codastic/react-positioning-portal';
// ...
const [isPortalOpen, setIsPortalOpen] = useState(false);
<PositioningPortal
isOpen={isPortalOpen}
onOpen={() => setIsPortalOpen(true)}
onShouldClose={() => setIsPortalOpen(false)}
portalContent={
<div>
Portal content goes here.
<button type="button" onClick={() => setIsPortalOpen(false)}>
Close
</button>
</div>
}
>
<button type="button" onClick={() => setIsPortalOpen(true)}>
Open portal
</button>
</PositioningPortal>
基本用途 <PositioningPortalWithState /> 处理内部状态.
import { PositioningPortalWithState } from '@codastic/react-positioning-portal';
// ...
<PositioningPortalWithState
portalContent={
<div>
Portal content goes here.
</div>
}
>
{({ open}) => (
<button type="button" onClick={open}>
Open portal
</button>
)}
</PositioningPortalWithState>
特征
<PositioningPortal />
- 支持自定义定位策略.
- 在定位门外处理国家事务.
- 手接外出点击关闭门户.
- 处理下键关闭门户.
- 开关时的门户过渡.
- 定义门户的自定义根节点.
<PositioningPortalWithState />
这个组件几乎相当于 <PositioningPortal /> 除外
页:1 isOpen 状态已经由组件本身处理。 所以,如果你不必控制这个州外
可以比较容易使用 <PositioningPortalWithState /> 让它自己处理国家.
API 参考
<PositioningPortal />
-
children: React.ReactNode数字 :定位门户组件将门户的锚点要素作为儿童。 内容
width传递到portalContent渲染道具参数relatedWidth。 。 。 . -
portalElement?: React.ReactElement: (默认值 :<div />(中文(简体) )这个
portalElement覆盖portalContent在渲染时portalContent定位门户附件 样式position, (中文(简体) ),width, (中文(简体) ),left, (中文(简体) ),top财务报告和审定财务报表visibility页:1portalElement通过定义自己的风格portalElement你可以覆盖这些风格。 例如,如果您喜欢为门户设置固定位置,您可以 执行下列:<PositioningPortal portalElement={<div style={{ position: 'fixed' }} />} > // ... -
portalContent: React.ReactNode | ((params: PortalContentRenderProps<Strategy>) => React.ReactNode);数字 :门户开放时提供实际内容.
portalContent可以是任何反应节点或函数 返回反应节点。 该功能获得以下道具:interface PortalContentRenderProps<Strategy> { close: () => void; // Basically calls the handler passed to onShouldClose isOpen: boolean; isPositioned: boolean; // Becomes true after the portalContent is positioned and visible strategy: Strategy; // Whatever the positionStrategy returns relatedWidth: number; // The width of the PositioningPortal children transitionStarted: () => void; // Signals that there is a transition transitionEnded: () => void; // Should be called when the portal can safely be removed from the DOM } -
onOpen: () => void数字 :将在门户内容定位和可见后调用.
-
onClose?: () => void门户关上后召回.
-
onShouldClose?: () => void数字 :如果
PortalContentRenderProps.close在门户内容之外点击( 如果有的话)closeOnOutsideClick是真实的)或closeOnKeyDown返回真实. -
closeOnOutsideClick?: boolean: (默认值 :true(中文(简体) )如果设置为
true, (中文(简体) ),onShouldClose通过在门户内容外点击来拨打. -
closeOnKeyDown?: (event: KeyboardEvent) => boolean: (默认值 :event => event.keyCode === 27,关闭 ESC)函数,将调用
keydown。如果返回的话true,处理器传递给onShouldClose将召入. -
isOpen?: boolean数字 :设置要打开或关闭的定位门户.
-
positionStrategy?: PositioningStrategy<Strategy>数字 :设置自定义定位战略。 详见"定位战略"部分.
-
rootNode?: HTMLElement数字 :为要添加的门户通过自定义根节点 .
<PositioningPortalWithState />
扩展属性 <PositioningPortal /> 并添加/更改起伏属性:
-
children: React.ReactNode | ((params: RenderProps) => React.ReactNode)数字 :由于状态是在组成部分内处理的,因此有可能通过渲染功能使儿童得到以下渲染道具:
interface RenderProps { close: () => void; open: () => void; isOpen: boolean; }
定位 战略
定位策略是接收母锚元素矩形的函数 parentRect 相对于取景口(以 getBoundingClientRect()(中文(简体) )
和传送门的矩形。 在第一个渲染阶段,在调用定位战略之前,门户是隐形的.
战略职能部门应返回门户的位置(top 财务报告和审定财务报表 left) (中文(简体) ). 我可以选择返回其他任意数据(strategy),可用于自定义传送门的渲染.
例如,定义工具提示箭头的取向.
const positionStrategy (
parentRect,
portalRect
props
) => {
// Compute where the portal should be positioned...
return {
top,
left,
strategy
};
};
这就是定位策略的类型定义:
export type PositioningStrategy<Strategy> = (
parentRect: ClientRect,
portalRect: ClientRect,
props: Props<Strategy>
) => {
top: number;
left: number;
strategy: Strategy;
};