الأزرار - Platformscode Core

الاستخدام الأساسي

كل زر يُبنى من الكلاس الأساسي pfc-btn.

HTML

<button type="button" class="pfc-btn pfc-btn--primary-brand pfc-btn--md">
  <span class="pfc-btn-label">Primary button</span>
</button>

JSX

import { DgaButton } from 'platformscode-new-react';

<DgaButton label="Primary button" variant="primary-brand" size="md" />

الأنواع اللونية

تشمل المكتبة عدة أنواع لونية.

HTML

<button class="pfc-btn pfc-btn--primary-brand pfc-btn--md"><span class="pfc-btn-label">Brand</span></button>
<button class="pfc-btn pfc-btn--primary-neutral pfc-btn--md"><span class="pfc-btn-label">Neutral</span></button>
<button class="pfc-btn pfc-btn--secondary pfc-btn--md"><span class="pfc-btn-label">Secondary</span></button>
<button class="pfc-btn pfc-btn--secondary-outline pfc-btn--md"><span class="pfc-btn-label">Outline</span></button>
<button class="pfc-btn pfc-btn--subtle pfc-btn--md"><span class="pfc-btn-label">Subtle</span></button>
<button class="pfc-btn pfc-btn--transparent pfc-btn--md"><span class="pfc-btn-label">Transparent</span></button>

JSX

import { DgaButton } from 'platformscode-new-react';

<DgaButton label="Brand" variant="primary-brand" size="md" />
<DgaButton label="Neutral" variant="primary-neutral" size="md" />
<DgaButton label="Secondary" variant="secondary" size="md" />
<DgaButton label="Outline" variant="secondary-outline" size="md" />
<DgaButton label="Subtle" variant="subtle" size="md" />
<DgaButton label="Transparent" variant="transparent" size="md" />

الأحجام

تتوفر ثلاثة أحجام.

HTML

<button class="pfc-btn pfc-btn--primary-brand pfc-btn--sm">…</button>
<button class="pfc-btn pfc-btn--primary-brand pfc-btn--md">…</button>
<button class="pfc-btn pfc-btn--primary-brand pfc-btn--lg">…</button>

JSX

import { DgaButton } from 'platformscode-new-react';

<DgaButton label="Small" variant="primary-brand" size="sm" />
<DgaButton label="Medium" variant="primary-brand" size="md" />
<DgaButton label="Large" variant="primary-brand" size="lg" />

الحالات

ست حالات معتمدة للزر.

HTML

<!-- الحالات التلقائية: لا تحتاج أصنافاً -->
<button class="pfc-btn pfc-btn--primary-brand pfc-btn--md">افتراضي</button>
<button class="pfc-btn pfc-btn--primary-brand pfc-btn--md" disabled>مُعطّل</button>

<!-- المُختار: حالة يديرها التطبيق -->
<button class="pfc-btn pfc-btn--primary-brand pfc-btn--md pfc-state-selected"
        aria-pressed="true">مُختار</button>

<!-- لعرض حالة مثبّتة في التوثيق فقط -->
<!-- pfc-state-hover / pfc-state-pressed / pfc-state-focus -->

JSX

import { DgaButton } from 'platformscode-new-react';

// dga-button
<DgaButton
  variant="primary-brand"
  size="md"
  label="افتراضي"
/>

الأزرار مع الأيقونات

أضف أيقونة داخل الزر عبر pfc-btn-icon.

HTML

<button class="pfc-btn pfc-btn--primary-brand pfc-btn--md">
  <i class="hgi-stroke hgi-add-01 pfc-btn-icon" aria-hidden="true"></i>
  <span class="pfc-btn-label">Add item</span>
</button>

<button class="pfc-btn pfc-btn--primary-brand pfc-btn--md pfc-btn--icon-only" aria-label="Add">
  <i class="hgi-stroke hgi-add-01 pfc-btn-icon" aria-hidden="true"></i>
</button>

JSX

import { DgaButton } from 'platformscode-new-react';

<DgaButton
  label="Add item"
  variant="primary-brand"
  size="md"
  leadIcon
  leadIconType="add-01"
  leadIconProps={{ variant: 'stroke', type: 'rounded' }} />

<DgaButton
  label="Next"
  variant="secondary-outline"
  size="md"
  trailIcon
  trailIconType="arrow-left-01"
  trailIconProps={{ variant: 'stroke', type: 'rounded' }} />

// iconOnly hides the label but still uses it as the accessible name
<DgaButton
  label="Add"
  variant="primary-brand"
  size="md"
  iconOnly
  iconType="add-01"
  iconProps={{ variant: 'stroke', type: 'rounded' }} />

ملاحظة الاتجاه.

الأزرار التحذيرية

للإجراءات الخطيرة استخدم pfc-btn--des-*.

HTML

<button class="pfc-btn pfc-btn--des-primary pfc-btn--md">…</button>
<button class="pfc-btn pfc-btn--des-secondary-outline pfc-btn--md">…</button>
<button class="pfc-btn pfc-btn--des-subtle pfc-btn--md">…</button>

<!-- زر معطّل: أضف السمة disabled -->
<button class="pfc-btn pfc-btn--primary-brand pfc-btn--md" disabled>…</button>

JSX

import { DgaButton } from 'platformscode-new-react';

<DgaButton label="Delete" variant="des-primary" size="md" />
<DgaButton label="Delete" variant="des-secondary-outline" size="md" />
<DgaButton label="Delete" variant="des-subtle" size="md" />
<DgaButton label="Delete link" variant="des-transparent" size="md" />

<DgaButton label="Disabled" variant="primary-brand" size="md" disabled />

الأزرار على خلفية ملونة

فوق خلفية ملونة أضف pfc-btn--on-color.

HTML

