مربع حوار Dialog

مكوّن مربع حوار شرطي (modal)، يُستخدم لعرض معلومات مهمة أو تأكيد عملية.

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

vue

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

const dialogVisible1 = ref(false)
</script>

<template>
  <!-- الاستخدام الأساسي -->
  <LhButton @click="dialogVisible1 = true">فتح مربع الحوار</LhButton>
  <LhDialog v-model="dialogVisible1" title="تنبيه">
    <p>هذا محتوى مربع الحوار</p>
    <template #footer>
      <LhButton @click="dialogVisible1 = false">إلغاء</LhButton>
      <LhButton type="primary" @click="dialogVisible1 = false">تأكيد</LhButton>
    </template>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return {
      dialogVisible1: false
    }
  }
}
</script>

<template>
  <!-- الاستخدام الأساسي -->
  <LhButton @click="dialogVisible1 = true">فتح مربع الحوار</LhButton>
  <LhDialog v-model="dialogVisible1" title="تنبيه">
    <p>هذا محتوى مربع الحوار</p>
    <template #footer>
      <LhButton @click="dialogVisible1 = false">إلغاء</LhButton>
      <LhButton type="primary" @click="dialogVisible1 = false">تأكيد</LhButton>
    </template>
  </LhDialog>
</template>

عرض وارتفاع مخصصان

vue

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

const dialogVisible2 = ref(false)
</script>

<template>
  <!-- عرض وارتفاع مخصصان -->
  <LhButton @click="dialogVisible2 = true">فتح مربع حوار كبير</LhButton>
  <LhDialog v-model="dialogVisible2" title="مربع حوار كبير" width="600px">
    <p>مربع حوار بأبعاد مخصصة</p>
    <template #footer>
      <LhButton @click="dialogVisible2 = false">إغلاق</LhButton>
    </template>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return {
      dialogVisible2: false
    }
  }
}
</script>

<template>
  <!-- عرض وارتفاع مخصصان -->
  <LhButton @click="dialogVisible2 = true">فتح مربع حوار كبير</LhButton>
  <LhDialog v-model="dialogVisible2" title="مربع حوار كبير" width="600px">
    <p>مربع حوار بأبعاد مخصصة</p>
    <template #footer>
      <LhButton @click="dialogVisible2 = false">إغلاق</LhButton>
    </template>
  </LhDialog>
</template>

قابل للسحب

vue

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

const dialogVisible3 = ref(false)
</script>

<template>
  <!-- قابل للسحب -->
  <LhButton @click="dialogVisible3 = true">فتح مربع حوار قابل للسحب</LhButton>
  <LhDialog v-model="dialogVisible3" title="مربع حوار قابل للسحب" draggable>
    <p>يمكن تحريك مربع الحوار هذا بسحب شريط العنوان.</p>
    <template #footer>
      <LhButton @click="dialogVisible3 = false">إغلاق</LhButton>
    </template>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return {
      dialogVisible3: false
    }
  }
}
</script>

<template>
  <!-- قابل للسحب -->
  <LhButton @click="dialogVisible3 = true">فتح مربع حوار قابل للسحب</LhButton>
  <LhDialog v-model="dialogVisible3" title="مربع حوار قابل للسحب" draggable>
    <p>يمكن تحريك مربع الحوار هذا بسحب شريط العنوان.</p>
    <template #footer>
      <LhButton @click="dialogVisible3 = false">إغلاق</LhButton>
    </template>
  </LhDialog>
</template>

سمة مخصصة

تطبيق لون سمة مخصص على مربع الحوار.

vue

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

