Dropdown Inline

This component is a customized dropdown that allows inline display with flexible iconography and loading indicators, ideal for seamless integration within various UI contexts.

This component is built on Vue 3 and leverages:

• Dropdown functionality from PrimeVue
• Icons and loading indicators through custom components or libraries

Example Usage

Example

In this example, we have two dropdowns with different options

Select an Option

And a little bit of text to see how it looks like with a little bit of text

Select an Option

Selected Option:

<template>
  <div>
    In this example, we have two dropdowns with different options
    <SkDropdownInline
      v-model="selectedOption"
      :options="options"
      option-label="label"
      option-value="value"
      placeholder="Select an Option"
      class=""
    />
    And a little bit of text to see how it looks like with a little bit of text
    <SkDropdownInline
      v-model="selectedOption"
      :options="options2"
      :loading="isLoading"
      option-label="label"
      option-value="value"
      placeholder="Select an Option"
      class=""
    />
  </div>
  <div>Selected Option: {{ selectedOption }}</div>
</template>

<script setup>
import { ref } from 'vue';

const selectedOption = ref(null);
const isLoading = ref(false);

const options = ref([
  { label: 'Mathematics', value: 'math' },
  { label: 'Science', value: 'sci' },
  { label: 'History', value: 'hist' },
  { label: 'English', value: 'eng' },
]);

const options2 = ref([
  { label: 'Art', value: 'art' },
  { label: 'Music', value: 'music' },
  { label: 'Physical Education', value: 'pe' },
  { label: 'Computer Science', value: 'cs' },
]);

// Example toggle loading state
setTimeout(() => {
  isLoading.value = true; // Simulate loading state for demonstration
  setTimeout(() => {
    isLoading.value = false; // Stop loading after 2 seconds
  }, 2000);
}, 1000);
</script>

<style scoped>
.mr-s {
  margin-right: 1rem;
}
.mb-l {
  margin-bottom: 2rem;
}
.mb-s {
  margin-bottom: 1rem;
}
</style>

Reference

This component supports all standard options from the PrimeVue dropdown component, with additional customization for inline display and icons.

Properties

Name	Type	Default	Description
v-model	Array	[]	The selected option(s)
options	Array	[]	List of options for the dropdown
loading	Boolean	false	Display a loading indicator instead of the dropdown arrow
indicator	string	undefined	Sets a new symbol for the dropdown based on the icon library

Events

Name	Parameters	Description
update:modelValue	$event	Triggered whenever the selected option changes
indicator-click	$event	Emitted when the indicator icon is clicked

The DropdownInline component offers a sleek, customizable dropdown experience tailored for modern web applications, supporting a wide range of customization options to fit seamlessly into any project's design system.