Dropdown

TkDropdown creates a dropdown with a trigger element. Items in the options prop can be listed and templated.

React
Vue
Angular

import { TkDropdown } from '@takeoff-ui/react'

import { TkDropdown } from '@takeoff-ui/vue'

import { TkDropdown } from '@takeoff-ui/angular'

Basic

Demonstrates how to open and close the dialog with simple content.

View Code

React
Vue
Angular

const options = [
  { label: "Lorem Ipsum", value: "1" },
  { label: "It is established", value: "2" },
  { label: "Many desktop", value: "3" },
];

return (
  <TkDropdown options={options}>
    <TkButton
      label="Select"
      icon="keyboard_arrow_down"
      iconPosition="right"
      slot="trigger"
    />
  </TkDropdown>
);

<script setup>
import { TkDropdown, TkButton } from '@takeoff-ui/vue';

const options = [
  { label: 'Lorem Ipsum', value: '1' },
  { label: 'It is established', value: '2' },
  { label: 'Many desktop', value: '3' },
];
</script>

<template>
  <div>
    <tk-dropdown :options.prop="options">
      <tk-button
        label="Select"
        icon="keyboard_arrow_down"
        icon-position="right"
        slot="trigger"
      />
    </tk-dropdown>
  </div>
</template>

<tk-dropdown [options]="[
    { label: 'Lorem Ipsum', value: '1' },
    { label: 'It is established', value: '2' },
    { label: 'Many desktop', value: '3' }
  ]">
    <tk-button
      label="Select"
      icon="keyboard_arrow_down"
      iconPosition="right"
      slot="trigger"
    />
  </tk-dropdown>

Position

This demo demonstrates how to use the position prop to determine the opening direction of the dropdown component. The position prop can accept the following values: bottom, bottom-end, bottom-start, left, left-end, left-start, right, right-end, right-start, top, top-end, top-start.

View Code

React
Vue
Angular

<TkDropdown options={options} position="bottom">
  <TkButton label="Bottom" slot="trigger" />
</TkDropdown>
<TkDropdown options={options} position="bottom-start">
  <TkButton label="Bottom Start" slot="trigger" />
</TkDropdown>
<TkDropdown options={options} position="bottom-end">
  <TkButton label="Bottom End" slot="trigger" />
</TkDropdown>

<TkDropdown options={options} position="right">
  <TkButton label="Right" slot="trigger" />
</TkDropdown>
<TkDropdown options={options} position="right-start">
  <TkButton label="Right Start" slot="trigger" />
</TkDropdown>
<TkDropdown options={options} position="right-end">
  <TkButton label="Right End" slot="trigger" />
</TkDropdown>

<script setup>
import { TkDropdown, TkButton } from '@takeoff-ui/vue'

const options = [
  { label: "Lorem Ipsum", value: "1" },
  { label: "It is established", value: "2" },
  { label: "Many desktop", value: "3" },
];

</script>

<template>
  <div>
    <TkDropdown :options.prop="options" position="bottom">
      <TkButton label="Bottom" slot="trigger" />
    </TkDropdown>
    <TkDropdown :options.prop="options" position="bottom-start">
      <TkButton label="Bottom Start" slot="trigger" />
    </TkDropdown>
    <TkDropdown :options.prop="options" position="bottom-end">
      <TkButton label="Bottom End" slot="trigger" />
    </TkDropdown>

    <TkDropdown :options.prop="options" position="right">
      <TkButton label="Right" slot="trigger" />
    </TkDropdown>
    <TkDropdown :options.prop="options" position="right-start">
      <TkButton label="Right Start" slot="trigger" />
    </TkDropdown>
    <TkDropdown :options.prop="options" position="right-end">
      <TkButton label="Right End" slot="trigger" />
    </TkDropdown>
  </div>
</template>

<tk-dropdown
  [options]="[
    { label: 'Lorem Ipsum', value: '1' },
    { label: 'It is established', value: '2' },
    { label: 'Many desktop', value: '3' }
  ]"
  position="bottom"
>
  <tk-button label="Bottom" slot="trigger" />
</tk-dropdown>
<tk-dropdown
  [options]="[
    { label: 'Lorem Ipsum', value: '1' },
    { label: 'It is established', value: '2' },
    { label: 'Many desktop', value: '3' }
  ]"
  position="bottom-start"
>
  <tk-button label="Bottom Start" slot="trigger" />
</tk-dropdown>
<tk-dropdown
  [options]="[
    { label: 'Lorem Ipsum', value: '1' },
    { label: 'It is established', value: '2' },
    { label: 'Many desktop', value: '3' }
  ]"
  position="bottom-end"
>
  <tk-button label="Bottom End" slot="trigger" />
</tk-dropdown>

<tk-dropdown
  [options]="[
    { label: 'Lorem Ipsum', value: '1' },
    { label: 'It is established', value: '2' },
    { label: 'Many desktop', value: '3' }
  ]"
  position="right"
>
  <tk-button label="Right" slot="trigger" />
</tk-dropdown>
<tk-dropdown
  [options]="[
    { label: 'Lorem Ipsum', value: '1' },
    { label: 'It is established', value: '2' },
    { label: 'Many desktop', value: '3' }
  ]"
  position="right-start"
>
  <tk-button label="Right Start" slot="trigger" />