const dialogThemeVisible = ref(false)
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- سمة الخزف الأزرق -->
    <LhButton @click="dialogThemeVisible = true" type="primary">فتح مربع الحوار المُنسَّق</LhButton>
    <LhDialog v-model="dialogThemeVisible" title="سمة الخزف الأزرق">
      <p>يستخدم هذا مربع الحوار لون سمة الخزف الأزرق</p>
      <template #footer>
        <LhButton @click="dialogThemeVisible = false">إغلاق</LhButton>
      </template>
    </LhDialog>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton, LhDialog },
  data() {
    return {
      dialogThemeVisible: false,
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- سمة الخزف الأزرق -->
    <LhButton @click="dialogThemeVisible = true" type="primary">فتح مربع الحوار المُنسَّق</LhButton>
    <LhDialog v-model="dialogThemeVisible" title="سمة الخزف الأزرق">
      <p>يستخدم هذا مربع الحوار لون سمة الخزف الأزرق</p>
      <template #footer>
        <LhButton @click="dialogThemeVisible = false">إغلاق</LhButton>
      </template>
    </LhDialog>
  </LhConfigProvider>
</template>

لمزيد من السمات راجع تخصيص السمات.

التخطيط السريع sx

من خلال خاصية sx يمكن ضبط أبعاد Dialog وهامشه بسرعة.

vue

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

const visible = ref(false)
</script>

<template>
  <!-- فتح مربع الحوار -->
  <LhButton @click="visible = true">فتح مربع الحوار</LhButton>
  <!-- مربع حوار بتخطيط sx -->
  <LhDialog v-model="visible" title="تخطيط sx" :sx="{ maxWidth: 400 }">
    <p>تم ضبط الحد الأقصى للعرض</p>
    <template #footer>
      <LhButton @click="visible = false">إلغاء</LhButton>
    </template>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return { visible: false }
  },
}
</script>

<template>
  <!-- فتح مربع الحوار -->
  <LhButton @click="visible = true">فتح مربع الحوار</LhButton>
  <!-- مربع حوار بتخطيط sx -->
  <LhDialog v-model="visible" title="تخطيط sx" :sx="{ maxWidth: 400 }">
    <p>تم ضبط الحد الأقصى للعرض</p>
    <template #footer>
      <LhButton @click="visible = false">إلغاء</LhButton>
    </template>
  </LhDialog>
</template>

التدويل

يمكن تحقيق التدويل لنصوص مربع الحوار عبر LhConfigProvider مع حزمة اللغة.

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhButton, LhDialog, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const i18nVisible = ref(false)
const messages = computed(() => (locale.value === 'zh-CN' ? zhCN : enUS))
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- فتح مربع الحوار -->
    <LhButton @click="i18nVisible = true">
      {{ locale === 'zh-CN' ? '打开对话框' : 'Open Dialog' }}
    </LhButton>
    <!-- مربع حوار مُدوَل -->
    <LhDialog v-model="i18nVisible" :title="locale === 'zh-CN' ? '提示' : 'Notice'">
      <p>{{ locale === 'zh-CN' ? '对话框内容' : 'Dialog content' }}</p>
      <template #footer>
        <LhButton @click="i18nVisible = false">
          {{ locale === 'zh-CN' ? '取消' : 'Cancel' }}
        </LhButton>
      </template>
    </LhDialog>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton, LhDialog, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton, LhDialog },
  data() {
    return {
      locale: 'zh-CN',
      i18nVisible: false,
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- فتح مربع الحوار -->
    <LhButton @click="i18nVisible = true">
      {{ locale === 'zh-CN' ? '打开对话框' : 'Open Dialog' }}
    </LhButton>
    <!-- مربع حوار مُدوَل -->
    <LhDialog v-model="i18nVisible" :title="locale === 'zh-CN' ? '提示' : 'Notice'">
      <p>{{ locale === 'zh-CN' ? '对话框内容' : 'Dialog content' }}</p>
      <template #footer>
        <LhButton @click="i18nVisible = false">
          {{ locale === 'zh-CN' ? '取消' : 'Cancel' }}
        </LhButton>
      </template>
    </LhDialog>
  </LhConfigProvider>
</template>

مفاتيح السلوك

vue

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

const dialogAdv1 = ref(false)
const dialogAdv2 = ref(false)
const dialogAdv3 = ref(false)

function handleAdvBeforeClose(done: () => void) {
  setTimeout(done, 500)
}
</script>

<template>
  <!-- إغلاق بالزر فقط -->
  <LhButton @click="dialogAdv1 = true">إغلاق بالزر فقط</LhButton>
  <LhDialog
    v-model="dialogAdv1"
    title="إغلاق بالزر فقط"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <p>إخفاء زر الإغلاق في الزاوية العلوية اليسرى، ولن يؤدي النقر على الطبقة المعتمة أو الضغط على ESC إلى الإغلاق، ولا يكون الإغلاق إلا عبر الزر السفلي.</p>
    <template #footer>
      <LhButton type="primary" @click="dialogAdv1 = false">فهمت</LhButton>
    </template>
  </LhDialog>
  <!-- بدون قفل التمرير -->
  <LhButton @click="dialogAdv2 = true">بدون قفل التمرير</LhButton>
  <LhDialog v-model="dialogAdv2" title="بدون قفل التمرير" :lock-scroll="false">
    <p>تبقى الصفحة قابلة للتمرير أثناء فتح مربع الحوار، وهو مناسب للتنبيهات الخفيفة قصيرة المحتوى.</p>
  </LhDialog>
  <!-- إغلاق غير متزامن -->
  <LhButton @click="dialogAdv3 = true">إغلاق غير متزامن</LhButton>
  <LhDialog v-model="dialogAdv3" title="إغلاق غير متزامن" :before-close="handleAdvBeforeClose">
    <p>بعد النقر على زر الإغلاق في الزاوية العلوية اليسرى أو على الطبقة المعتمة أو الضغط على ESC، يتأخر الإغلاق الفعلي 500 مللي ثانية (محاكاة للتحقق قبل الإغلاق).</p>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return {
      dialogAdv1: false,
      dialogAdv2: false,
      dialogAdv3: false,
    }
  },
  methods: {
    handleAdvBeforeClose(done) {
      setTimeout(done, 500)
    },
  },
}
</script>

