Skip to content

مربع اختيار Checkbox ​

مرسوم عبر view على طرف البرنامج المصغر

لا يُستخدم مكوّن checkbox الأصلي (لأن أنماطه غير قابلة للتحكم في MP)، بل يُرسَم مربع العلامة عبر view مع أيقونة lh-icon، بما يضمن التوافق البصري مع بقية منصات العائلة.

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

vue
<template>
  <lh-checkbox v-model="checked" label="الموافقة على الاتفاقية" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>

مجموعة مربعات الاختيار ​

vue
<template>
  <lh-checkbox-group v-model="values">
    <lh-checkbox value="a" label="الخيار الأول" />
    <lh-checkbox value="b" label="الخيار الثاني" />
    <lh-checkbox value="c" label="الخيار الثالث" disabled />
  </lh-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const values = ref(['a'])
</script>

حالة نصف التحديد ​

vue
<lh-checkbox v-model="checked" indeterminate label="تحديد الكل (محدد جزئيًا)" />

Checkbox Props ​

الخاصيةالوصفالنوعالافتراضي
modelValue (v-model)محدد أم لاbooleanfalse
valueالقيمة المعرّفة داخل groupunknown—
labelالنصstring—
disabledمعطّلbooleanfalse
indeterminateحالة غير محدد (نصف التحديد)booleanfalse
namename الأصليstring—
sizeالحجم'small' | 'medium' | 'large'—
customClassصنف مخصّصstring—
sxخصائص تخطيط سريعةLhSxProps—

CheckboxGroup Props ​

الخاصيةالوصفالنوعالافتراضي
modelValue (v-model)مصفوفة القيم المحددةunknown[][]
disabledتعطيل كل العناصر الفرعيةbooleanfalse
namename الأصليstring—
sizeالحجم (يُمرَّر إلى العناصر الفرعية)'small' | 'medium' | 'large'—

Events ​

الحدثالوصفمعامل الاستدعاء
update:modelValueتغيّر القيمة(value)
changeتغيّر القيمة(value)