شريط قوائم

Menubar

شريط قوائم أفقي بأسلوب سطح المكتب في React مبني على Radix، مع قوائم متداخلة، عناصر مربعات اختيار وأزرار اختيار، ومشغلات محددة. تتنقل مفاتيح الأسهم بين القوائم وداخلها.

فتح في Storybook ↗

يقدم Menubar نمط File / Edit / View. يضم كل MenubarMenu مشغلاً وقائمة عناصر، وتتنقل مفاتيح الأسهم بين القوائم وداخلها.

متى تستخدمه

استخدم Menubar في أدوات سطح المكتب الكثيفة، مثل محررات المستندات ولوحات الإدارة الخلفية، حيث يتوقع المستخدم قوائم مثل ملف، تحرير، وعرض. لقائمة إجراءات واحدة، استخدم DropdownMenu. للتنقل الرئيسي في الموقع، استخدم Sidebar أو SlideoutMenu.

أمثلة

ملف / تحرير / عرض

مربعات اختيار ومجموعة أزرار

مشغلات محددة

الخصائص

الخصائص التي يعرفها Menubar. سمات العنصر الأصلي تمر كما هي.

<Menubar>

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`
`defaultValue`	`string`
`onValueChange`	`(value: string) => void`
`loop`	`boolean`
`dir`	`Direction`
`asChild`	`boolean`

<MenubarMenu>

الخاصية	النوع	الافتراضي	الوصف
`__scopeMenubar`	`_radix_ui_react_context.Scope`
`value`	`string`
`children`	`ReactNode`

<MenubarTrigger>

الخاصية	النوع	الافتراضي	الوصف
`variant`	`"outline" \| "default"`
`asChild`	`boolean`

<MenubarContent>

الخاصية	النوع	الافتراضي	الوصف
`size`	`"sm" \| "md"`
`forceMount`	`true`		Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`onCloseAutoFocus`	`(event: Event) => void`		Event handler called when auto-focusing on close. Can be prevented.
`loop`	`boolean`	`false`	Whether keyboard navigation should loop around
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`
`onFocusOutside`	`(event: FocusOutsideEvent) => void`
`onInteractOutside`	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`
`side`	`"top" \| "right" \| "bottom" \| "left"`
`sideOffset`	`number`
`align`	`"center" \| "start" \| "end"`
`alignOffset`	`number`
`arrowPadding`	`number`
`avoidCollisions`	`boolean`
`collisionBoundary`	`Element \| Element[]`
`collisionPadding`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`
`sticky`	`"always" \| "partial"`
`hideWhenDetached`	`boolean`
`updatePositionStrategy`	`"always" \| "optimized"`
`asChild`	`boolean`

<MenubarItem>

الخاصية	النوع	الوصف
`destructive`	`boolean`	Style as a destructive action (red text, red hover).
`startIcon`	`react.ReactNode`	Icon rendered before the label. Sized to 1em.
`shortcut`	`react.ReactNode`	Trailing text shown muted, e.g. a keyboard shortcut hint ("⌘K").
`onSelect`	`(event: Event) => void`
`disabled`	`boolean`
`textValue`	`string`
`asChild`	`boolean`

<MenubarCheckboxItem>

الخاصية	النوع	الافتراضي	الوصف
`onSelect`	`(event: Event) => void`
`disabled`	`boolean`
`textValue`	`string`
`checked`	`CheckedState`
`onCheckedChange`	`(checked: boolean) => void`
`asChild`	`boolean`

<MenubarRadioGroup>

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`
`onValueChange`	`(value: string) => void`
`asChild`	`boolean`

<MenubarRadioItem>

الخاصية	النوع	الافتراضي	الوصف
`onSelect`	`(event: Event) => void`
`disabled`	`boolean`
`textValue`	`string`
`value`إلزامي	`string`
`asChild`	`boolean`

<MenubarLabel>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<MenubarSeparator>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<MenubarGroup>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<MenubarSub>

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`
`open`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`(open: boolean) => void`

<MenubarSubTrigger>

الخاصية	النوع	الافتراضي	الوصف
`startIcon`	`react.ReactNode`
`disabled`	`boolean`
`textValue`	`string`
`asChild`	`boolean`

<MenubarSubContent>

الخاصية	النوع	الافتراضي	الوصف
`size`	`"sm" \| "md"`
`loop`	`boolean`	`false`	Whether keyboard navigation should loop around
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`
`onFocusOutside`	`(event: FocusOutsideEvent) => void`
`onInteractOutside`	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`
`forceMount`	`true`		Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`align`	`AlignSubContent`		Controls the direction the subcontent appears from its anchor menu item Default: start
`sideOffset`	`number`
`alignOffset`	`number`
`arrowPadding`	`number`
`avoidCollisions`	`boolean`
`collisionBoundary`	`Element \| Element[]`
`collisionPadding`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`
`sticky`	`"always" \| "partial"`
`hideWhenDetached`	`boolean`
`updatePositionStrategy`	`"always" \| "optimized"`
`asChild`	`boolean`

إمكانية الوصول

يعرض الشريط role="menubar" مع مشغلات القوائم، ويدعم هذه المفاتيح: السهمان الأيسر والأيمن للتنقل بين القوائم، السهمان العلوي والسفلي للتنقل داخل القائمة، الكتابة للقفز إلى العنصر المطابق، وEscape لإغلاق القائمة المفتوحة.

تعرض عناصر مربعات الاختيار وأزرار الاختيار aria-checked. تتبع مفاتيح الأسهم اتجاه القراءة في العربية.