<div style="background:#1b8354; padding:16px;">
  <button class="pfc-btn pfc-btn--primary-brand pfc-btn--on-color pfc-btn--md">…</button>
  <button class="pfc-btn pfc-btn--transparent pfc-btn--on-color pfc-btn--md">…</button>
</div>

JSX

import { DgaButton } from 'platformscode-new-react';

<DgaButton label="Primary" variant="primary-brand" size="md" onColor />
<DgaButton label="Outline" variant="secondary-outline" size="md" onColor />
<DgaButton label="Transparent" variant="transparent" size="md" onColor />

واجهة React

الخصائص مستخرجة من المصدر مباشرة.

`<DgaButton />` dga-button

الخاصية	النوع	الافتراضي
`variant`	`"des-primary" \| "des-secondary" \| "des-secondary-outline" \| "des-subtle" \| "des-transparent" \| "primary-brand" \| "primary-neutral" \| "secondary" \| "secondary-outline" \| "subtle" \| "transparent"`	`primary-neutral`
`size`	`"lg" \| "md" \| "sm"`	`md`
`label`	`string`	`-`
`iconOnly`	`boolean`	`-`
`iconType`	`string`	`-`
`iconProps`	`{ [key: string]: any; }`	`-`
`leadIcon`	`boolean`	`-`
`leadIconType`	`string`	`-`
`leadIconProps`	`{ [key: string]: any; }`	`-`
`trailIcon`	`boolean`	`-`
`trailIconType`	`string`	`-`
`trailIconProps`	`{ [key: string]: any; }`	`-`
`disabled`	`boolean`	`-`
`btnId`	`string`	`-`
`type`	`"button" \| "reset" \| "submit"`	`button`
`onColor`	`boolean`	`false`
`sx`	`string \| { [x: string]: any; }`	`-`

الأحداث: onOnClick

`<DgaButtonV2 />` dga-button-v2

الخاصية	النوع	الافتراضي
`variant`	`"neutral" \| "primary" \| "secondary-outline" \| "secondary-solid" \| "subtle" \| "transparent"`	`primary`
`size`	`"lg" \| "md" \| "sm"`	`md`
`label`	`string`	`-`
`iconOnly`	`boolean`	`-`
`leadIcon`	`boolean`	`-`
`leadIconProps`	`Icon`	`-`
`trailIcon`	`boolean`	`-`
`trailIconProps`	`Icon`	`-`
`disabled`	`boolean`	`-`
`btnId`	`string`	`-`
`type`	`"button" \| "reset" \| "submit"`	`button`
`onColor`	`boolean`	`false`
`destructive`	`boolean`	`false`

الأحداث: onOnClick

`<NdsButton />` nds-button

الخاصية	النوع	الافتراضي
`variant`	`"primary-brand" \| "primary-neutral" \| "secondary-outline" \| "secondary-solid" \| "subtle" \| "transparent"`	`primary-brand`
`size`	`"lg" \| "md" \| "sm"`	`md`
`label`	`string`	`-`
`iconOnly`	`boolean`	`-`
`leadingIcon`	`string`	`-`
`leadingIconProps`	`{ color?: string; type?: "rounded" \| "sharp" \| "standard"; size?: number; variant?: "stroke" \| "solid" \| "duotone" \| "twotone" \| "bulk"; }`	`-`
`trailingIcon`	`string`	`-`
`trailingIconProps`	`{ color?: string; type?: "rounded" \| "sharp" \| "standard"; size?: number; variant?: "stroke" \| "solid" \| "duotone" \| "twotone" \| "bulk"; }`	`-`
`disabled`	`boolean`	`-`
`type`	`"button" \| "reset" \| "submit"`	`button`
`inverted`	`boolean`	`false`
`destructive`	`boolean`	`false`
`selected`	`boolean`	`false`

الأحداث: onOnClick

`<DgaActions />` dga-actions

الخاصية	النوع	الافتراضي
`direction`	`"column" \| "row"`	`row`
`gap`	`string`	`8px`
`align`	`"center" \| "end" \| "start" \| "stretch"`	`start`
`justify`	`"between" \| "center" \| "end" \| "start"`	`start`
`wrap`	`boolean`	`false`

مرجع الكلاسات

جميع الكلاسات المتاحة لمكوّن الأزرار:

الكلاس	النوع	الوصف
`pfc-btn`	أساسي	الكلاس الأساسي المطلوب لكل زر.
`pfc-btn-label`	أساسي	غلاف نص الزر.
`pfc-btn-icon`	أساسي	يُطبّق على عنصر الأيقونة.
`pfc-btn--primary-brand`	نوع	الزر الأساسي بلون العلامة.
`pfc-btn--secondary-outline`	نوع	زر ثانوي بحدود فقط.
`pfc-btn--subtle`	نوع	زر خفيف بخلفية باهتة.
`pfc-btn--des-*`	نوع	النسخ التحذيرية.
`pfc-btn--sm / --md / --lg`	حجم	حجم الزر.
`pfc-btn--icon-only`	معدّل	زر مربّع بأيقونة فقط.
`pfc-btn--on-color`	معدّل	لضبط التباين فوق خلفية ملوّنة.
`disabled`	سمة	سمة HTML لتعطيل الزر.

الاستخدام الأساسي

الأنواع اللونية

الأحجام

الحالات

الأزرار مع الأيقونات

الأزرار التحذيرية

الأزرار على خلفية ملونة

واجهة React

<DgaButton /> dga-button

<DgaButtonV2 /> dga-button-v2

<NdsButton /> nds-button

<DgaActions /> dga-actions

مرجع الكلاسات

`<DgaButton />` dga-button

`<DgaButtonV2 />` dga-button-v2

`<NdsButton />` nds-button

`<DgaActions />` dga-actions