منتقي Select

يُستخدم LhSelect لاختيار قيمة من قائمة خيارات، ويدعم تعطيل الخيارات والمسح والعمليات بلوحة المفاتيح.

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

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

بيجينغ⌄

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

const selectedCity = ref('beijing')
const cityOptions = [
  { label: 'بيجينغ', value: 'beijing' },
  { label: 'شنغهاي', value: 'shanghai' },
  { label: 'شنتشن', value: 'shenzhen' },
]
</script>

<template>
  <!-- الاستخدام الأساسي -->
  <LhSelect v-model="selectedCity" :options="cityOptions" placeholder="اختر مدينة" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      selectedCity: 'beijing',
      cityOptions: [
        { label: 'بيجينغ', value: 'beijing' },
        { label: 'شنغهاي', value: 'shanghai' },
        { label: 'شنتشن', value: 'shenzhen' },
      ],
    }
  },
}
</script>

<template>
  <!-- الاستخدام الأساسي -->
  <LhSelect v-model="selectedCity" :options="cityOptions" placeholder="اختر مدينة" />
</template>

قابل للمسح ومعطَّل

قابل للمسح ومعطَّل

اختر منطقة⌄

شمال الصين⌄

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

const selectedRegion = ref('')
const selectedDisabled = ref('north')
const regionOptions = [
  { label: 'شمال الصين', value: 'north' },
  { label: 'شرق الصين', value: 'east' },
  { label: 'جنوب الصين', value: 'south' },
]
const disabledOptions = [
  { label: 'شمال الصين', value: 'north', disabled: true },
  { label: 'شرق الصين', value: 'east' },
  { label: 'جنوب الصين', value: 'south' },
]
</script>

<template>
  <!-- قابل للمسح -->
  <LhSelect v-model="selectedRegion" :options="regionOptions" clearable placeholder="اختر منطقة" />
  <!-- معطَّل -->
  <LhSelect v-model="selectedDisabled" :options="disabledOptions" disabled placeholder="معطَّل" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      selectedRegion: '',
      selectedDisabled: 'north',
      regionOptions: [
        { label: 'شمال الصين', value: 'north' },
        { label: 'شرق الصين', value: 'east' },
        { label: 'جنوب الصين', value: 'south' },
      ],
      disabledOptions: [
        { label: 'شمال الصين', value: 'north', disabled: true },
        { label: 'شرق الصين', value: 'east' },
        { label: 'جنوب الصين', value: 'south' },
      ],
    }
  },
}
</script>

<template>
  <!-- قابل للمسح -->
  <LhSelect v-model="selectedRegion" :options="regionOptions" clearable placeholder="اختر منطقة" />
  <!-- معطَّل -->
  <LhSelect v-model="selectedDisabled" :options="disabledOptions" disabled placeholder="معطَّل" />
</template>

سمة مخصَّصة

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

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

بيجينغ⌄

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

const selectedTheme = ref('beijing')
const cityOptions = [
  { label: 'بيجينغ', value: 'beijing' },
  { label: 'شنغهاي', value: 'shanghai' },
]
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- سمة الخزف الأزرق -->
    <LhSelect v-model="selectedTheme" :options="cityOptions" placeholder="اختر" />
  </LhConfigProvider>
</template>

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

export default {
  components: { LhConfigProvider, LhSelect },
  data() {
    return {
      selectedTheme: 'beijing',
      cityOptions: [
        { label: 'بيجينغ', value: 'beijing' },
        { label: 'شنغهاي', value: 'shanghai' },
      ],
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- سمة الخزف الأزرق -->
    <LhSelect v-model="selectedTheme" :options="cityOptions" placeholder="اختر" />
  </LhConfigProvider>
</template>

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

التدويل

يمكن تدويل المنتقي عبر LhConfigProvider ودالة t.

التدويل

بيجينغ⌄

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhSelect, LhButton } 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('beijing')
const cityOptions = [
  { label: 'بيجينغ', value: 'beijing' },
  { label: 'شنغهاي', value: 'shanghai' },
  { label: 'شنتشن', value: 'shenzhen' },
]
const messages = computed(() => (locale.value === 'zh-CN' ? zhCN : enUS))
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- اختيار المدينة -->
    <LhSelect
      v-model="selected"
      :options="cityOptions"
      :placeholder="locale === 'zh-CN' ? '请选择城市' : 'Please select city'"
    />
    <!-- تبديل اللغة -->
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhSelect, LhButton } 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, LhSelect, LhButton },
  data() {
    return {
      locale: 'ar',
      selected: 'beijing',
      cityOptions: [
        { label: 'بيجينغ', value: 'beijing' },
        { label: 'شنغهاي', value: 'shanghai' },
        { label: 'شنتشن', value: 'shenzhen' },
      ],
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- اختيار المدينة -->
    <LhSelect
      v-model="selected"
      :options="cityOptions"
      :placeholder="locale === 'zh-CN' ? '请选择城市' : 'Please select city'"
    />
    <!-- تبديل اللغة -->
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

الحجم

الحجم

الخيار الأول⌄

الخيار الأول⌄

الخيار الأول⌄

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

const demoSizeSmall = ref('a')
const demoSizeMedium = ref('a')
const demoSizeLarge = ref('a')
const sizeOptions = [
  { label: 'الخيار الأول', value: 'a' },
  { label: 'الخيار الثاني', value: 'b' },
  { label: 'الخيار الثالث', value: 'c' },
]
</script>

<template>
  <!-- small -->
  <LhSelect v-model="demoSizeSmall" :options="sizeOptions" size="small" placeholder="small" />
  <!-- medium -->
  <LhSelect v-model="demoSizeMedium" :options="sizeOptions" size="medium" placeholder="medium" />
  <!-- large -->
  <LhSelect v-model="demoSizeLarge" :options="sizeOptions" size="large" placeholder="large" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      demoSizeSmall: 'a',
      demoSizeMedium: 'a',
      demoSizeLarge: 'a',
      sizeOptions: [
        { label: 'الخيار الأول', value: 'a' },
        { label: 'الخيار الثاني', value: 'b' },
        { label: 'الخيار الثالث', value: 'c' },
      ],
    }
  },
}
</script>

