زر اختيار Radio

يدعم LhRadio قيمة اختيار واحدة مستقلة، بينما يدعم LhRadioGroup تجميع عدة خيارات في اختيار واحد.

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

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

ذكرأنثى

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

const gender = ref('male')
</script>

<template>
  <LhRadio v-model="gender" value="male" label="ذكر" />
  <LhRadio v-model="gender" value="female" label="أنثى" />
</template>

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

export default {
  components: { LhRadio },
  data() {
    return {
      gender: 'male'
    }
  }
}
</script>

<template>
  <LhRadio v-model="gender" value="male" label="ذكر" />
  <LhRadio v-model="gender" value="female" label="أنثى" />
</template>

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

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

VueReactSvelte

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

const selectedFramework = ref('vue')
</script>

<template>
  <LhRadioGroup v-model="selectedFramework" name="framework">
    <LhRadio value="vue" label="Vue" />
    <LhRadio value="react" label="React" />
    <LhRadio value="svelte" label="Svelte" />
  </LhRadioGroup>
</template>

<script>
import { LhRadio, LhRadioGroup } from '@lh-ui/vue3'

export default {
  components: { LhRadio, LhRadioGroup },
  data() {
    return {
      selectedFramework: 'vue'
    }
  }
}
</script>

<template>
  <LhRadioGroup v-model="selectedFramework" name="framework">
    <LhRadio value="vue" label="Vue" />
    <LhRadio value="react" label="React" />
    <LhRadio value="svelte" label="Svelte" />
  </LhRadioGroup>
</template>

سمة مخصصة

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

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

الخيار الأولالخيار الثانيالخيار الثالث

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

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

<template>
  <!-- لون سمة الخزف الأزرق -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhRadioGroup v-model="selectedTheme">
      <LhRadio value="option1" label="الخيار الأول" />
      <LhRadio value="option2" label="الخيار الثاني" />
      <LhRadio value="option3" label="الخيار الثالث" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

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

export default {
  components: { LhConfigProvider, LhRadio, LhRadioGroup },
  data() {
    return {
      selectedTheme: 'option1',
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <!-- لون سمة الخزف الأزرق -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhRadioGroup v-model="selectedTheme">
      <LhRadio value="option1" label="الخيار الأول" />
      <LhRadio value="option2" label="الخيار الثاني" />
      <LhRadio value="option3" label="الخيار الثالث" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

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

التدويل

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

التدويل

Vue FrameworkReact Framework

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhRadio, LhRadioGroup } from '@lh-ui/vue3'
import ar from '@lh-ui/share/locales/lang/ar'
import enUS from '@lh-ui/share/locales/lang/en-US'

const locale = ref('ar')
const selected = ref('vue')
</script>

<template>
  <!-- حقن حزمة اللغة وفق اللغة الحالية -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhRadioGroup v-model="selected">
      <!-- النصوص تتبدّل مع اللغة -->
      <LhRadio value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhRadio value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhRadio, LhRadioGroup } from '@lh-ui/vue3'
import ar from '@lh-ui/share/locales/lang/ar'
import enUS from '@lh-ui/share/locales/lang/en-US'

export default {
  components: { LhConfigProvider, LhRadio, LhRadioGroup },
  data() {
    return {
      locale: 'ar',
      selected: 'vue',
      ar: ar,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- حقن حزمة اللغة وفق اللغة الحالية -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhRadioGroup v-model="selected">
      <!-- النصوص تتبدّل مع اللغة -->
      <LhRadio value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhRadio value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

التعطيل والأحجام

يُعطَّل زر الاختيار عبر disabled، ويُضبط حجمه عبر size؛ وتُعطَّل المجموعة كاملة عبر disabled على المستوى الجماعي، ويوحَّد حجم العناصر داخلها عبر size.

التعطيل والأحجام

خيار معطّلمعطّل ومختار

smalllarge

خيار Aخيار B

خيار Aخيار B

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

const demoRadioDisabled = ref('')
const demoRadioDisabled2 = ref('1')
const demoRadioSmall = ref('1')
const demoRadioLarge = ref('1')
const demoRadioGroupDisabled = ref('a')
const demoRadioGroupSize = ref('a')
</script>

<template>
  <!-- تعطيل -->
  <LhRadio v-model="demoRadioDisabled" value="1" disabled label="خيار معطّل" />
  <!-- معطّل ومختار -->
  <LhRadio v-model="demoRadioDisabled2" value="1" disabled label="معطّل ومختار" />
  <!-- الحجم small -->
  <LhRadio v-model="demoRadioSmall" value="1" size="small" label="small" />
  <!-- الحجم large -->
  <LhRadio v-model="demoRadioLarge" value="1" size="large" label="large" />
  <!-- تعطيل المجموعة كاملة -->
  <LhRadioGroup v-model="demoRadioGroupDisabled" disabled>
    <LhRadio value="a" label="خيار A" />
    <LhRadio value="b" label="خيار B" />
  </LhRadioGroup>
  <!-- توحيد الحجم large داخل المجموعة -->
  <LhRadioGroup v-model="demoRadioGroupSize" size="large">
    <LhRadio value="a" label="خيار A" />
    <LhRadio value="b" label="خيار B" />
  </LhRadioGroup>
</template>

<script>
import { LhRadio, LhRadioGroup } from '@lh-ui/vue3'

export default {
  components: { LhRadio, LhRadioGroup },
  data() {
    return {
      demoRadioDisabled: '',
      demoRadioDisabled2: '1',
      demoRadioSmall: '1',
      demoRadioLarge: '1',
      demoRadioGroupDisabled: 'a',
      demoRadioGroupSize: 'a',
    }
  },
}
</script>

<template>
  <!-- تعطيل -->
  <LhRadio v-model="demoRadioDisabled" value="1" disabled label="خيار معطّل" />
  <!-- معطّل ومختار -->
  <LhRadio v-model="demoRadioDisabled2" value="1" disabled label="معطّل ومختار" />
  <!-- الحجم small -->
  <LhRadio v-model="demoRadioSmall" value="1" size="small" label="small" />
  <!-- الحجم large -->
  <LhRadio v-model="demoRadioLarge" value="1" size="large" label="large" />
  <!-- تعطيل المجموعة كاملة -->
  <LhRadioGroup v-model="demoRadioGroupDisabled" disabled>
    <LhRadio value="a" label="خيار A" />
    <LhRadio value="b" label="خيار B" />
  </LhRadioGroup>
  <!-- توحيد الحجم large داخل المجموعة -->
  <LhRadioGroup v-model="demoRadioGroupSize" size="large">
    <LhRadio value="a" label="خيار A" />
    <LhRadio value="b" label="خيار B" />
  </LhRadioGroup>
</template>

Radio API

LhRadio Props

الخاصية	الوصف	النوع	الافتراضي
modelValue	قيمة الاختيار في الوضع المستقل	unknown	—
value	القيمة المُرسلة	unknown	—
label	نص التسمية	string	—
disabled	تعطيل	boolean	false
name	اسم النموذج الأصلي	string	—
size	الحجم	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
sx	خصائص التخطيط السريع sx	LhSxProps	—

LhRadioGroup Props

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

Events

الحدث	الوصف	الوسائط
update:modelValue	تتغير القيمة	value: unknown
change	يتغير الاختيار	value: unknown

Slots

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

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

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

LhRadioSize

export type LhRadioSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhRadioProps

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

LhRadioGroupProps

export interface LhRadioGroupProps {
  modelValue?: unknown
  disabled?: boolean
  name?: string
  size?: LhRadioSize
}