Dropdowns are contextual overlays toggled through clicking or hovering, used for displaying a list of links.
Example
Wrap both the dropdown's trigger element (such as an <i-button>) and the <i-dropdown-menu> inside a <i-dropdown> component. The dropdown component will always choose the first child element as a trigger and the last child element as the defined dropdown menu.
Trigger dropdown menus at the top, bottom, left or right of elements by adding the placement property to the parent <i-dropdown> element.
Each of the positions also has a -start or -end variant (top-start, top-end, bottom-start, bottom-end, etc.) that sets the dropdown to the start or end of the placement instead of centering it.
You're not required to use any dropdown-specific components inside of <i-dropdown-menu>. You can add your own HTML markup without any issues. You might need additional size styles to constrain the content width
Freeform Dropdown
This is a freeform dropdown example.
<i-dropdown><i-button>Dropdown</i-button><i-dropdown-menu><divclass="_padding-1">This is a freeform dropdown example.</div></i-dropdown-menu></i-dropdown>
Trigger type
You can use the trigger property to trigger the dropdown on hover or click. By default, dropdowns are triggered on click, a design decision made to improve user experience.
You're able to use the size modifier to control the size of your dropdown menus, using one of the available sizes: sm, md, and lg.
The default size is set to md.
Inkline includes two predefined dropdown styles, each serving its own semantic purpose. You can set the style of a <i-dropdown> using the variant property, which can have a value of light or dark. By default, dropdown menus use the light variant.
Inkline allows you to have virtually infinite recursive dropdown submenus structure by defining another <i-dropdown> inside of a <i-dropdown-menu>. This awesome feature gives you great design flexibility.
Description Sets the color variant of the collapsible component.
Property default
Description Slot for dropdown component trigger and dropdown menu. The first direct child represents the trigger, the second direct child represents the dropdown menu.
Event action
Type(action: String | Number | Boolean, instance: VueComponent) => {}
Description Emitted when dropdown item with action is clicked.
Event change
Type(visible: Boolean) => {}
Description Emitted when visibility changes.
Dropdown Menu API
Property arrow
TypeBoolean
Acceptedtrue, false
Defaulttrue
Description Sets whether to attach an arrow to the dropdown menu.
Property transform-origin
TypeBoolean,
String
Defaulttrue
Description Sets the transform origin of the dropdown menu.
Property popper-options
TypeObject
Description Sets custom options for the Popper.js plugin.
Slot default
Description Slot for dropdown menu default content.
Dropdown Item API
Property action
TypeString,
Number,
Boolean
Description Set an action to be emitted by the i-dropdown parent when the dropdown item is clicked.
Property disabled
TypeBoolean
Acceptedtrue, false
Defaultfalse
Description Set the state of the dropdown item component as disabled.
Property tag
TypeString
Defaultdiv
Description Sets the tag to be used for the component. If to or href attribute is provided, an a tag will be used.
Slot default
Description Slot for dropdown item default content.
Sass Variables
Here you can find a list of the Sass variables you can use for the dropdown components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.
Inkline