NcActions

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

vue

<template>
  <NcActions>
    <NcActionButton @click="actionDelete">
      <template #icon>
        <Delete :size="20" />
      </template>
      Delete
    </NcActionButton>
  </NcActions>
</template>
<script>
import Delete from "vue-material-design-icons/Delete";

export default {
  components: {
    Delete
  },
  methods: {
    actionDelete() {
      alert("Delete");
    }
  }
};
</script>

Multiple actions

vue

<template>
  <NcActions>
    <NcActionButton @click="showMessage('Edit')">
      <template #icon>
        <Pencil :size="20" />
      </template>
      Edit
    </NcActionButton>
    <NcActionButton @click="showMessage('Delete')">
      <template #icon>
        <Delete :size="20" />
      </template>
      Delete
    </NcActionButton>
    <NcActionLink href="https://nextcloud.com">
      <template #icon>
        <OpenInNew :size="20" />
      </template>
      Link
    </NcActionLink>
  </NcActions>
</template>
<script>
import Delete from "vue-material-design-icons/Delete";
import OpenInNew from "vue-material-design-icons/OpenInNew";
import Pencil from "vue-material-design-icons/Pencil";

export default {
  components: {
    Delete,
    OpenInNew,
    Pencil
  },
  methods: {
    showMessage(msg) {
      alert(msg);
    }
  }
};
</script>

Multiple actions with 2 items inline

<template>
	<NcActions :inline="2">
		<NcActionButton @click="showMessage('Add')">
			<template #icon>
				<Plus :size="20" />
			</template>
			Add
		</NcActionButton>
		<NcActionButton @click="showMessage('Edit')">
			<template #icon>
				<Pencil :size="20" />
			</template>
			Edit
		</NcActionButton>
		<NcActionButton @click="showMessage('Delete')">
			<template #icon>
				<Delete :size="20" />
			</template>
			Delete
		</NcActionButton>
		<NcActionLink href="https://nextcloud.com">
			<template #icon>
				<OpenInNew :size="20" />
			</template>
			Link
		</NcActionLink>
	</NcActions>
</template>
<script>
import Plus from 'vue-material-design-icons/Plus'
import Delete from 'vue-material-design-icons/Delete'
import OpenInNew from 'vue-material-design-icons/OpenInNew'
import Pencil from 'vue-material-design-icons/Pencil'

export default {
	components: {
		Delete,
		OpenInNew,
		Pencil,
		Plus,
	},
	methods: {
		showMessage(msg) {
			alert(msg)
		},
	},
}
</script>

Multiple actions with custom icon

<template>
	<NcActions>
		<template #icon>
			<Pencil :size="20" />
		</template>
		<NcActionButton @click="showMessage('Edit')">
			<template #icon>
				<Pencil :size="20" />
			</template>
			Edit
		</NcActionButton>
		<NcActionButton @click="showMessage('Delete')">
			<template #icon>
				<Delete :size="20" />
			</template>
			Delete
		</NcActionButton>
		<NcActionLink href="https://nextcloud.com">
			<template #icon>
				<OpenInNew :size="20" />
			</template>
			Link
		</NcActionLink>
	</NcActions>
</template>
<script>
import Delete from 'vue-material-design-icons/Delete'
import OpenInNew from 'vue-material-design-icons/OpenInNew'
import Pencil from 'vue-material-design-icons/Pencil'

export default {
	components: {
		Delete,
		OpenInNew,
		Pencil,
	},
	methods: {
		showMessage(msg) {
			alert(msg)
		},
	},
}
</script>

<template>
	<NcActions menu-title="Object management">
		<template #icon>
			<Pencil :size="20" />
		</template>
		<NcActionButton>
			<template #icon>
				<Pencil :size="20" />
			</template>
			Rename
		</NcActionButton>
		<NcActionButton>
			<template #icon>
				<Delete :size="20" />
			</template>
			Delete
		</NcActionButton>
		<NcActionButton>
			<template #icon>
				<ArrowRight :size="20" />
			</template>
			Validate
		</NcActionButton>
		<NcActionButton>
			<template #icon>
				<Download :size="20" />
			</template>
			Download
		</NcActionButton>
	</NcActions>
</template>
<script>
import ArrowRight from 'vue-material-design-icons/ArrowRight'
import Delete from 'vue-material-design-icons/Delete'
import Download from 'vue-material-design-icons/Download'
import Pencil from 'vue-material-design-icons/Pencil'

export default {
	components: {
		ArrowRight,
		Delete,
		Download,
		Pencil,
	},
}
</script>

Various icons styles

<template>
	<NcActions :primary="true">
		<NcActionButton>
			<template #icon>
				<Pencil :size="20" />
			</template>
			Edit
		</NcActionButton>
		<NcActionButton>
			<template #icon>
				<Delete :size="20" />
			</template>
			Delete
		</NcActionButton>
	</NcActions>
</template>
<script>
import Delete from 'vue-material-design-icons/Delete'
import Pencil from 'vue-material-design-icons/Pencil'

export default {
	components: {
		Delete,
		Pencil,
	},
}
</script>

