hafifierahman
62 lines
2.2 KiB
Vue
62 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<ol class="list-reset flex text-grey-dark mb-4 rounded">
|
|
<li class="bg-gray-500 py-2 px-4 rounded text-white">
|
|
<a href="#"><i class="far fa-folder mr-2"></i>Home</a>
|
|
</li>
|
|
<li class="mt-2"><span class="mx-2"><i class="fas fa-angle-double-right"></i></span></li>
|
|
<template v-for="(item,i) in items">
|
|
<template v-if="(items.length-1) == i">
|
|
<li class="bg-yellow-600 py-2 px-4 rounded text-white" :key="'last' + i">
|
|
<a href="">
|
|
<i class="mr-2" :class="item.icon"></i>
|
|
{{ item.title }}</a>
|
|
</li>
|
|
</template>
|
|
<template v-else>
|
|
<li class="bg-gray-500 py-2 px-4 rounded text-white" :key="i">
|
|
<a href="#"><i class="mr-2" :class="item.icon"></i> {{ item.title }}</a>
|
|
</li>
|
|
<li class="mt-2" :key="'A' + i">
|
|
<span class="mx-2"><i class="fas fa-angle-double-right"></i></span>
|
|
</li>
|
|
</template>
|
|
|
|
</template>
|
|
<!-- <li class="bg-gray-500 py-2 px-4 rounded text-white">
|
|
<a href="#" class=""><i class="far fa-folder mr-2"></i> Library</a>
|
|
</li>
|
|
<li class="mt-2"><span class="mx-2"><i class="fas fa-angle-double-right"></i></span></li>
|
|
<li class="bg-yellow-600 py-2 px-4 rounded text-white">
|
|
<a href="">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current inline mr-1">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>
|
|
Dashboard</a>
|
|
</li> -->
|
|
</ol>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default{
|
|
props:{
|
|
items: {
|
|
type: Array,
|
|
default: () => [
|
|
{
|
|
title: "Library",
|
|
icon:"far fa-folder"
|
|
},
|
|
{
|
|
title: "Dashboard",
|
|
icon:"fas fa-columns"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|