Dropdown Component

Usage

<template>
    <Dropdown placeholder="The Dropdown Label" :options="items" v-model="selectedItem"></Dropdown>
</template>

<script setup>
import { ref } from 'vue';
import { Dropdown } from 'wly-statamic-theme-extensions';

const items = [
    {
        value: 'bar',
        label: 'Bar',
    },
    {
        value: 'baz',
        label: 'Baz',
    },
];

const selectedItem = ref();
</script>

<style scoped>
.wte-dropdown {
    --wte-dropdown-padding-x: 10px;
    --wte-dropdown-toggle-padding-y: 10px;
    --wte-dropdown-toggle-background: #eee;
    --wte-dropdown-toggle-hover-background: #dfdfdf;
    --wte-dropdown-options-hover-background: #dfdfdf;
}
</style>

Example