CnMassActionBar

Mass action dropdown button for selected items. Appears when items are selected in a table or card grid.

Wraps: NcActions, NcActionButton

Try it

Loading CnMassActionBar playground…

Props

Prop	Type	Default	Description
selectedIds	Array	[]	Selected item IDs
count	Number	0	Number of selected items
showImport	Boolean	true	Show mass import action
showExport	Boolean	true	Show mass export action
showCopy	Boolean	true	Show mass copy action
showDelete	Boolean	true	Show mass delete action
menuLabelTemplate	String	'Mass Actions (\{count\})'
importLabel	String		Import action label
exportLabel	String		Export action label
copyLabel	String		Copy action label
deleteLabel	String		Delete action label

Events

Event	Description
mass-import	Import action triggered
mass-export	Export action triggered
mass-copy	Copy action triggered
mass-delete	Delete action triggered

Slots

Slot	Scope	Description
#actions	\{ count, selectedIds \}	Custom mass action buttons

Usage

<CnMassActionBar
  :selected-ids="selected"
  :count="selected.length"
  @mass-delete="onMassDelete"
  @mass-export="onMassExport">
  <template #actions="{ count }">
    <NcActionButton @click="onCustomAction">
      Custom Action ({{ count }})
    </NcActionButton>
  </template>
</CnMassActionBar>

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnMassActionBar.vue and update automatically whenever the component changes.

Props

Name	Type	Required	Default	Description
selectedIds	array		[]	Array of selected item IDs
count	number		0	Number of selected items
showImport	boolean		true	Whether to show the built-in Import action
showExport	boolean		true	Whether to show the built-in Export action
showCopy	boolean		true	Whether to show the built-in Copy action
showDelete	boolean		true	Whether to show the built-in Delete action
menuLabelTemplate	string		() => t('nextcloud-vue', 'Mass actions (\{count\})')	Label template for the menu button. Use {count} for the count.
importLabel	string		() => t('nextcloud-vue', 'Import')	Label for the built-in Import mass-action button.
exportLabel	string		() => t('nextcloud-vue', 'Export')	Label for the built-in Export mass-action button.
copyLabel	string		() => t('nextcloud-vue', 'Copy')	Label for the built-in Copy mass-action button.
deleteLabel	string		() => t('nextcloud-vue', 'Delete')	Label for the built-in Delete mass-action button.

Events

Name	Payload	Description
mass-import	—	Emitted when the Import action is clicked. No payload.
mass-export	—	Emitted when the Export action is clicked. No payload.
mass-copy	—	Emitted when the Copy action is clicked. No payload.
mass-delete	—	Emitted when the Delete action is clicked. No payload.

Slots

Name	Bindings	Description
actions	count, selected-ids	actions Additional app-specific mass-action buttons. Slot scope: { count, selectedIds }.