<template>
  <!-- small -->
  <LhSelect v-model="demoSizeSmall" :options="sizeOptions" size="small" placeholder="small" />
  <!-- medium -->
  <LhSelect v-model="demoSizeMedium" :options="sizeOptions" size="medium" placeholder="medium" />
  <!-- large -->
  <LhSelect v-model="demoSizeLarge" :options="sizeOptions" size="large" placeholder="large" />
</template>

إمكانية الوصول وحاوية التركيب

يُستخدم aria-label لوصف إمكانية الوصول، وname اسمًا للنموذج الأصلي، ويُحدِّد popper-container حاوية تركيب اللوحة المنسدلة.

إمكانية الوصول وحاوية التركيب

aria-label وname⌄

التركيب في body⌄

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

const demoA11y = ref('')
const demoContainer = ref('')
const sizeOptions = [
  { label: 'الخيار الأول', value: 'a' },
  { label: 'الخيار الثاني', value: 'b' },
  { label: 'الخيار الثالث', value: 'c' },
]
</script>

<template>
  <!-- aria-label وname -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="اختر مدينة" name="city" placeholder="aria-label وname" />
  <!-- التركيب في body -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="التركيب في body" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      demoA11y: '',
      demoContainer: '',
      sizeOptions: [
        { label: 'الخيار الأول', value: 'a' },
        { label: 'الخيار الثاني', value: 'b' },
        { label: 'الخيار الثالث', value: 'c' },
      ],
    }
  },
}
</script>

<template>
  <!-- aria-label وname -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="اختر مدينة" name="city" placeholder="aria-label وname" />
  <!-- التركيب في body -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="التركيب في body" />
</template>

Select API

Props

اسم الخاصية	الوصف	النوع	الافتراضي
modelValue	القيمة الحالية	unknown	—
options	قائمة الخيارات	[LhSelectOption](#type-LhSelectOption)[]	() => []
placeholder	النص النائب (عند عدم التمرير يُؤخذ من حزمة اللغة select.placeholder، بالصينية「请选择」)	string	''
disabled	هل يعطَّل	boolean	false
clearable	هل يُعرَض زر المسح	boolean	false
size	حجم المنتقي	"small" | "medium" | "large"	'medium'
name	—	string	—
ariaLabel	نص مساعد عند غياب التصنيف المرئي	string	—
popperContainer	—	string | HTMLElement	'body'
sx	خصائص التخطيط السريع sx	LhSxProps	—

Events

اسم الحدث	الوصف	وسائط الاستدعاء
update:modelValue	تغيّرت القيمة	value: unknown
change	تغيّر الاختيار	value, option
clear	نقر المسح	—

Option

type LhSelectOption = {
  label: string
  value: unknown
  disabled?: boolean
}

تُدعَم مفاتيح ArrowUp وArrowDown لتحريك العنصر المُبرَز، وEnter لتأكيد الاختيار، وEscape لإغلاق القائمة المنسدلة.

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

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

LhSelectSize

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

LhSelectProps

export interface LhSelectProps {
  modelValue?: unknown
  options?: LhSelectOption[]
  placeholder?: string
  disabled?: boolean
  clearable?: boolean
  size?: LhSelectSize
  name?: string
  ariaLabel?: string
  popperContainer?: 'body' | HTMLElement | string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

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

export interface LhSelectOption {
  label: string
  value: unknown
  disabled?: boolean
}

Slots

اسم الفتحة	الوصف	المحتوى الافتراضي
empty	محتوى الحالة الفارغة المخصَّص للوحة المنسدلة عند غياب الخيارات	حزمة اللغة select.noData (بالصينية「暂无数据」)