مقتطف كود

CodeSnippet

كتلة كود في React تدعم تبويبات اللغات، أرقام الأسطر، زر النسخ، طي "عرض المزيد"، والنمط المضمن. يبقى الكود من اليسار إلى اليمين في الصفحات العربية.

فتح في Storybook ↗

يستقبل CodeSnippet مصفوفة languages، وتظهر التبويبات عند وجود أكثر من لغة. استخدم maxLines لزر "عرض المزيد"، وCodeSnippetInline للأوامر القصيرة. يظهر الكود دائماً من اليسار إلى اليمين.

متى تستخدمه

استخدم CodeSnippet في وثائق المطورين، بوابات API، وأدلة التكامل. مرر عدة languages لإظهار التبويبات. استخدم maxLines للعينات الطويلة، وCodeSnippetInline للأوامر أو القيم المفردة داخل الجملة.

أمثلة

لغات متعددة

// جلب دليل الخدمات الوطنيconst res = await fetch(  'https://api.gov.example.sa/v1/services',);const services = await res.json();console.log(services.length);

لغة واحدة، بلا أرقام أسطر

export const config = {  authority: 'هيئة الحكومة الرقمية',  region: 'sa-central-1',  retries: 3,};

قابل للطي مع "عرض المزيد"

# مخطط طلب الرخصةfrom pydantic import BaseModelclass PermitRequest(BaseModel):    citizen_id: str    service_code: str    ministry: str    submitted_at: str    status: str = "pending"    priority: int = 3# مثالrequest = PermitRequest(    citizen_id="1000000000",    service_code="BLD-204",    ministry="الشؤون البلدية",    submitted_at="2026-07-02",)

أمر مضمن

pnpmpnpm add @dev-dga/react @dev-dga/css

npmnpm install @dev-dga/react

الخصائص

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

<CodeSnippet>

الخاصية	النوع	الافتراضي	الوصف
`languages`إلزامي	`CodeSnippetLanguage[]`		One entry per language. A single entry hides the tab bar (SDGA single-tab).
`value`	`string`		Controlled active language.
`defaultValue`	`string`		Uncontrolled initial active language (defaults to the first).
`onValueChange`	`(value: string) => void`
`lineNumbers`	`boolean`	`true`	Render the line-number gutter.
`maxLines`	`number`		Collapse to this many lines with a Show More toggle when exceeded.
`renderCode`	`(ctx: { code: string; language: string; }) => ReactNode`		Escape hatch: render highlighted code yourself; the active `code` still drives copy + line count.
`onCopy`	`(text: string) => void`
`copyLabel`	`string`	`'Copy code'`	Accessible name for the copy button.
`copiedLabel`	`string`	`'Copied'`	Live-region text announced after a successful copy.

<CodeSnippetInline>

الخاصية	النوع	الافتراضي	الوصف
`children`إلزامي	`string`		The command text - copied verbatim.
`prefix`	`react.ReactNode`		Leading label (e.g. `npm`) - rendered in gold.
`onCopy`	`(text: string) => void`
`copyLabel`	`string`	`'Copy code'`	Accessible name for the copy button.
`copiedLabel`	`string`	`'Copied'`	Live-region text announced after a successful copy.

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

لزر النسخ اسم متاح الوصول، ويعلن الزر نجاح النسخ عبر منطقة حية. يعرض زر "عرض المزيد" aria-expanded.

يظهر الكود داخل <pre> و<code> باتجاه إجباري من اليسار إلى اليمين، مما يحافظ على قراءته الصحيحة داخل المحتوى العربي. تعمل التبويبات بلوحة المفاتيح.