Таңдау

Floating label, teleported menu және click-catcher overlay бар select.

Орнату

npx alixan-ui-nuxt add select

Қолдану

Design

<script setup lang="ts">
const value = ref('alixan')
const options = [
  { label: 'Alixan UI', value: 'alixan' },
  { label: 'Cupertino', value: 'cupertino' },
  { label: 'Material', value: 'material', disabled: true },
]
</script>

<template>
  <Select v-model="value" label="Design" :options="options" />
</template>

Валидация

Design

<script setup lang="ts">
const value = ref(null)
const options = [
  { label: 'Alixan UI', value: 'alixan' },
  { label: 'Cupertino', value: 'cupertino' },
  { label: 'Material', value: 'material', disabled: true },
]
</script>

<template>
  <Select v-model="value" label="Design" :options="options" required />
</template>

API анықтамасы

Қасиет	Түрі	Әдепкі	Сипаттама
modelValue	string \| number \| null	null	v-model арқылы қолданылатын таңдалған option мәні.
label	string	-	Floating label мәтіні.
placeholder	string	'Select option'	Option таңдалмаған кезде көрсетілетін мәтін.
options	SelectOption[]	[]	Label, value және optional disabled бар options тізімі.
disabled	boolean	false	Select-пен әрекеттесуді өшіреді.
teleport	boolean	true	Menu-ды body ішіне teleport етеді. Nested popovers үшін true қалдырыңыз; menu local layout ішінде қалуы керек болса ғана false қойыңыз.
required	boolean	false	Option таңдалмаса, міндетті өріс хабарын көрсетеді.
error	string	''	Select-пен әрекеттескеннен кейін көрсетілетін сыртқы валидация хабары.