节点标题

¥Node Header

设计用于与 <BaseNode /> 组件配合使用的标题。它可以包含标题、图标和操作列表。

¥A header designed to work with the <BaseNode /> component. It can contain a title, icon, and list of actions.

Dependencies:

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui.reactflow.dev/node-header


pnpm dlx shadcn@latest add https://ui.reactflow.dev/node-header


yarn dlx shadcn@latest add https://ui.reactflow.dev/node-header


bun x shadcn@latest add https://ui.reactflow.dev/node-header

Usage

1. Copy the component into your app


import { memo } from "react";
 
import { NodeProps } from "@xyflow/react";
 
import { BaseNode } from "@/components/base-node";
import {
  NodeHeader,
  NodeHeaderTitle,
  NodeHeaderActions,
  NodeHeaderMenuAction,
  NodeHeaderIcon,
  NodeHeaderDeleteAction,
} from "@/components/node-header";
import {
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Rocket } from "lucide-react";
 
const NodeHeaderDemo = memo(({ selected }: NodeProps) => {
  return (
    <BaseNode selected={selected} className="px-3 py-2">
      <NodeHeader className="-mx-3 -mt-2 border-b">
        <NodeHeaderIcon>
          <Rocket />
        </NodeHeaderIcon>
        <NodeHeaderTitle>Node Title</NodeHeaderTitle>
        <NodeHeaderActions>
          <NodeHeaderMenuAction label="Expand account options">
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuItem>Team</DropdownMenuItem>
            <DropdownMenuItem>Subscription</DropdownMenuItem>
          </NodeHeaderMenuAction>
          <NodeHeaderDeleteAction />
        </NodeHeaderActions>
      </NodeHeader>
      <div className="mt-2">Node Content</div>
    </BaseNode>
  );
});
 
export default NodeHeaderDemo;

2. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
 
import NodeHeaderDemoNode from "./component-example";
 
const nodeTypes = {
  nodeHeaderNode: NodeHeaderDemoNode,
};
 
const defaultNodes = [
  {
    id: "1",
    type: "nodeHeaderNode",
    position: { x: 200, y: 200 },
    data: {},
  },
];
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
        <Background />
      </ReactFlow>
    </div>
  );
}

自定义节点操作

¥Custom node actions

许多节点标题操作将在多个自定义节点中有用。以下是你可能定义的一些自定义节点操作示例。

¥Many node header actions will be useful across multiple custom nodes. Below are some examples of custom node actions that you might define.

自定义删除操作

¥Custom Delete action


export type NodeHeaderCustomDeleteActionProps = Omit<
  NodeHeaderActionProps,
  'onClick'
>;
 
/**
 
 * A custom delete action button that removes the node from the graph when clicked.
 */
export const NodeHeaderCustomDeleteAction = React.forwardRef<
  HTMLButtonElement,
  NodeHeaderCustomDeleteActionProps
>((props, ref) => {
  const id = useNodeId();
  const { setNodes } = useReactFlow();
 
  const handleClick = useCallback(() => {
    setNodes((prevNodes) => prevNodes.filter((node) => node.id !== id));
  }, []);
 
  return (
    <NodeHeaderAction
      ref={ref}
      onClick={handleClick}
      variant="ghost"
      {...props}
    >
      <Trash />
    </NodeHeaderAction>
  );
});
 
NodeHeaderCustomDeleteAction.displayName = 'NodeHeaderCustomDeleteAction';

复制操作

¥Copy action


export interface NodeHeaderCopyActionProps
  extends Omit<NodeHeaderActionProps, 'onClick'> {
  onClick?: (nodeId: string, event: React.MouseEvent) => void;
}
 
/**
 
 * A copy action button that passes the node's id to the `onClick` handler when
 
 * clicked.
 */
export const NodeHeaderCopyAction = React.forwardRef<
  HTMLButtonElement,
  NodeHeaderCopyActionProps
>(({ onClick, ...props }, ref) => {
  const id = useNodeId();
 
  const handleClick = useCallback(
    (event: React.MouseEvent) => {
      if (!onClick || !id) return;
 
      onClick(id, event);
    },
    [onClick],
  );
 
  return (
    <NodeHeaderAction
      ref={ref}
      onClick={handleClick}
      variant="ghost"
      {...props}
    >
      <Copy />
    </NodeHeaderAction>
  );
});
 
NodeHeaderCopyAction.displayName = 'NodeHeaderCopyAction';