woothu
75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<div class="animated fadeIn">
|
|
<CRow>
|
|
<CCol col>
|
|
<CCard>
|
|
<CCardHeader>
|
|
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
|
|
<!-- <div class="card-header-actions">
|
|
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
|
<small class="text-muted">docs</small>
|
|
</a>
|
|
</div> -->
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
|
|
<CBreadcrumb :items="items2"/>
|
|
<CBreadcrumb :items="items3"/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'breadcrumbs',
|
|
data () {
|
|
return {
|
|
items: [{
|
|
textHtml: '<b>Admin</b>',
|
|
href: '#'
|
|
}, {
|
|
textHtml: 'Manage',
|
|
href: '#'
|
|
}, {
|
|
textHtml: 'Library'
|
|
}],
|
|
|
|
|
|
items2: [{
|
|
textHtml: 'Go to dashboard',
|
|
to: '/dashboard'
|
|
}, {
|
|
textHtml: 'Go to widgets',
|
|
to: '/Widgets'
|
|
}, {
|
|
textHtml: 'Go to Google',
|
|
href: 'http://google.com'
|
|
},{
|
|
textHtml: 'Current page'
|
|
}],
|
|
|
|
|
|
items3: [{
|
|
textHtml: 'Link',
|
|
to: '#2',
|
|
activeClass: 'bg-info p-1'
|
|
}, {
|
|
textHtml: 'Active',
|
|
to: '#3',
|
|
activeClass: 'bg-warning p-1',
|
|
addLinkClasses: 'bg-info p-1'
|
|
},{
|
|
textHtml: 'Classes',
|
|
to: '#4',
|
|
activeClass: 'bg-danger p-1',
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
</script>
|