Spinner (مؤشر دوّار)

شكل دوّار أساسي يشير إلى حالة قيد التنفيذ. كإدارة التحميل (LhLoading) يعرضه داخليًا أيضًا.

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

ثلاثة أحجام

<script setup lang="ts">
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" />
  </div>
</template>

لون مخصص

اللون

<script setup lang="ts">
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner color="#8f9779" />
    <LhSpinner color="#b55442" />
    <LhSpinner color="#4a6fa5" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner color="#8f9779" />
    <LhSpinner color="#b55442" />
    <LhSpinner color="#4a6fa5" />
  </div>
</template>

API

LhSpinner Props

اسم الخاصية	الوصف	النوع	الافتراضي
size	الحجم	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
color	لون الدوران (قيمة CSS color؛ يرث currentColor إذا لم يُمرّر)	string	—
sx	خصائص التخطيط السريع sx	LhSxProps	—

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

• الشكل زخرفة بحتة، aria-hidden="true" يزيله من شجرة إمكانية الوصول؛ ودلالة «قيد التنفيذ» يتحملها الحاوية الخارجية (مثل role="status")
• تأثير الدوران يحترم prefers-reduced-motion، ويتفكّك إلى قوس ثابت

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن للخارج (مستخرجة تلقائيًا من packages/components/spinner/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لتوسيع تعريفه الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

LhSpinnerProps

export interface LhSpinnerProps {
  /** الحجم */
  size?: LhSpinnerSize
  /** لون الدوران (قيمة CSS color؛ يرث currentColor إذا لم يُمرّر) */
  color?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhSpinnerSize _{(مأخوذ من @lh-ui/share/core/spinner)}

/** حجم الشكل الدوّار */
export type LhSpinnerSize = (typeof LH_SPINNER_SIZE_CONST)[keyof typeof LH_SPINNER_SIZE_CONST]

الثوابت

الثوابت العامة التي يستخدمها هذا المكوّن (يمكن النقر على العنصر الذي يحمل الاسم نفسه في عمودي «النوع / الافتراضي» بجدول Props للقفز إلى هنا):

LH_SPINNER_SIZE_CONST _{(مأخوذ من @lh-ui/share/core/spinner)}

export const LH_SPINNER_SIZE_CONST = {
  ...LH_SIZE_CONST,
} as const

LH_SPINNER_SIZE_PX _{(مأخوذ من @lh-ui/share/core/spinner)}

/** تعيين الحجم → القطر بالبكسل */
export const LH_SPINNER_SIZE_PX: Record<LhSpinnerSize, number> = {
  small: 16,
  medium: 24,
  large: 32,
  mini: 12,
  'x-large': 40,
}