自定义全屏目标元素

功能概述

此示例演示如何自定义全屏功能以包含图表画布之外的其他页面元素。通过使用 fullscreenElementXPath 选项，可以指定更大的容器元素作为全屏目标。

核心特性实现

全屏目标配置

使用 fullscreenElementXPath 选项指定当单击工具栏按钮时哪个 DOM 元素应该变为全屏：

const graphOptions: RGOptions = {
    fullscreenElementXPath: '#my-fullscreen-content',
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 120,
        treeNodeGapV: 10
    }
};

容器元素设置

将图表和其他元素包装在具有匹配 ID 的容器中：

<div className="my-graph bg-white" id="my-fullscreen-content">
    <div className="flex flex-col" style={{ height: '100vh' }}>
        <div className="border-b">
            {/* 包含说明的标题内容 */}
        </div>
        <div className="grow flex">
            <div className="bg-pink-200 w-36">Left</div>
            <RelationGraph options={graphOptions} onNodeClick={onNodeClick} />
            <div className="bg-blue-200 w-36">Right</div>
        </div>
    </div>
</div>

用例说明

示例包括解释该功能的信息文本：

默认情况下，全屏仅影响 relation-graph 组件本身
这会导致周围内容变得不可见
使用 fullscreenElementXPath 可以通过包含所有相关内容来解决这个问题

<div className="text-xs">
    <div className="font-bold">使用 fullscreenElementXPath 选项自定义全屏显示内容。</div>
    <div>"这可以解决'为什么全屏后我的内容变得不可见？'的问题"</div>
    <div className="font-bold">此示例指定了更大的全屏目标。试一试吧。</div>
</div>

创意使用场景

仪表盘布局：在全屏模式下包含侧边栏、标题栏和工具栏
演示：在图表旁边显示说明性内容
文档：在展示图表时显示帮助文本或说明
多面板视图：在全屏期间保持相关面板可见
嵌入式图表：与周围界面元素保持上下文

自定义全屏的内容

自定义全屏目标元素

自定义全屏目标元素

功能概述

核心特性实现

全屏目标配置

容器元素设置

用例说明

创意使用场景