Panel

Tutarlı boşluklara sahip yükseltilmiş içerik yüzeyi.

Panel.tsx

Proje & Telemetri Ayarları

Genel görünüm, şema senkronizasyonu ve ekip erişim seviyeleri

Bu panel altında Next.js 16 derleme parametreleri, SSR ve React 19 derleme önbellekleri doğrudan yönetilebilir.

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/panel.json

Kullanım Örneği

import { Panel } from "@/components/layout/Panel"

<Panel
  title="Dağıtım ayarları"
  subtitle="Production ortamı seçenekleri"
  variant="sage"
  collapsible
>
  <DeploymentSettings />
</Panel>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
title	ReactNode	—	Panel başlığı.
subtitle	ReactNode	—	Başlığa aria-describedby ile bağlanan açıklama.
action	ReactNode	—	Header'ın sağındaki aksiyon alanı.
variant	"default" \| "blueprint" \| "subtle" \| "sage"	"default"	Panel yüzeyinin görsel varyantı.
borderLess	boolean	false	Arka planı koruyup yalnızca kenarlığı kaldırır.
as	"div" \| "section" \| "article"	"section"	Render edilen semantik kapsayıcı.
headingLevel	2 \| 3 \| 4 \| 5 \| 6	3	Panel başlığının belge hiyerarşisi.
padding	"none" \| "sm" \| "md" \| "lg"	"md"	Panel iç boşluk ölçeği.
collapsible	boolean	false	Panel gövdesini açılıp kapanabilir yapar.
collapsed	boolean	—	Kontrollü kapalı durumu.
defaultCollapsed	boolean	false	Kontrolsüz ilk kapalı durumu.
onCollapsedChange	(collapsed: boolean) => void	—	Kapalı durum isteği değiştiğinde çağrılır.