Home/Components/Overlays/SlidePanel

SlidePanel

画面右からスライドインするパネル。詳細表示や編集フォームに使用。

import { SlidePanel } from "@blueai/ui"

Examples

Basic

const [open, setOpen] = useState(false);

<SlidePanel open={open} onClose={() => setOpen(false)}>
  <SlidePanel.Header>詳細情報</SlidePanel.Header>
  <SlidePanel.Body>
    <p>スライドパネルのコンテンツ</p>
  </SlidePanel.Body>
</SlidePanel>

Props

Prop	Type	Default	Description
open*	boolean	—	表示状態
onClose*	() => void	—	閉じるハンドラ
width	number	480	パネルの幅 (px)
children	ReactNode	—	SlidePanel.Header / SlidePanel.Body / SlidePanel.Footer を配置