You can customize the component or element that initialize the dropdown in this case, it is a Button that is the most common
The component or element that initializes the dropdown is the one inside it with the possibility of total customization and flexibility in the required use
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
<vs-dropdown>
<!-- element that initializes the dropdown -->
<vs-dropdown-menu>
<!-- items and elements within the menu or custom dropdown -->
</vs-dropdown-menu>
</vs-dropdown>
Dropdown
option 1
option 2
option 1
option 2
option 3
Dropdown
Home
Contributors
Logout
Icons
mood
mood_bad
sentiment_dissatisfied
sentiment_satisfied
sentiment_very_dissatisfied
sentiment_very_satisfied
<template>
<div class="demo-alignment">
<!-- Dropdown Button 1 -->
<div class="dropdown-button-container">
<vs-button class="btnx" type="filled">Dropdown</vs-button>
<vs-dropdown>
<vs-button class="btn-drop" type="filled" icon="expand_more"></vs-button>
<vs-dropdown-menu>
<vs-dropdown-item> option 1 </vs-dropdown-item>
<vs-dropdown-item> option 2 </vs-dropdown-item>
<vs-dropdown-group>
<vs-dropdown-item> option 1 </vs-dropdown-item>
<vs-dropdown-item> option 2 </vs-dropdown-item>
</vs-dropdown-group>
<vs-dropdown-item divider> option 3 </vs-dropdown-item>
</vs-dropdown-menu>
</vs-dropdown>
</div>
<!-- Dropdown Button 2 -->
<div class="dropdown-button-container">
<vs-button class="btnx" color="success" type="gradient">Dropdown</vs-button>
<vs-dropdown>
<vs-button class="btn-drop" color="success" type="gradient" icon="more_horiz"></vs-button>
<vs-dropdown-menu>
<vs-dropdown-item> Home </vs-dropdown-item>
<vs-dropdown-item> Contributors </vs-dropdown-item>
<vs-dropdown-item divider> Logout </vs-dropdown-item>
</vs-dropdown-menu>
</vs-dropdown>
</div>
<!-- Dropdown Button 3 -->
<div class="dropdown-button-container">
<vs-button class="btnx" type="line" color="danger">Icons</vs-button>
<vs-dropdown>
<vs-button class="btn-drop" type="line" color="danger" icon="mood"></vs-button>
<vs-dropdown-menu>
<vs-dropdown-item>
<i class="material-icons"> mood </i>
</vs-dropdown-item>
<vs-dropdown-item>
<i class="material-icons"> mood_bad </i>
</vs-dropdown-item>
<vs-dropdown-item>
<i class="material-icons"> sentiment_dissatisfied </i>
</vs-dropdown-item>
<vs-dropdown-item>
<i class="material-icons"> sentiment_satisfied </i>
</vs-dropdown-item>
<vs-dropdown-item>
<i class="material-icons"> sentiment_very_dissatisfied </i>
</vs-dropdown-item>
<vs-dropdown-item>
<i class="material-icons"> sentiment_very_satisfied </i>
</vs-dropdown-item>
</vs-dropdown-menu>
</vs-dropdown>
</div>
</div>
</template>
<style lang="scss">
.dropdown-button-container {
display: flex;
align-items: center;
.btnx {
border-radius: 5px 0px 0px 5px;
}
.btn-drop {
border-radius: 0px 5px 5px 0px;
border-left: 1px solid rgba(255, 255, 255, .2);
}
}
</style>