pages._explore-components-base-dropdown.title

pages._explore.sections.basic-usage.title

Base Dropdown Trigger

html

<BaseDropdown>
  <template #trigger>
    <div class="p-3">
      Base Dropdown Trigger
    </div>
  </template>
  <div>
    content
  </div>
</BaseDropdown>

typescript

pages._explore.sections.complex-usage.title

Trigger Label

html

<BaseDropdown
  :position="BaseDropdownOpeningPositions.RIGHT"
  :content-offset="20"
  :arrow-size="10"
>
  <!-- Trigger -->
  <template #trigger>
    <div class="inline-flex items-center justify-center p-3 text-sm text-sm font-medium uppercase outline-none">
      Trigger Label
    </div>
  </template>

  <!-- Content -->
  <div class="flex flex-col overflow-hidden rounded px-2 pb-2.5 pt-2 text-sm space-y-1">
    <button
      v-for="(name, key) of { one: 'One', two: 'Two', three: 'Three' }"
      :key="key"
      class="flex-auto flex-col cursor-pointer items-start justify-center overflow-hidden rounded px-2 py-1.5 outline-none transition-all duration-350 ease-in-out"
      :class="{
        'bg-surfaceOverlay text-surfaceOverlay-text hover:bg-surfaceOverlay-hovered opacity-75 hover:opacity-100': key !== 'two'
      }"
    >
      <span>
        {{ name }}
      </span>
    </button>
  </div>
</BaseDropdown>

typescript

<script setup lang="ts">
  import { BaseDropdownOpeningPositions } from '#core-types/components/base/base-dropdown'
</script>

pages._explore.sections.props.title

Prop	Default	Type
position	BaseDropdownOpeningPositions.BOTTOM	BaseDropdownOpeningPositions
contentOffset	5	number
openOnHover	false	boolean
arrowSize	undefined	number
surfaceLevel	BaseDropdownSurfaceLevels.RAISED	BaseDropdownSurfaceLevels
triggerClasses	undefined	string
contentClasses	undefined	string
alignContentToTriggerWidth	false	boolean
modelValue	false	boolean

pages._explore.sections.types.title

Name	Type	Options
BaseDropdownOpeningPositions	enum	TOP \| BOTTOM \| LEFT \| RIGHT
BaseDropdownSurfaceLevels	enum	SUNKEN \| SURFACE \| RAISED \| OVERLAY

pages._explore.sections.slots.title

Slot	Type
default	{}
trigger	{}

pages._explore.sections.emits.title

Event	Type
update:modelValue	[payload: boolean]