<template>
	<NcActions :primary="true" menu-title="Object management">
		<template #icon>
			<Plus :size="20" />
		</template>
		<NcActionButton>
			<template #icon>
				<Pencil :size="20" />
			</template>
			Rename
		</NcActionButton>
		<NcActionButton>
			<template #icon>
				<Delete :size="20" />
			</template>
			Delete
		</NcActionButton>
		<NcActionButton>
			<template #icon>
				<ArrowRight :size="20" />
			</template>
			Validate
		</NcActionButton>
		<NcActionButton>
			<template #icon>
				<Download :size="20" />
			</template>
			Download
		</NcActionButton>
	</NcActions>
</template>
<script>
import ArrowRight from 'vue-material-design-icons/ArrowRight'
import Delete from 'vue-material-design-icons/Delete'
import Download from 'vue-material-design-icons/Download'
import Pencil from 'vue-material-design-icons/Pencil'
import Plus from 'vue-material-design-icons/Plus'

export default {
	components: {
		ArrowRight,
		Delete,
		Download,
		Pencil,
		Plus,
	},
}
</script>

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.

<template>
	<div style="display: flex;align-items: center;">
		<NcButton @click="toggled = !toggled">Toggle multiple action</NcButton>
		<NcActions>
			<template #icon>
				<DotsHorizontalCircleOutline :size="20" />
			</template>
			<NcActionButton>
				<template #icon>
					<MicrophoneOff :size="20" />
				</template>
				Mute
			</NcActionButton>
			<NcActionButton v-if="toggled">
				<template #icon>
					<Delete :size="20" />
				</template>
				Delete
			</NcActionButton>
		</NcActions>
	</div>
</template>
<script>
import Delete from 'vue-material-design-icons/Delete'
import DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline'
import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'

export default {
	components: {
		Delete,
		DotsHorizontalCircleOutline,
		MicrophoneOff,
	},
	data() {
		return {
			toggled: false
		}
	}
}
</script>

Custom icon slot in child elements

<template>
	<NcActions :primary="true">
		<NcActionButton>
			<template #icon>
				<Magnify :size="20" />
			</template>
			Search
		</NcActionButton>
		<NcActionButton>
			<template #icon>
				<Delete :size="20" />
			</template>
			Delete
		</NcActionButton>
	</NcActions>
</template>
<script>
import Delete from 'vue-material-design-icons/Delete'
import Magnify from 'vue-material-design-icons/Magnify'

export default {
	components: {
		Delete,
		Magnify,
	},
}
</script>

Type variants

<template>
	<div>
		<NcActions :type="current">
			<template #icon>
				<SelectColor :size="20" />
			</template>

			<NcActionButton v-if="current" close-after-click @click="define(undefined)">
				<template #icon>
					<Delete :size="20" />
				</template>
				Remove
			</NcActionButton>

			<NcActionButton close-after-click @click="define(row)" v-for="row in types" :key="`type-icon--${row}`">
				<template #icon>
					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
					<SelectColor v-else :size="20" />
				</template>
				{{ row }}
			</NcActionButton>
		</NcActions>

		<NcActions :type="current" menu-title="Choose a type">
			<NcActionButton v-if="current" close-after-click @click="define(undefined)">
				<template #icon>
					<Delete :size="20" />
				</template>
				Remove
			</NcActionButton>

			<NcActionButton close-after-click @click="define(row)" v-for="row in types" :key="`type-text--${row}`">
				<template #icon>
					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
					<SelectColor v-else :size="20" />
				</template>
				{{ row }}
			</NcActionButton>
		</NcActions>

		<NcActions :type="current"  menu-title="Choose a type">
			<template #icon>
				<SelectColor :size="20" />
			</template>

			<NcActionButton v-if="current" close-after-click @click="define(undefined)">
				<template #icon>
					<Delete :size="20" />
				</template>
				Remove
			</NcActionButton>

			<NcActionButton close-after-click @click="define(row)" v-for="row in types" :key="`type-icon-text--${row}`">
				<template #icon>
					<CheckboxMarkedCircleOutline v-if="row === current" :size="20" />
					<SelectColor v-else :size="20" />
				</template>
				{{ row }}
			</NcActionButton>
		</NcActions>
	</div>
</template>

<script>
import Delete from 'vue-material-design-icons/Delete'
import Palette from 'vue-material-design-icons/Palette'
import SelectColor from 'vue-material-design-icons/SelectColor'
import CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline'

export default {
	components: {
		Delete,
		Palette,
		SelectColor,
		CheckboxMarkedCircleOutline,
	},
	data() {
		return {
			current: 'primary',
			types: [
				'primary',
				'secondary',
				'tertiary',
				'error',
				'warning',
				'success'
			]
		}
	},
	methods: {
		define(row) {
			this.current = row
		}
	}
}
</script>

NcActions #

Props #

Events #

Slots #

Single action #

Multiple actions #

Multiple actions with 2 items inline #

Multiple actions with custom icon #

With menu title #

Various icons styles #

Custom icon slot #

Custom icon slot in child elements #

Type variants #

NcActions

Props

Events

Slots

Single action

Multiple actions

Multiple actions with 2 items inline

Multiple actions with custom icon

With menu title

Various icons styles

Custom icon slot

Custom icon slot in child elements

Type variants