زر اجتماعي
أزرار تسجيل الدخول لـ 24 مزوداً بالإضافة إلى العلامات التجارية المخصصة. يؤدي تسمية العلامة التجارية إلى توفير شعارها ولونها وتسميتها الوصفية معاً، بحيث لا يمكن لمجموعة منها أن تتباين. يُصيَّر كزر افتراضياً، أو كرابط عند تزويده بـ href، إذ إن بدء OAuth هو تنقل.
التثبيت
يمكنك إضافة مكوّن زر التواصل الاجتماعي باستخدام CLI الخاص بنا أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add social-buttonهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
العلامات التجارية
جميع الشعارات الـ 24 مدمجة مع المكوّن، لذا لا يتطلب التثبيت أي حزمة أيقونات. تأتي العلامات الملونة الكاملة من SVG Logos (CC0)، والرموز أحادية اللون من Simple Icons (CC0)، والعلامات الأربع التي لم تعد Simple Icons تحملها من Bootstrap Icons (MIT). لا توجد علامة ملونة كاملة لـ Amazon في المصدر، لذا في white يعود إلى رمزه المصبوغ بلون العلامة التجارية.
type SocialBrand = | "google" | "apple" | "github" | "gitlab" | "microsoft" | "x" | "facebook" | "linkedin" | "discord" | "slack" | "figma" | "notion" | "dropbox" | "spotify" | "twitch" | "reddit" | "tiktok" | "instagram" | "telegram" | "whatsapp" | "amazon" | "bitbucket" | "auth0" | "okta" | "custom";المظهر
colorful هو الافتراضي: لون العلامة التجارية الخاص بها في نفس وصفة التدرج والظل المستخدمة في الزر الأساسي، بحيث يبدو كعنصر تحكم BoardUI لا كأداة مضمّنة. black هو نفس الشكل بتصميم صلب عالي التباين. white محدد بإطار، وهو الوحيد الذي يُظهر العلامة الملوّنة الحقيقية لكل مزوّد، إذ إن هذه الرسومات ستتعارض مع الخلفية على تعبئة مشبعة. لمجموعة من عدة مزوّدين، يُفضَّل white: عمود من ألوان تعبئة متنافسة للعلامات التجارية يجعل كل خيار غير مقروء.
{/* Colorful: the brand colour in the primary Button's gradient (default) */}<SocialButton brand="google" appearance="colorful" />
{/* Black: the same shape in high-contrast solid */}<SocialButton brand="google" appearance="black" />
{/* White: outlined, and the one that shows the real multi-colour mark */}<SocialButton brand="google" appearance="white" />الأحجام
medium (36px) و small(32px) هي أحجام الزر الأساسي بالبكسل ونصف القطر وحجم الرمز، لذا تجلس هذه في نموذج بجانب زر دون أي فجوة في الإيقاع. يحمل كلاهما عرضًا ثابتًا (300px و250px) بحيث يتوافق عمود من المزوّدين من تلقاء نفسه؛ fullWidth يعيد ذلك إلى الحاوية.
<SocialButton brand="slack" size="medium" /> {/* 36px, like Button medium */}<SocialButton brand="slack" size="small" /> {/* 32px, like Button small */}
{/* Drop the fixed width when the container should decide */}<SocialButton brand="slack" fullWidth />أيقونة فقط
زر مربع يعرض الشعار فقط، لصف البدائل تحت حقل البريد الإلكتروني. ينتقل اسم العلامة التجارية إلى aria-label، حتى يظل العنصر يُعلن عن نفسه.
<SocialButton brand="google" appearance="white" iconOnly /><SocialButton brand="apple" appearance="white" iconOnly /><SocialButton brand="github" appearance="white" iconOnly />
{/* The brand name stays as the accessible name when the label is hidden */}علامة تجارية مخصصة
لموفر هوية غير مدمج، مرّر brand="custom" مع config. فقط أيقونة مطلوب: label القيمة الافتراضية هي SSO و اللون إلى اللون الأسود.
import { RiShieldKeyholeLine } from "@remixicon/react";
<SocialButton brand="custom" config={{ icon: <RiShieldKeyholeLine className="size-5" />, label: "Okta SSO", color: "#0f172a", }}/>
{/* label defaults to "SSO" and color to black */}<SocialButton brand="custom" config={{ icon: <RiShieldKeyholeLine className="size-5" /> }} />التسميات
التسمية الافتراضية هي المتابعة باستخدام <Brand>. مرّر العناصر الفرعية لقول شيء آخر، إذ تحتاج شاشة التسجيل وشاشة تسجيل الدخول عادةً إلى صياغة مختلفة.
<SocialButton brand="google" /> {/* Continue with Google */}<SocialButton brand="google">Sign up with Google</SocialButton><SocialButton brand="google">Log in</SocialButton>الأزرار والروابط
تمرير href يعرض رابطًا بدلاً من زر. تبدأ معظم تدفقات OAuth بالانتقال إلى عنوان URL الخاص بالمزوّد، ويمنح الرابط الدلالات الصحيحة وسلوك النقر الأوسط ولوحة المفاتيح مجانًا.
{/* An OAuth start is a navigation, so pass href and get an anchor */}<SocialButton brand="github" href="/api/auth/github" />
{/* Otherwise it is a button */}<SocialButton brand="github" onClick={() => signIn("github")} />العلامات التجارية
الشعارات هي علامات تجارية لأصحابها المعنيين، مدرجة هنا حتى تتمكن من بناء شاشة تسجيل الدخول. تنشر عدة مزودين قواعد لأزرار تسجيل الدخول الخاصة بهم تغطي اللون والمسافة الواضحة والصياغة، Google وApple بشكل خاص، لذا تحقق منها قبل شحن تسجيل دخول للإنتاج.