نظرة عامة
امنح المجموعة اسمًا متاحًا وضع الأزرار ذات الصلة داخلها. تضم المجموعة الحدود المتجاورة ويمكنها تطبيق الإعدادات الافتراضية للحجم والمتغير واللون. تحتفظ الأزرار بمحطات Tab الخاصة بها.استخدام
ملكية الحالة
ينسّقButtonGroup المظهر، وليس التحديد. لا يحتوي على وضع تحديد متحكَّم فيه أو غير متحكَّم فيه. يتلقى كل زر معالج الإجراء الخاص به وحالة التطبيق؛ راجع مثال ملكية حالة الزر لسلوك التحميل.
لخيار متنافيًا بشكل متبادل، استخدم RadioGroup، الذي يملك التحديد لعناصر التحكّم اللاسلكية الخاصة به.
أسبقية المظهر
تُحل كل خاصية مظهر بشكل مستقل: خاصية الطفل الصريحة، ثم الإعداد الافتراضي للمجموعة، ثم الإعداد الافتراضي للمكوّن. ينطبق هذا على كل من Button وIconButton، بما في ذلكIconButton size="xs" الصريح. تصل الإعدادات الافتراضية إلى العناصر الفرعية عبر الأجزاء والأغلفة ومرتكزات تلميحات الأدوات.
يمكن للمجموعة توفير color="inherit" على سطح ملوّن. يجب أن يُحلّ العنصر الفرعي الذي يرث اللون إلى صيغة غير مصمتة أيضًا. تتقدم تجاوزات لون العنصر الفرعي وصيغته الصريحة، لذا يمكن للعنصر الفرعي اختيار صيغة غير مصمتة أو لون دلالي عندما توفّر المجموعة لونًا مصمتًا والوراثة معًا.
أبقِ الأزرار المتصلة بالحجم نفسه بحيث تتراصف حوافها. يتجاوز هذا المثال المتغير واللون مع وراثة حجم المجموعة.
عناصر تحكّم منفصلة
عيّنattached={false} للحفاظ على الزوايا المستديرة لكل عنصر تحكّم وفجوة قدرها 2px. تظل الإعدادات الافتراضية للمجموعة سارية عبر الأغلفة وارتكازات تلميحات الأدوات؛ وتكون لخصائص العناصر الفرعية الصريحة الأولوية.
عناصر تحكّم مؤطّرة
عيّنframed لإضافة خلفية شبه شفافة وحدود وحشوة بمقدار 2px وزوايا متحدة المركز. يعمل الإطار مع عناصر التحكّم المتصلة أو المنفصلة ويحافظ على المظهر الصريح للعناصر الفرعية. استخدم size="xs" على IconButton للإجراءات المدمجة بحجم 20px.
تحديث المجموعات الموجودة
استبدلIconButtonGroup ومصفوفة iconButtons الخاصة به بـ ButtonGroup framed attached={false} وعناصر فرعية صريحة. استبدل InsideButton بـ LightIconButton size="xs". يمتلك كل زر اسمه المتاح ومعالج الإجراء وحالة التعطيل وتلميح الأداة الاختياري.
الإزاحة
boolean
افتراضي:"true"
Join adjacent controls. Set to false for independently rounded buttons with a 2px gap.
"accent" | "danger" | "inherit" | "neutral" | "success"
Default semantic color for children without an explicit color. Inherited color requires each child to resolve to a non-solid variant; explicit child overrides take precedence.
boolean
افتراضي:"false"
Add a translucent frame with padding and concentric corners. Button sizes and appearance remain independent unless set on the group.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."md" | "sm"
Default button height for children without an explicit size.
"ghost" | "link" | "outline" | "soft" | "solid"
Default surface treatment for children without an explicit variant.