Easy to implement options that seem only when the user needs them
Default
To add the Dropdown we have three types of components the main vs-dropdown
that contains the element that makes thevs-dropdown-menu
appear and to add each item within it we have the component vs-dropdown-item
Links To add an internal link using > vue-router you can do them simply by adding the property > to as if it were a > vue-router linkIn case you need an external link or normal html, simply do it with the href property> >
to> => “/myLink> “> >> >href> => “/myLink> “> my Link name >Color
You can change the color of the component with the property
color
WARNING Only > RGB and > HEX colors are supported.>
Option Group
If you need to group the options you can use the subcomponent
vs-dropdown-group
which as a required parameter isvs-label
to define the group title TIP The group can be hidden from the user and only open when it is sitting on the property with the >vs-collapse
propertyYou can modify the icon with a property >vs-icon
Custom Content
Sometimes when we need something more personalized and not necessarily a menu for it you can add any content and have the dropdown functionality with the property
vs-custom-content
TIP For better functionality in the user’s aspect when doing some interaction with the custom dropdown you can add that it is only activated and deactivated by a click event with the property >vs-trigger-click
>
Button
You can customize the component or element that initialize the dropdown in this case, it is a Button that is the most common TIP 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
TIP Vuesax uses the > Google Material Icons font library by default. For a list of all available icons, visit the official > Material Icons page . Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. ```vue
API
Name | Type | Parameters | Description | default |
---|---|---|---|---|
color | String | Change the color of the dropdown. | primary | |
vs-trigger-click | Boolean | Determine if the dropdown opens when you click, changing the default functionality. | false | |
divider | Boolean | Add a top line to split a link from others. | false | |
vs-label | String | Title of the item group (vs-dropdown-group). | Options | |
vs-custom-content | Boolean | Determines whether the component will contain custom elements. | false | |
vs-collapse | Boolean | Determines if the group of options is closed until the user poses in the title (vs-dropdown-group). | false | |
vs-icon | String | Define the icon show when have a (vs-dropdown-group). | keyboard_arrow_right | |
icon-pack | String | Icon Pack Class Name | Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. | material-icons |