<template>
  <!-- إغلاق بالزر فقط -->
  <LhButton @click="dialogAdv1 = true">إغلاق بالزر فقط</LhButton>
  <LhDialog
    v-model="dialogAdv1"
    title="إغلاق بالزر فقط"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <p>إخفاء زر الإغلاق في الزاوية العلوية اليسرى، ولن يؤدي النقر على الطبقة المعتمة أو الضغط على ESC إلى الإغلاق، ولا يكون الإغلاق إلا عبر الزر السفلي.</p>
    <template #footer>
      <LhButton type="primary" @click="dialogAdv1 = false">فهمت</LhButton>
    </template>
  </LhDialog>
  <!-- بدون قفل التمرير -->
  <LhButton @click="dialogAdv2 = true">بدون قفل التمرير</LhButton>
  <LhDialog v-model="dialogAdv2" title="بدون قفل التمرير" :lock-scroll="false">
    <p>تبقى الصفحة قابلة للتمرير أثناء فتح مربع الحوار، وهو مناسب للتنبيهات الخفيفة قصيرة المحتوى.</p>
  </LhDialog>
  <!-- إغلاق غير متزامن -->
  <LhButton @click="dialogAdv3 = true">إغلاق غير متزامن</LhButton>
  <LhDialog v-model="dialogAdv3" title="إغلاق غير متزامن" :before-close="handleAdvBeforeClose">
    <p>بعد النقر على زر الإغلاق في الزاوية العلوية اليسرى أو على الطبقة المعتمة أو الضغط على ESC، يتأخر الإغلاق الفعلي 500 مللي ثانية (محاكاة للتحقق قبل الإغلاق).</p>
  </LhDialog>
</template>

الموضع والطبقة

vue

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

const dialogAdv4 = ref(false)
const dialogAdv5 = ref(false)
const dialogAdv6 = ref(false)
const dialogAdv7 = ref(false)
</script>

