Dropdown

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

Dropdowns are constructed with two elements: <k-dropdown> is used as wrapper to position the dropdown relatively to the button (or any other element) that serves as toggle. <k-dropdown-content> holds any content shown when opening the dropdown: any number of <k-dropdown-item> elements or any other HTML.

Slots

Slot	Description
default

Example

<k-dropdown>
  <k-button @click="$refs.dropdown.toggle()">Menu</k-button>
  <k-dropdown-content ref="dropdown">
    <k-dropdown-item>Option A</k-dropdown-item>
    <k-dropdown-item>Option B</k-dropdown-item>
    <k-dropdown-item>Option C</k-dropdown-item>
  </k-dropdown-content>
</k-dropdown>

Items

as array

Instead of adding k-dropdown-item elements manually, you can also inject them with an array

<k-dropdown>
  <k-button @click="$refs.dropdown.toggle()">Menu</k-button>
  <k-dropdown-content
    ref="dropdown"
    :options="[
      {icon: 'edit', text: 'Option A', click: clickHandler},
      {icon: 'cog', text: 'Option B', click: clickHandler},
      {icon: 'trash', text: 'Option C', click: clickHandler}
    ]"
  />
</k-dropdown>

Using a Panel dropdown extension, you can simply reference it like this:

<k-dropdown-content options="my/custom/dropdown" />`

from an async function (e.g. API call)

The item array can also be returned in an options handler to dynamically load options

<template>
  <k-dropdown>
    <k-button @click="$refs.dropdown.toggle()">Menu</k-button>
    <k-dropdown-content ref="dropdown" :options="fetchOptions" />
  </k-dropdown>
</template>

<script>
export default {
  methods: {
    fetchOptions() {
      return (ready) => {
        this.$api.get("/some/options").then(options => {
          ready(options);
        });
      };
    }
  }
}
</script>

from an JSON API endpoint

Dropdown items can also be fetched from a JSON endpoint:

<k-dropdown>
  <k-button @click="$refs.dropdown.toggle()">Menu</k-button>
  <k-dropdown-content ref="dropdown" options="/api/options.json" />
</k-dropdown>

This will fetch the options only as soon as the dropdown will be opened.

CSS classes

.k-dropdown
.k-dropdown-content
.k-dropdown-item