Dropdown - Vue

Dropdown

ReactVueJS + CSS

Impor

SelectDropdown

Copy

<template>
  <SelectDropdown
    v-model="selected"
    :options="options"
    placeholder="Select..."
  />
</template>

<script setup>
import { ref } from 'vue';
import { SelectDropdown } from '@idds/vue';

const selected = ref('');
const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
];
</script>

BasicDropdown

Copy

<template>
  <BasicDropdown>
    <template #trigger>
      <button class="trigger-btn">Open Menu</button>
    </template>
    <template #content>
      <div class="content-panel">
        <p class="title">My Content</p>
        <p class="description">This is a basic dropdown content.</p>
      </div>
    </template>
  </BasicDropdown>
</template>

<script setup>
import { BasicDropdown } from '@idds/vue';
</script>

Contoh Penggunaan

Contoh 1 - SelectDropdown: Single

PreviewCode

Contoh 2 - SelectDropdown: Multiple

PreviewCode

Contoh 3 - SelectDropdown: Radio Indicator

PreviewCode

Contoh 4 - SelectDropdown: API Integration

PreviewCode

Contoh 5 - Dropdown: Basic Menu

PreviewCode

Props

SelectDropdown

Name	Type	Default	Required	Description
modelValue	any | any[]	—	Yes	Nilai yang terpilih (v-model).
options	SelectOption[]	—	Yes	Array of options untuk dropdown.
label?	string | Component | VNode	—	No	Label untuk dropdown.
placeholder?	string	—	No	Placeholder text untuk trigger.
size?	'sm' | 'md' | 'lg'	'md'	No	Ukuran dropdown.
indicator?	'check' | 'radio'	'check'	No	Tipe indicator untuk selected option.
multiple?	boolean	false	No	Apakah memungkinkan multiple selection.
searchable?	boolean	true	No	Apakah dropdown bisa di-search.
disabled?	boolean	false	No	Apakah komponen dalam mode readonly/disabled.
hasMore?	boolean	false	No	Apakah masih ada data yang bisa di-load (untuk infinite scroll).
loading?	boolean	false	No	Apakah sedang loading data (untuk infinite scroll).
currentPage?	number	—	No	Halaman saat ini (untuk infinite scroll).
onLoadMore?	(page: number) => void	—	No	Callback untuk load data halaman berikutnya.
onSearch?	(searchTerm: string) => void	—	No	Callback untuk search dengan debounce.
searchDebounceMs?	number	300	No	Delay untuk debounce search (ms).
searchValue?	string	—	No	Controlled search value (optional) - jika tidak disediakan, akan menggunakan internal state.
onSearchChange?	(searchTerm: string) => void	—	No	Callback untuk perubahan search value (optional) - untuk controlled mode.
@update:selectedRaw?	(selectedRaw: SelectOption | SelectOption[] | null) => void	—	No	Event yang dipanggil ketika selectedRaw berubah (berisi SelectOption object atau array). Single select mengembalikan SelectOption | null, multiple select mengembalikan SelectOption[] | null.
@selectedRawChange?	(selectedRaw: SelectOption | SelectOption[] | null) => void	—	No	Event yang dipanggil ketika selectedRaw berubah (berisi SelectOption object atau array). Single select mengembalikan SelectOption | null, multiple select mengembalikan SelectOption[] | null.
width?	number | string	'100%'	No	Lebar komponen.
panelWidth?	number | string	—	No	Lebar popup panel.
panelHeight?	number | string	600	No	Max height popup panel.
panelClassName?	string	''	No	ClassName tambahan untuk panel.
triggerClassName?	string	''	No	ClassName tambahan untuk trigger.
class?	string	''	No	HTML standard attribute `class` untuk container (fallthrough).
showPreviewValue?	boolean	true	No	Tampilkan preview selected value.
renderOptionLabel?	Function	—	No	Custom render label option.
renderSelectedPreview?	Function	—	No	Custom render selected preview.
prefixNode?	Component | VNode	—	No	Node sebelum label trigger.
onRemoveSelected?	(value: any) => void	—	No	Callback remove selected.

Dropdown

Name	Type	Default	Required	Description
trigger?	Component | VNode | string	—	No	Trigger element atau text untuk membuka dropdown.
triggerText?	string	'Dropdown'	No	Text untuk trigger jika tidak menggunakan slot trigger.
items?	(Component | VNode | string)[]	—	No	Array of items yang akan ditampilkan sebagai item dropdown.
class?	string	''	No	HTML standard attribute `class` untuk container trigger (fallthrough).
dropdownClassName?	string	''	No	ClassName tambahan untuk kotak dropdown.
dropdownStyle?	Record<string, any>	—	No	Inline style tambahan untuk kotak dropdown.
disabled?	boolean	false	No	Jika true, dropdown tidak bisa dibuka.
dropdownWidth?	number	160	No	Lebar dropdown dalam pixel.

Di halaman ini

• Impor
• Contoh Penggunaan
• Props