تحميل Loading

تغذية راجعة أثناء التحميل. ثلاث صور: قناع خدمي (LhLoading.show(...)، ملء الشاشة أو حاوية محددة)، وتعليمة v-loading، والشكل الدوّار الأساسي LhSpinner.

قناع ملء الشاشة خدمي

تحميل ملء الشاشة

<script setup lang="ts">
import { LhLoading } from '@lh-ui/vue3'

const showFullscreen = () => {
  const handle = LhLoading.show({ fullscreen: true, lock: true })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <LhButton @click="showFullscreen">تحميل ملء الشاشة لمدة ثانيتين</LhButton>
</template>

<script>
import { LhLoading } from '@lh-ui/vue3'

export default {
  methods: {
    showFullscreen() {
      const handle = LhLoading.show({ fullscreen: true, lock: true })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <LhButton @click="showFullscreen">تحميل ملء الشاشة لمدة ثانيتين</LhButton>
</template>

قناع لحاوية محددة

عند عدم تمرير target يكون القناع ملء الشاشة؛ وعند تمرير مُحدِّد أو عنصر يتمدد داخل الحاوية (absolute يملأ أقرب سلف موضَع، وتُضاف تلقائيًا relative للحاويات من نوع static ويُسترجع الحال عند الإغلاق).

تحميل جزئي

<script setup lang="ts">
import { ref } from 'vue'
import { LhLoading } from '@lh-ui/vue3'

const boxRef = ref<HTMLElement>()

const showBox = () => {
  const handle = LhLoading.show({ target: boxRef.value, text: 'جارٍ التحميل بجد', lock: true })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <div
    ref="boxRef"
    class="demo-loading-box"
  >
    <LhButton @click="showBox">تحميل داخل الحاوية</LhButton>
  </div>
</template>

<script>
import { LhLoading } from '@lh-ui/vue3'

export default {
  methods: {
    showBox() {
      const handle = LhLoading.show({ target: this.$refs.boxRef, text: 'جارٍ التحميل بجد', lock: true })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <div
    ref="boxRef"
    class="demo-loading-box"
  >
    <LhButton @click="showBox">تحميل داخل الحاوية</LhButton>
  </div>
</template>

تعليمة v-loading

بعد app.use(LhLoading) (أو الاستيراد الكامل) تُسجَّل تعليمة v-loading، ويتحكم تبديلها المنطقي بالإظهار والإخفاء.

<template>
  <div v-loading="busy" class="table-zone">…</div>
  <div v-loading:text="'نص مخصص'" :style="busy2 ? 'height:200px' : ''">…</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const busy = ref(false)
const busy2 = ref(false)
</script>

<template>
  <div v-loading="busy" class="table-zone">…</div>
  <div v-loading:text="'نص مخصص'" :style="busy2 ? 'height:200px' : ''">…</div>
</template>

<script>
export default {
  data() {
    return { busy: false, busy2: false }
  },
}
</script>

الشكل الدوّار LhSpinner

شكل دوّار أساسي، يمكن استخدامه مستقلًا (قناع الدلالة loading يعرضه داخليًا أيضًا).

LhSpinner

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

<template>
  <div class="demo-loading-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" color="#8f9779" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-loading-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" color="#8f9779" />
  </div>
</template>

مظهر مخصص

text لتخصيص النص التلميحي، وbackground لضبط خلفية القناع، وz-index للتحكم في ترتيب الطبقات، وspinner لإيقاف الشكل الدوّار.

مظهر مخصص

<script setup lang="ts">
import { LhLoading } from '@lh-ui/vue3'

const showStyled = () => {
  const handle = LhLoading.show({
    text: 'جارٍ مزامنة البيانات…',
    background: 'rgba(42, 37, 32, 0.6)',
    zIndex: 4000,
    spinner: false,
  })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <LhButton @click="showStyled">تحميل بمظهر مخصص لمدة ثانيتين</LhButton>
</template>

<script>
import { LhLoading } from '@lh-ui/vue3'

export default {
  methods: {
    showStyled() {
      const handle = LhLoading.show({
        text: 'جارٍ مزامنة البيانات…',
        background: 'rgba(42, 37, 32, 0.6)',
        zIndex: 4000,
        spinner: false,
      })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <LhButton @click="showStyled">تحميل بمظهر مخصص لمدة ثانيتين</LhButton>
</template>

API

LhLoadingMask Props

اسم الخاصية	الوصف	النوع	الافتراضي
fullscreen	ملء الشاشة (true عندما الهدف هو body)	boolean	—
text	نص تلميح التحميل (عند عدم التمرير يُؤخذ من حزمة اللغة loading.text)	string	—
background	لون خلفية القناع (قيمة CSS background)	string	—
zIndex	مستوى الطبقة	number	—
spinner	إظهار الأيقونة الدوّارة	boolean	true
sx	خصائص التخطيط السريع sx	LhSxProps	—

الخدمة: LhLoading.show({ target?, text?, background?, lock?, spinner?, sx? }) تُرجِع { close }؛ وapp.use(LhLoading) يُسجِّل تعليمة v-loading.

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

• القناع role="status" + aria-busy="true"، ويُذاع النص التلميحي باعتباره aria-label
• عند تحديد حاوية، تتوفّر inert (تحسّن تدريجي) فتصبح الحاوية غير قابلة للوصول بلوحة المفاتيح والتقنيات المساعدة، لمنع التفاعل مع البيانات الأساسية
• lock يقفل التمرير ويُسترجع عند الإغلاق؛ وعند إغلاق القناع تُستعاد حالة وضبط الحاوية الأصلية
• تأثير الدوران يحترم prefers-reduced-motion

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

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

LhLoadingMaskProps

/** props مكوّن القناع (يُعرض داخليًا بواسطة الخدمة/التعليمة) */
export interface LhLoadingMaskProps {
  /** ملء الشاشة (true عندما الهدف هو body) */
  fullscreen?: boolean
  /** نص تلميح التحميل (عند عدم التمرير يُؤخذ من حزمة اللغة loading.text) */
  text?: string
  /** لون خلفية القناع (قيمة CSS background) */
  background?: string
  /** مستوى الطبقة */
  zIndex?: number
  /** إظهار الأيقونة الدوّارة (الافتراضي true) */
  spinner?: boolean
  sx?: LhSxProps
}

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

/** خيارات قناع التحميل (مشتركة بين الخدمة والتعليمة) */
export interface LhLoadingOptions {
  /** هدف التركيب: سلسلة مُحدِّد / عنصر؛ عند عدم التمرير يكون ملء الشاشة */
  target?: string | HTMLElement
  /** نص تلميح التحميل (عند عدم التمرير يُؤخذ من حزمة اللغة loading.text) */
  text?: string
  /** لون خلفية القناع (قيمة CSS background) */
  background?: string
  /** قفل التمرير (قناع ملء الشاشة يقفل body، وتحديد هدف يقفل تمرير الهدف نفسه) */
  lock?: boolean
  /** إظهار الأيقونة الدوّارة */
  spinner?: boolean
  sx?: LhSxProps
}

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

/** مقبض الخدمة */
export interface LhLoadingHandle {
  close: () => void
}