</tk-dropdown>
<tk-dropdown
  [options]="[
    { label: 'Lorem Ipsum', value: '1' },
    { label: 'It is established', value: '2' },
    { label: 'Many desktop', value: '3' }
  ]"
  position="right-end"
>
  <tk-button label="Right End" slot="trigger" />
</tk-dropdown>

Option Disable

You can pass disable: true for the option you want to disable.

View Code

React
Vue
Angular

const options = [
  { label: "Enable Item", value: "1" },
  { label: "Disabled Item", value: "2", disabled: true },
  { label: "Enable Item", value: "3" },
];
return (
  <TkDropdown options={options}>
    <TkButton label="Disable Item Example" slot="trigger" />
  </TkDropdown>
);

<script setup>
import { TkDropdown, TkButton } from '@takeoff-ui/vue'

const options = [
  { label: "Lorem Ipsum", value: "1", disabled: true },
  { label: "It is established", value: "2" },
  { label: "Many desktop", value: "3" },
];

</script>

<template>
  <div>
    <TkDropdown :options.prop="options" position="bottom">
      <TkButton label="Bottom" slot="trigger" />
    </TkDropdown>
  </div>
</template>

<tk-dropdown [options]="[
    { label: 'Enable Item', value: '1' },
    { label: 'Disabled Item', value: '2', disabled: true },
    { label: 'Enable Item', value: '3' }
  ]">
    <tk-button label="Disable Item Example" slot="trigger" />
  </tk-dropdown>

Custom Item

You can add custom items using optionHtml prop.

View Code

React
Vue
Angular

 <TkDropdown
      optionLabelKey="name"
      optionValueKey="code"
      options={[
        {
          code: "SAW",
          name: "Sabiha Gökçen Havalimanı",
        },
        { code: "ESB", name: "Esenboğa Havalimanı" },
        { code: "AYT", name: "Antalya Havalimanı" },
      ]}
      optionHtml={(item: { name: any; code: any }) => {
        return `<div class="flex justify-between gap-4">
                      <div style="font-weight: bold;">${item.name}</div>
                      <div style="color: var(--primary-base)">${item.code}</div>
                  </div>`;
      }}
    >
      <TkButton
        label="Custom Item Example"
        icon="keyboard_arrow_down"
        iconPosition="right"
        slot="trigger"
      />
    </TkDropdown>

 <TkDropdown
    optionLabelKey="name" 
    optionValueKey="code" 
    :options.prop="[
    { code: 'SAW', name: 'Sabiha Gökçen Havalimanı'},
    { code: 'ESB', name: 'Esenboğa Havalimanı'},
    { code: 'AYT', name: 'Antalya Havalimanı'},
  ]"
  :optionHtml.prop="(item) => {
     return `<div class='flex justify-between gap-4'>
                      <div style='font-weight: bold;'>${item.name}</div>
                      <div style='color: var(--primary-base)'>${item.code}</div>
                  </div>`;
      }"
>
      <TkButton
        label="Custom Item Example"
        icon="keyboard_arrow_down"
        icon-position="right"
        slot="trigger"
      />
</TkDropdown>

Item Click

You can click an item from dropdown using tk-item-click event.

View Code

React
Vue
Angular

const options = [
  { label: "Lorem Ipsum", value: "1" },
  { label: "It is established", value: "2" },
  { label: "Many desktop", value: "3" },
];

return (
   <TkDropdown
      options={options}
      onTkItemClick={(e: any) => {
        alert(`${e.detail.label} has been clicked`);
      }}
    >
      <TkButton
        label="Item Click Example"
        icon="keyboard_arrow_down"
        iconPosition="right"
        slot="trigger"
      />
    </TkDropdown>
);

<script setup>
import { TkDropdown, TkButton } from '@takeoff-ui/vue';

const options = [
  { label: 'Lorem Ipsum', value: '1' },
  { label: 'It is established', value: '2' },
  { label: 'Many desktop', value: '3' },
];
const handleItemClick=(e)=>{
alert(`${e.detail.label} has been clicked`);
}
</script>

<template>
  <div>
    <TkDropdown :options.prop="options"
    @tkItemClick="handleItemClick"
    >
      <TkButton
        label="Item Click Example"
        icon="keyboard_arrow_down"
        icon-position="right"
        slot="trigger"
      />
    </TkDropdown>
  </div>
</template>

API

Props

Type	Default	Description
`boolean`	false	The disabled status.
`string`	'Nooptionsavailable'	The message to display when there is no data available.
`string`	'groupName'	The key to use for group names when options are grouped
`string`	'options'	The key to use for grouped options array
`Function`	null	Provides a function to customize the options.
`string`	'label'	The key to use for option labels
`string`	'value'	The key to use for option values
`any[]`	null	The list of options to be displayed in the select box.
`"center", "left", "right"`	'left'	Indicates the alignment of options.
`"bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start"`	'bottom'	Sets the position of the tooltip.

Events

Name	Description
tk-item-click	Emitted when the value has changed.

Slots

Name	Description
empty-data	Set how the dropdown will appear when there is no data
trigger	The trigger slot defines the element that will trigger the dropdown

Basic​

Position​

Option Disable​

Custom Item​

Item Click​

API​

Props​

Events​

Slots​

Basic

Position

Option Disable

Custom Item

Item Click

API

Props

Events

Slots