<template>
  <!-- ملء الشاشة -->
  <LhButton @click="dialogAdv4 = true">ملء الشاشة</LhButton>
  <LhDialog v-model="dialogAdv4" title="مربع حوار ملء الشاشة" fullscreen>
    <p>عند تفعيل fullscreen يملأ مربع الحوار إطار العرض بالكامل.</p>
  </LhDialog>
  <!-- الموضع السفلي -->
  <LhButton @click="dialogAdv5 = true">موضع سفلي</LhButton>
  <LhDialog v-model="dialogAdv5" title="موضع سفلي" position="bottom">
    <p>عندما يكون position بقيمة bottom يُعرض مربع الحوار قرب الحافة السفلية لإطار العرض.</p>
  </LhDialog>
  <!-- إزاحة علوية + طبقة -->
  <LhButton @click="dialogAdv6 = true">إزاحة علوية + طبقة</LhButton>
  <LhDialog v-model="dialogAdv6" title="إزاحة علوية + طبقة" position="top" top="10vh" :z-index="3000">
    <p>يضبط top المسافة عن الحافة العلوية لإطار العرض، ويتحكم z-index في ترتيب الطبقات.</p>
  </LhDialog>
  <!-- توسيط المحتوى -->
  <LhButton @click="dialogAdv7 = true">توسيط المحتوى (center)</LhButton>
  <LhDialog v-model="dialogAdv7" title="توسيط المحتوى" center>
    <p>يجعل center العنوان والمحتوى في المنتصف (للتوافق مع الإصدارات القديمة، ويُوصى باستخدام position في الشيفرة الجديدة).</p>
    <template #footer>
      <LhButton @click="dialogAdv7 = false">إلغاء</LhButton>
      <LhButton type="primary" @click="dialogAdv7 = false">تأكيد</LhButton>
    </template>
  </LhDialog>
</template>

vue

<script>
import { LhButton, LhDialog } from '@lh-ui/vue3'

export default {
  components: { LhButton, LhDialog },
  data() {
    return {
      dialogAdv4: false,
      dialogAdv5: false,
      dialogAdv6: false,
      dialogAdv7: false,
    }
  },
}
</script>

<template>
  <!-- ملء الشاشة -->
  <LhButton @click="dialogAdv4 = true">ملء الشاشة</LhButton>
  <LhDialog v-model="dialogAdv4" title="مربع حوار ملء الشاشة" fullscreen>
    <p>عند تفعيل fullscreen يملأ مربع الحوار إطار العرض بالكامل.</p>
  </LhDialog>
  <!-- الموضع السفلي -->
  <LhButton @click="dialogAdv5 = true">موضع سفلي</LhButton>
  <LhDialog v-model="dialogAdv5" title="موضع سفلي" position="bottom">
    <p>عندما يكون position بقيمة bottom يُعرض مربع الحوار قرب الحافة السفلية لإطار العرض.</p>
  </LhDialog>
  <!-- إزاحة علوية + طبقة -->
  <LhButton @click="dialogAdv6 = true">إزاحة علوية + طبقة</LhButton>
  <LhDialog v-model="dialogAdv6" title="إزاحة علوية + طبقة" position="top" top="10vh" :z-index="3000">
    <p>يضبط top المسافة عن الحافة العلوية لإطار العرض، ويتحكم z-index في ترتيب الطبقات.</p>
  </LhDialog>
  <!-- توسيط المحتوى -->
  <LhButton @click="dialogAdv7 = true">توسيط المحتوى (center)</LhButton>
  <LhDialog v-model="dialogAdv7" title="توسيط المحتوى" center>
    <p>يجعل center العنوان والمحتوى في المنتصف (للتوافق مع الإصدارات القديمة، ويُوصى باستخدام position في الشيفرة الجديدة).</p>
    <template #footer>
      <LhButton @click="dialogAdv7 = false">إلغاء</LhButton>
      <LhButton type="primary" @click="dialogAdv7 = false">تأكيد</LhButton>
    </template>
  </LhDialog>
</template>

واجهة برمجة تطبيقات Dialog

الخصائص

