@nextcloud/vueNcActions
The Actions component can be used to display one ore more actions. If only a single action is provided, it will be rendered as an inline icon. For more, a menu indicator will be shown and a popovermenu containing the actions will be opened on click.
Since: 0.10.0
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| open | Specify the open state of the popover menu | boolean | - | false |
| forceMenu | Force the actions to display in a three dot menu | boolean | - | false |
| forceTitle | Force the title to show for single actions | boolean | - | false |
| menuTitle | Specify the menu title | string | - | null |
| primary | Apply primary styling for this menu | boolean | - | false |
| type | Specifies the button type used for trigger and single actions buttons Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty, the default button style will be applied. | string | primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success | null |
| defaultIcon | Icon to show for the toggle menu button when more than one action is inside the actions component. Only replace the default three-dot icon if really necessary. | string | - | '' |
| ariaLabel | Aria label for the actions menu | string | - | t('Actions') |
| placement | Wanted direction of the menu | string | - | 'bottom' |
| boundariesElement | DOM element for the actions' popover boundaries | Element | - | () => document?.querySelector('body') |
| container | Selector for the actions' popover container | string|object|Element|boolean | - | 'body' |
| disabled | Disabled state of the main button (single action or menu toggle) | boolean | - | false |
| inline | Display x items inline out of the dropdown menu Will be ignored if forceMenu is set | number | - | 0 |
Events
| Event name | Properties | Description |
|---|---|---|
| update:open | Event emitted when the popover menu open state is changed | |
| open | Event emitted when the popover menu is opened | |
| close | Event emitted when the popover menu is closed | |
| focus | ||
| blur |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | ||
| icon |
Single action
loading...
Multiple actions
loading...
Multiple actions with 2 items inline
loading...
Multiple actions with custom icon
loading...
With menu title
loading...
Various icons styles
loading...
loading...
Custom icon slot
To be used with vue-material-design-icons only. For icon classes use the default-icon slot. It can be used with one or multiple actions.
loading...
Custom icon slot in child elements
loading...
Type variants
loading...