شريحة التصفية

نظرة عامة

الشريحة حبّة قابلة للنقر تصفّي قائمة أو تصنّف محتوى أو تمثّل مرشّحا مطبّقا. حين تكون اختيارا تُضاء بلون التمييز عند التحديد.

استخدامات متعددة

الشريحة نفسها تخدم عدة سياقات. كلها حيّة، جرّبها.

التركيب

كل خاصية بصرية من طبقة أساس: الشكل حبّة (الاستدارة)، والحالة المختارة (ألوان state.selected.accent)، والإجراء الممتلئ (bg.base.section)، والحد (الحدود)، والحشو (المسافات)، والنص (الطباعة)، والانتقال (الحركة).

السلوك

الشريحة قابلة للتركيز بلوحة المفاتيح وتبدّل حالتها بمفتاحي Enter وSpace، وتعكس التحديد عبر aria-pressed. عند التحويم أو الضغط تتبدّل التعبئة والحد عبر رموز الحركة (feedback)، وتظهر حلقة تركيز واضحة عند التنقّل بلوحة المفاتيح. زر الإزالة داخل الشريحة القابلة للإزالة قابل للتركيز باستقلال ويعمل بالمفاتيح نفسها، ويوقف انتشار الحدث حتى لا يبدّل نقره تحديد الشريحة.

افعل ولا تفعل

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

• شرائح الاختيار تعرّف aria-pressed لتعكس حالة التحديد.
• زر الإزالة له تسمية وصول ويعمل بلوحة المفاتيح.
• الحالة المختارة تُميّز بالحد والتعبئة، لا باللون وحده.

الشيفرة

الشريحة تُستورد من حزمة المكوّنات، وتُنسّق بالكامل من الرموز الدلالية. الاستخدام في React أولا، ثم الجزء الجوهري من تنفيذها: منطق النمط الذي يربط كل حالة (مختار، ممتلئ، محيط) برموزها.

import { Chip } from "@mercato/components";

<Chip selected onClick={toggle}>مذاخر</Chip>
<Chip filter icon="calendar_month">اخر 30 يوم</Chip>
<Chip selected onRemove={remove}>قيد المعالجة</Chip>

const base = {
  borderRadius: "var(--shape-rounded)",
  paddingBlock: "var(--spacing-inset-xs)",
  paddingInline: "var(--spacing-inset-md)",
  borderWidth: "var(--border-base)",
  borderStyle: "solid",
  minHeight: 36,
  transition: "background-color var(--motion-feedback-duration) var(--motion-feedback-easing)",
};

// selected -> accent state tokens; filter -> filled neutral; else outline.
const style = selected
  ? { ...base, backgroundColor: "var(--color-bg-state-selected-accent-default)", borderColor: "var(--color-border-state-selected-accent)", color: "var(--color-fg-intent-accent)" }
  : filter
    ? { ...base, backgroundColor: "var(--color-bg-base-section)", borderColor: "transparent", color: "var(--color-fg-base-secondary)" }
    : { ...base, backgroundColor: "transparent", borderColor: "var(--color-border-base-medium)", color: "var(--color-fg-base-secondary)" };

<button type="button" style={style}>{children}</button>

لا تحمل الشريحة قيمة لون أو استدارة أو حد مباشرة: تبديل الوضع الداكن أو إعادة العلامة يسري تلقائيا لأن كل شيء يمرّ عبر الرموز.

مكوّنات ذات صلة