الخاصية	الوصف	النوع	الافتراضي
modelValue	ما إذا كان مربع الحوار ظاهرًا	`boolean`	`false`
title	عنوان مربع الحوار	`string`	`''`
width	عرض مربع الحوار	`string \| number`	`'480px'`
fullscreen	ما إذا كان يملأ الشاشة	`boolean`	`false`
showClose	ما إذا كان زر الإغلاق يُعرض	`boolean`	`true`
closeOnClickModal	ما إذا كان النقر على الطبقة المعتمة يُغلق	`boolean`	`true`
closeOnPressEscape	ما إذا كان الضغط على ESC يُغلق	`boolean`	`true`
draggable	ما إذا كان قابلًا للسحب	`boolean`	`false`
center	ما إذا كان يُعرض في المنتصف (للتوافق مع الإصدارات القديمة، يُوصى باستخدام position)	`boolean`	`false`
position	موضع مربع الحوار: top / center / bottom	`"top" \| "center" \| "bottom"`	`'center'`
lockScroll	ما إذا كان التمرير مقفولًا	`boolean`	`true`
beforeClose	استدعاء قبل الإغلاق	`(done: () => void) => void`	—
top	المسافة العلوية (px)	`string`	`'15vh'`
zIndex	z-index	`number`	—
themeVars	متغيرات السمة على مستوى المكوّن، تتجاوز إعدادات ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	نمط الخلفية على مستوى المكوّن، يتجاوز إعدادات ConfigProvider	`string`	—
sx	خصائص التخطيط السريع sx	`LhSxProps`	—

الأحداث

الحدث	الوصف	معاملات الاستدعاء
update:modelValue	تغيّر حالة الظهور	`(value: boolean)`
open	انتهاء حركة الفتح	—
close	انتهاء حركة الإغلاق	—
opened	يُطلق بعد فتح مربع الحوار بالكامل	—
closed	يُطلق بعد إغلاق مربع الحوار بالكامل	—

الفتحات

اسم الفتحة	الوصف
default	محتوى مربع الحوار
header	منطقة عنوان مربع الحوار
footer	منطقة أسفل مربع الحوار

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

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

LhDialogProps

/**
 * خاصيات مكوّن Dialog
 */
export interface LhDialogProps {
  /** ما إذا كان ظاهرًا */
  modelValue?: boolean
  /** العنوان */
  title?: string
  /** العرض */
  width?: string | number
  /** ما إذا كان يملأ الشاشة */
  fullscreen?: boolean
  /** ما إذا كان زر الإغلاق يُعرض */
  showClose?: boolean
  /** ما إذا كان النقر على الطبقة المعتمة يُغلق */
  closeOnClickModal?: boolean
  /** ما إذا كان الضغط على ESC يُغلق */
  closeOnPressEscape?: boolean
  /** ما إذا كان قابلًا للسحب */
  draggable?: boolean
  /** ما إذا كان يُعرض في المنتصف (للتوافق مع الإصدارات القديمة، يُوصى باستخدام position) */
  center?: boolean
  /** موضع مربع الحوار: top / center / bottom */
  position?: 'top' | 'center' | 'bottom'
  /** ما إذا كان التمرير مقفولًا */
  lockScroll?: boolean
  /** استدعاء قبل الإغلاق */
  beforeClose?: (done: () => void) => void
  /** المسافة العلوية (px) */
  top?: string
  /** z-index */
  zIndex?: number
  /** متغيرات السمة على مستوى المكوّن، تتجاوز إعدادات ConfigProvider */
  themeVars?: Record<string, string>
  /** نمط الخلفية على مستوى المكوّن، يتجاوز إعدادات ConfigProvider */
  bgPattern?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

مربع حوار Dialog ​

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

عرض وارتفاع مخصصان ​

قابل للسحب ​

سمة مخصصة ​

التخطيط السريع sx ​

التدويل ​

مفاتيح السلوك ​

الموضع والطبقة ​

واجهة برمجة تطبيقات Dialog ​

الخصائص ​

الأحداث ​

الفتحات ​

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