Slide-overoverlay
Right-side detail panel on stock sheet with header, body, footer, URL-param deep link, previous/next records and an unsaved-changes guard.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/slide-overDeep link
slide-over-deep-link-demo.tsx
"use client";
import * as React from "react";import { Button } from "@/components/ui/button";import { SlideOver, type SlideOverParam } from "@/components/ui/slide-over";
const ids = ["R-1", "R-2", "R-3"] as const;
export default function SlideOverDeepLinkDemo() { const [value, setValue] = React.useState<string | null>(null); const useParam = React.useCallback((): SlideOverParam => [value, setValue], [value]); return ( <> {ids.map((id) => ( <Button key={id} variant="outline" onClick={() => setValue(id)}> {id} </Button> ))} <SlideOver useParam={useParam} recordIds={ids} title={value ?? "Record"}> <p>Record {value}</p> </SlideOver> </> );}