|
|
import { type BackgroundProps } from './types';
|
|
|
declare function BackgroundComponent({ id, variant, gap, size, lineWidth, offset, color, bgColor, style, className, patternClassName, }: BackgroundProps): import("react/jsx-runtime").JSX.Element;
|
|
|
declare namespace BackgroundComponent {
|
|
|
var displayName: string;
|
|
|
}
|
|
|
/**
|
|
|
* The `<Background />` component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.
|
|
|
*
|
|
|
* @example
|
|
|
*
|
|
|
* A simple example of how to use the Background component.
|
|
|
*
|
|
|
* ```tsx
|
|
|
* import { useState } from 'react';
|
|
|
* import { ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
|
|
|
*
|
|
|
* export default function Flow() {
|
|
|
* return (
|
|
|
* <ReactFlow defaultNodes={[...]} defaultEdges={[...]}>
|
|
|
* <Background color="#ccc" variant={BackgroundVariant.Dots} />
|
|
|
* </ReactFlow>
|
|
|
* );
|
|
|
* }
|
|
|
* ```
|
|
|
*
|
|
|
* @example
|
|
|
*
|
|
|
* In this example you can see how to combine multiple backgrounds
|
|
|
*
|
|
|
* ```tsx
|
|
|
* import { ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
|
|
|
* import '@xyflow/react/dist/style.css';
|
|
|
*
|
|
|
* export default function Flow() {
|
|
|
* return (
|
|
|
* <ReactFlow defaultNodes={[...]} defaultEdges={[...]}>
|
|
|
* <Background
|
|
|
* id="1"
|
|
|
* gap={10}
|
|
|
* color="#f1f1f1"
|
|
|
* variant={BackgroundVariant.Lines}
|
|
|
* />
|
|
|
* <Background
|
|
|
* id="2"
|
|
|
* gap={100}
|
|
|
* color="#ccc"
|
|
|
* variant={BackgroundVariant.Lines}
|
|
|
* />
|
|
|
* </ReactFlow>
|
|
|
* );
|
|
|
* }
|
|
|
* ```
|
|
|
*
|
|
|
* @remarks
|
|
|
*
|
|
|
* When combining multiple <Background /> components it’s important to give each of them a unique id prop!
|
|
|
*
|
|
|
*/
|
|
|
export declare const Background: import("react").MemoExoticComponent<typeof BackgroundComponent>;
|
|
|
export {};
|
|
|
//# sourceMappingURL=Background.d.ts.map
|
