مربع اختيار Checkbox

يدعم LhCheckbox قيمة منطقية مستقلة، بينما يدعم LhCheckboxGroup قيمة مصفوفة لخيارات متعددة.

استخدام مستقل

استخدام مستقل

لقد قرأت وأوافق

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

const accepted = ref(false)
</script>

<template>
  <LhCheckbox v-model="accepted" label="لقد قرأت وأوافق" />
</template>

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

export default {
  components: { LhCheckbox },
  data() {
    return {
      accepted: false
    }
  }
}
</script>

<template>
  <LhCheckbox v-model="accepted" label="لقد قرأت وأوافق" />
</template>

استخدام مجمّع

استخدام مجمّع

VueReactSvelte

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

const selected = ref(['vue'])
</script>

<template>
  <LhCheckboxGroup v-model="selected" name="framework">
    <LhCheckbox value="vue" label="Vue" />
    <LhCheckbox value="react" label="React" />
    <LhCheckbox value="svelte" label="Svelte" />
  </LhCheckboxGroup>
</template>

<script>
import { LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'

export default {
  components: { LhCheckbox, LhCheckboxGroup },
  data() {
    return {
      selected: ['vue']
    }
  }
}
</script>

<template>
  <LhCheckboxGroup v-model="selected" name="framework">
    <LhCheckbox value="vue" label="Vue" />
    <LhCheckbox value="react" label="React" />
    <LhCheckbox value="svelte" label="Svelte" />
  </LhCheckboxGroup>
</template>

سمة مخصصة

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

سمة 青花瓷 (الخزف الأزرق)

خيار 1خيار 2

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

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

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="option1" label="خيار 1" />
      <LhCheckbox value="option2" label="خيار 2" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

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

export default {
  components: { LhConfigProvider, LhCheckbox, LhCheckboxGroup },
  data() {
    return {
      selected: ['option1'],
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="option1" label="خيار 1" />
      <LhCheckbox value="option2" label="خيار 2" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

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

التدويل

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

التدويل

Vue框架React框架

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

const locale = ref('zh-CN')
const selected = ref(['vue'])
</script>

<template>
  <!-- تكوين حزمة اللغة -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhCheckbox value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

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

export default {
  components: { LhConfigProvider, LhCheckbox, LhCheckboxGroup },
  data() {
    return {
      locale: 'zh-CN',
      selected: ['vue'],
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- تكوين حزمة اللغة -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhCheckbox value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

التعطيل والاختيار الجزئي والحجم

يُعطَّل مربع الاختيار المستقل عبر disabled، وتُعرض حالة الاختيار الجزئي عبر indeterminate، ويُضبط الحجم عبر size؛ أما المجموعة فيُعطَّل أفرادها جميعًا عبر disabled، ويُوحَّد حجمها الداخلي عبر size.

التعطيل والاختيار الجزئي والحجم

حالة التعطيلحالة الاختيار الجزئيsmalllarge

خيار Aخيار B

خيار Aخيار B

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

const demoCbDisabled = ref(true)
const demoCbIndeterminate = ref(false)
const demoIndeterminate = ref(true)
const demoCbSmall = ref(false)
const demoCbLarge = ref(false)
const demoCbGroupDisabled = ref<string[]>([])
const demoCbGroupSize = ref<string[]>([])
</script>

<template>
  <!-- تعطيل -->
  <LhCheckbox v-model="demoCbDisabled" disabled label="حالة التعطيل" />
  <!-- اختيار جزئي -->
  <LhCheckbox v-model="demoCbIndeterminate" :indeterminate="demoIndeterminate" label="حالة الاختيار الجزئي" />
  <!-- حجم صغير -->
  <LhCheckbox v-model="demoCbSmall" size="small" label="small" />
  <!-- حجم كبير -->
  <LhCheckbox v-model="demoCbLarge" size="large" label="large" />
  <!-- تعطيل المجموعة بأكملها -->
  <LhCheckboxGroup v-model="demoCbGroupDisabled" disabled>
    <LhCheckbox value="a" label="خيار A" />
    <LhCheckbox value="b" label="خيار B" />
  </LhCheckboxGroup>
  <!-- حجم كبير موحَّد داخل المجموعة -->
  <LhCheckboxGroup v-model="demoCbGroupSize" size="large">
    <LhCheckbox value="a" label="خيار A" />
    <LhCheckbox value="b" label="خيار B" />
  </LhCheckboxGroup>
</template>

<script>
export default {
  data() {
    return {
      demoCbDisabled: true,
      demoCbIndeterminate: false,
      demoIndeterminate: true,
      demoCbSmall: false,
      demoCbLarge: false,
      demoCbGroupDisabled: [],
      demoCbGroupSize: [],
    }
  },
}
</script>

<template>
  <!-- تعطيل -->
  <LhCheckbox v-model="demoCbDisabled" disabled label="حالة التعطيل" />
  <!-- اختيار جزئي -->
  <LhCheckbox v-model="demoCbIndeterminate" :indeterminate="demoIndeterminate" label="حالة الاختيار الجزئي" />
  <!-- حجم صغير -->
  <LhCheckbox v-model="demoCbSmall" size="small" label="small" />
  <!-- حجم كبير -->
  <LhCheckbox v-model="demoCbLarge" size="large" label="large" />
  <!-- تعطيل المجموعة بأكملها -->
  <LhCheckboxGroup v-model="demoCbGroupDisabled" disabled>
    <LhCheckbox value="a" label="خيار A" />
    <LhCheckbox value="b" label="خيار B" />
  </LhCheckboxGroup>
  <!-- حجم كبير موحَّد داخل المجموعة -->
  <LhCheckboxGroup v-model="demoCbGroupSize" size="large">
    <LhCheckbox value="a" label="خيار A" />
    <LhCheckbox value="b" label="خيار B" />
  </LhCheckboxGroup>
</template>

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

خصائص LhCheckbox

الخاصية	الوصف	النوع	الافتراضي
modelValue	حالة الاختيار في الوضع المستقل	boolean	false
value	القيمة المُقدَّمة في الوضع المجمّع	unknown	—
label	نص الملصق	string	—
disabled	ما إذا كان معطّلًا	boolean	false
indeterminate	ما إذا كانت حالة اختيار جزئي	boolean	false
name	—	string	—
size	الحجم	"small" | "medium" | "large"	'medium'
sx	خصائص التخطيط السريع sx	LhSxProps	—

خصائص LhCheckboxGroup

الخاصية	الوصف	النوع	الافتراضي
model-value	حالة الاختيار في الوضع المستقل	unknown[]	[]
disabled	ما إذا كان المجموعة معطّلة بأكملها	boolean	false
name	اسم النموذج الأصلي	string	—
size	حجم مربعات الاختيار داخل المجموعة	'small' | 'medium' | 'large'	'medium'

الأحداث

الحدث	الوصف	المعاملات
update:modelValue	تتغيّر القيمة	value: boolean أو value[]
change	يتغيّر الاختيار	value

الفتحات

الفتحة	الوصف
default	محتوى مخصص

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

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

LhCheckboxSize

export type LhCheckboxSize = 'small' | 'medium' | 'large'

LhCheckboxProps

export interface LhCheckboxProps {
  modelValue?: boolean
  value?: unknown
  label?: string
  disabled?: boolean
  indeterminate?: boolean
  name?: string
  size?: LhCheckboxSize
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhCheckboxGroupProps

export interface LhCheckboxGroupProps {
  modelValue?: unknown[]
  disabled?: boolean
  name?: string
  size?: LhCheckboxSize
}