mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 04:22:25 +09:00
75 lines
2.3 KiB
Markdown
75 lines
2.3 KiB
Markdown
### VDropdown
|
|
|
|
You can use a `<VDropdown />` component to display a menu that
|
|
will hold your options. pass the `right` prop to the component to align
|
|
it to the right instead of left, which is the default.
|
|
Use the `up` prop to make it a dropup.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<template>
|
|
<VDropdown
|
|
title="Dropdown button"
|
|
right
|
|
up
|
|
>
|
|
<template #content>
|
|
<a href="#" class="dropdown-item"> Dropdown item </a>
|
|
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
|
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
|
|
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
|
<hr class="dropdown-divider">
|
|
<a href="#" class="dropdown-item"> With a divider </a>
|
|
</template>
|
|
</VDropdown>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<VField horizontal style="gap: 0.5rem;">
|
|
<VControl>
|
|
<VDropdown title="Dropdown button">
|
|
<template #content>
|
|
<a href="#" class="dropdown-item"> Dropdown item </a>
|
|
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
|
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
|
|
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
|
<hr class="dropdown-divider" />
|
|
<a href="#" class="dropdown-item"> With a divider </a>
|
|
</template>
|
|
</VDropdown>
|
|
</VControl>
|
|
|
|
<VControl>
|
|
<VDropdown title="Dropdown right" right>
|
|
<template #content>
|
|
<a href="#" class="dropdown-item"> Dropdown item </a>
|
|
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
|
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
|
|
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
|
<hr class="dropdown-divider" />
|
|
<a href="#" class="dropdown-item"> With a divider </a>
|
|
</template>
|
|
</VDropdown>
|
|
</VControl>
|
|
|
|
<VControl>
|
|
<VDropdown title="Dropdown up" up>
|
|
<template #content>
|
|
<a href="#" class="dropdown-item"> Dropdown item </a>
|
|
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
|
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
|
|
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
|
<hr class="dropdown-divider" />
|
|
<a href="#" class="dropdown-item"> With a divider </a>
|
|
</template>
|
|
</VDropdown>
|
|
</VControl>
|
|
</VField>
|
|
|
|
<!--/example-->
|