إطار التطبيق (AppShell)

تنظّم كتلة إطار التطبيق (AppShell) تخطيط التطبيق: شريط جانبي ورأس ومنطقة للمحتوى.

التثبيت

bash

npx @smicolon/cli add app-shell

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

مرحبًا بعودتك يا ليلى

لوحة التحكم

لديك 12 طلبًا جديدًا اليوم.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`sidebar`	`ReactNode`	لا يوجد	محتوى الشريط الجانبي، ويُخفى على الجوّال.
`header`	`ReactNode`	لا يوجد	محتوى الرأس.
`children`	`ReactNode`	لا يوجد	المحتوى الرئيسي.
`sidebarWidth`	`"sm" \| "md" \| "lg"`	`"md"`	عرض الشريط الجانبي.
`sidebarMobile`	`boolean`	`false`	يُظهر الشريط الجانبي على الجوّال.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

import { AppShell } from "@/components/blocks/app-shell"

export function Layout() {
  return (
    <AppShell
      sidebar={<Sidebar />}
      header={<Header />}
      sidebarWidth="md"
    >
      {children}
    </AppShell>
  )
}