alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add multiple backs sample

Browse Source
This commit is contained in:
Artyom Sovetnikov
2023-03-21 02:40:47 +03:00
parent dedf0046b5
commit a863e5b94d
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
examples/vite-app/src/examples/Backgrounds/index.tsx
View File

@@ -19,13 +19,13 @@ const initialNodes: Node[] = [
},
];
const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => {
const Flow: FC<{ id: string; bgProps: BackgroundProps[] }> = ({ id, bgProps }) => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
return (
<ReactFlowProvider>
<ReactFlow nodes={nodes} onNodesChange={onNodesChange} id={id}>
<Background {...bgProps} />
{bgProps.map((props, idx) => <Background key={idx} id={idx.toString()} {...props} />)}
</ReactFlow>
</ReactFlowProvider>
);
@@ -33,9 +33,11 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) =>
const Backgrounds: FC = () => (
<div className={styles.wrapper}>
<Flow id="flow-a" bgProps={{ variant: BackgroundVariant.Dots }} />
<Flow id="flow-b" bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }} />
<Flow id="flow-c" bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }} />
<Flow id="flow-a" bgProps={[{ variant: BackgroundVariant.Dots }]} />
<Flow id="flow-b" bgProps={[{ variant: BackgroundVariant.Lines, gap: [50, 50] }]} />
<Flow id="flow-c" bgProps={[{ variant: BackgroundVariant.Cross, gap: [100, 50] }]} />
<Flow id="flow-d" bgProps={[{ variant: BackgroundVariant.Lines, gap: 10 },
{ variant: BackgroundVariant.Lines, gap: 100, offset: 1, color: "#ccc" }]} />
</div>
);