Check with your designers to help you design this section
Check with your designers to help you design this section
Use action menus when you need to take action on a page element (card, row, list item). The menu icon should be located in the upper right of the element. Menu items should be links with optional icons. Actions can be grouped with dividers.
<div class="raul-simple-dropdown dropdown">
<a href="#" data-toggle="dropdown"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">First Action</a>
<a class="dropdown-item" href="#">Second Action</a>
<a class="dropdown-item disabled" href="#">Disabled Action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Final Action</a>
</div>
</div>
<ui-action-menu>
<ui-action-menu-item url="#first">First Action</ui-action-menu-item>
<ui-action-menu-item url="#second">Second Action</ui-action-menu-item>
<ui-action-menu-item url="#third">Third Action</ui-action-menu-item>
<ui-action-menu-item url="#fourth">Fourth Action</ui-action-menu-item>
</ui-action-menu>
Sometimes you may need to separate action items with a divider.
<ui-action-menu>
<ui-action-menu-item url="#first">First Action</ui-action-menu-item>
<ui-action-menu-item url="#second">Second Action</ui-action-menu-item>
<ui-action-menu-item url="#third">Third Action</ui-action-menu-item>
<ui-action-menu-item url="#fourth">Fourth Action</ui-action-menu-item>
<div class="dropdown-divider"></div>
<ui-action-menu-item url="#final">Final Action</ui-action-menu-item>
</ui-action-menu>
This shows the extent of customization possible with the API.
Both the trigger and the items themselves can include HTML. We don't recommend
overriding the default trigger,
however, you can overwrite it by specifying your desired HTML inside the
<template slot id="title"></template>
element.
<ui-action-menu direction="right">
<template slot id="title">
<button class="btn btn-primary">Custom Trigger</button>
</template>
<ui-action-menu-item>
<span class="fa fa-pencil"></span> Edit
</ui-action-menu-item>
<ui-action-menu-item disabled>
<span class="fa fa-close"></span> Disabled
</ui-action-menu-item>
<div class="dropdown-divider"></div>
<ui-action-menu-item item-class="text-danger" item-id="has-id">
<span class="fa fa-trash"></span> Delete
</ui-action-menu-item>
</ui-action-menu>
Element | Attribute | Value Type | Default Value | Description |
---|---|---|---|---|
ui-action-menu |
item-class |
String |
None | Adds more classes to class attribute of the main element. |
ui-action-menu |
direction |
String |
"down" |
Sets the direction of the menu. Allowed values:
down ,
up ,
left ,
right .
|
ui-action-menu |
item-id |
String |
None | Sets the id attribute of the main element. |
ui-action-menu-item |
item-class |
String |
None |
Adds more classes to
class
attribute of the
ui-action-menu-item
element.
|
ui-action-menu-item |
disabled |
Boolean |
None | Adds disabled styles to the item. |
ui-action-menu-item |
item-id |
String |
None |
Sets the id attribute of the ui-action-menu-item element.
|
ui-action-menu-item |
url |
String |
"#" |
Item's target URL. |