Only show actions if actions given for breadcrumbs

[raimund-schluessler]

This is a minor cleanup of the breadcrumbs bar. The Actions menu is now only rendered if Actions are actually present. Before, they were just hidden.

This does not change any functionality or appearance, just cleans up the HTML code and probably renders a bit faster.

[skjnldsv]

Is this reactive though? If the action change or gets shown/hidden?

[raimund-schluessler]

Is this reactive though? If the action change or gets shown/hidden?

Good question. A little modification of the Breadcrumbs example from the docs says it still is:

<template>
	<div>
		<div class="container">
			<Breadcrumbs @dropped="dropped">
				<Breadcrumb title="Home" href="/" @dropped="droppedOnCrumb">
					<template #icon>
						<Folder :size="20" decorative />
					</template>
				</Breadcrumb>
				<Breadcrumb title="Folder 1" href="/Folder 1" />
				<Breadcrumb title="Folder 2" href="/Folder 1/Folder 2" :disable-drop="true" />
				<Breadcrumb title="Folder 3" href="/Folder 1/Folder 2/Folder 3" />
				<Breadcrumb title="Folder 4" href="/Folder 1/Folder 2/Folder 3/Folder 4" />
				<Breadcrumb title="Folder 5" href="/Folder 1/Folder 2/Folder 3/Folder 4/Folder 5" :disable-drop="true">
					<template #menu-icon>
						<MenuDown :size="20" />
					</template>
					<ActionButton @click="alert('Share')" v-if="showActions">
						<template #icon>
							<ShareVariant :size="20" />
						</template>
						Share
					</ActionButton>
					<ActionButton @click="alert('Download')" v-if="showActions">
						<template #icon>
							<Download :size="20" />
						</template>
						Download
					</ActionButton>
				</Breadcrumb>
				<template #actions>
					<Button>
						<template #icon>
							<Plus :size="20" />
						</template>
						New
					</Button>
				</template>
			</Breadcrumbs>
		</div>
		<br />
		<div class="dragme" draggable="true" @dragstart="dragStart">
			<span>Drag me onto the breadcrumbs.</span>
		</div>
		<br />
		<div class="dragme" @click="showActions = !showActions">
		  toggle Actions
		</div>
	</div>
</template>

<script>
import Download from 'vue-material-design-icons/Download'
import Folder from 'vue-material-design-icons/Folder'
import MenuDown from 'vue-material-design-icons/MenuDown'
import Plus from 'vue-material-design-icons/Plus'
import ShareVariant from 'vue-material-design-icons/ShareVariant'

export default {
	components: {
		Download,
		Folder,
		MenuDown,
		Plus,
		ShareVariant,
	},
	data() {
		return {
	  		showActions: false,
	  	}
	},
	methods: {
		dropped(e, path) {
			alert('Global drop on ' + path)
		},
		droppedOnCrumb(e, path) {
			alert('Drop on crumb ' + path)
		},
		dragStart(e) {
			e.dataTransfer.setData('text/plain', 'dragging')
		},
	}
}
</script>
<style>
.container {
	display: inline-flex;
	width: 100%;
}

.dragme {
	display: block;
	width: 100px;
	height: 44px;
	background-color: var(--color-background-dark);
}
</style>

When toggling the rendering of the Actions they properly show and hide.