Fixed #96 - New Breadcrumb Component
cagataycivici
parent
f1e9fbb90d
commit
5cfda92053
|
|
@ -127,6 +127,7 @@
|
|||
<div v-show="activeMenuIndex === 6">
|
||||
<div>
|
||||
<router-link to="/menumodel">● MenuModel</router-link>
|
||||
<router-link to="/breadcrumb">● Breadcrumb</router-link>
|
||||
<router-link to="/menu">● Menu</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div class="p-breadcrumb p-component">
|
||||
<ul>
|
||||
<BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" />
|
||||
<template v-for="(item, i) of model">
|
||||
<li class="p-breadcrumb-chevron pi pi-chevron-right" :key="'chevron' + i"></li>
|
||||
<BreadcrumbItem :key="item.label + i" :item="item" />
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BreadcrumbItem from './BreadcrumbItem';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
model: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
home: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'BreadcrumbItem': BreadcrumbItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-breadcrumb {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.p-breadcrumb ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-breadcrumb ul li {
|
||||
display: inline-block;
|
||||
margin: 0 .25em;
|
||||
}
|
||||
|
||||
.p-breadcrumb-chevron, .p-breadcrumb-home {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-breadcrumb ul li .p-menuitem-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-icon {
|
||||
margin-right: .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<li :class="containerClass" role="menuitem">
|
||||
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
|
||||
<span v-if="item.icon" :class="item.icon"></span>
|
||||
<span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
|
||||
</router-link>
|
||||
<a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
|
||||
<span v-if="item.icon" :class="item.icon"></span>
|
||||
<span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: null
|
||||
},
|
||||
methods: {
|
||||
onClick(event) {
|
||||
if (this.item.command) {
|
||||
this.item.command({
|
||||
originalEvent: event,
|
||||
item: this.item
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [{'p-disabled': this.item.disabled}, this.item.class];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,6 +4,7 @@ import router from './router';
|
|||
import AutoComplete from './components/autocomplete/AutoComplete';
|
||||
import Accordion from './components/accordion/Accordion';
|
||||
import AccordionTab from './components/accordiontab/AccordionTab';
|
||||
import Breadcrumb from './components/breadcrumb/Breadcrumb';
|
||||
import Button from './components/button/Button';
|
||||
import Calendar from './components/calendar/Calendar';
|
||||
import Card from './components/card/Card';
|
||||
|
|
@ -77,6 +78,7 @@ Vue.config.productionTip = false;
|
|||
Vue.component('Accordion', Accordion);
|
||||
Vue.component('AccordionTab', AccordionTab);
|
||||
Vue.component('AutoComplete', AutoComplete);
|
||||
Vue.component('Breadcrumb', Breadcrumb);
|
||||
Vue.component('Button', Button);
|
||||
Vue.component('Calendar', Calendar);
|
||||
Vue.component('Card', Card);
|
||||
|
|
|
|||
|
|
@ -40,6 +40,11 @@ export default new Router({
|
|||
path: '/autocomplete',
|
||||
name: 'autocomplete',
|
||||
component: () => import('./views/autocomplete/AutoCompleteDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/breadcrumb',
|
||||
name: 'breadcrumb',
|
||||
component: () => import('./views/breadcrumb/BreadcrumbDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/button',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Breadcrumb</h1>
|
||||
<p>Breadcrumb provides contextual information about page hierarchy.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Breadcrumb :home="home" :model="items" />
|
||||
</div>
|
||||
|
||||
<BreadcrumbDoc />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BreadcrumbDoc from './BreadcrumbDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
home: {icon: 'pi pi-home', to: '/'},
|
||||
items: [
|
||||
{label:'Categories'},
|
||||
{label:'Sports'},
|
||||
{label:'Football'},
|
||||
{label:'Countries'},
|
||||
{label:'Spain'},
|
||||
{label:'F.C. Barcelona'},
|
||||
{label:'Squad'},
|
||||
{label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'BreadcrumbDoc': BreadcrumbDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h3>Import</h3>
|
||||
<CodeHighlight lang="javascript">
|
||||
import Breadcrumb from 'primevue/breadcrumb';
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>MenuModel</h3>
|
||||
<p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
|
||||
<CodeHighlight>
|
||||
<Breadcrumb :home="home" :model="items" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
home: {icon: 'pi pi-home', to: '/'},
|
||||
items: [
|
||||
{label:'Categories'},
|
||||
{label:'Sports'},
|
||||
{label:'Football'},
|
||||
{label:'Countries'},
|
||||
{label:'Spain'},
|
||||
{label:'F.C. Barcelona'},
|
||||
{label:'Squad'},
|
||||
{label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<p>Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>model</td>
|
||||
<td>array</td>
|
||||
<td>null</td>
|
||||
<td>An array of menuitems.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>home</td>
|
||||
<td>menuitem</td>
|
||||
<td>null</td>
|
||||
<td>Configuration for the home icon.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Styling</h3>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/menumodel">theming</router-link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-breadcrumb</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem</td>
|
||||
<td>Menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-text</td>
|
||||
<td>Label of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-breadcrumb-chevron</td>
|
||||
<td>Chevron element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Breadcrumb :home="home" :model="items" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
home: {icon: 'pi pi-home', to: '/'},
|
||||
items: [
|
||||
{label:'Categories'},
|
||||
{label:'Sports'},
|
||||
{label:'Football'},
|
||||
{label:'Countries'},
|
||||
{label:'Spain'},
|
||||
{label:'F.C. Barcelona'},
|
||||
{label:'Squad'},
|
||||
{label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Menu</h1>
|
||||
<p>Menu is a navigation / command component that supports dynamic and static positioning..</p>
|
||||
<p>Menu is a navigation / command component that supports dynamic and static positioning.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
import Menu from 'primevue/menu';
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>MenuModel</h3>
|
||||
<p>Menu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>Menu requires a collection of menuitems as its model.</p>
|
||||
<CodeHighlight>
|
||||
|
|
@ -48,9 +51,6 @@ export default {
|
|||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>MenuModel</h3>
|
||||
<p>Menu uses the common MenuModel API to define the items, visit <router-link to="/theming">MenuModel API</router-link> for details.</p>
|
||||
|
||||
<h3>SubMenus</h3>
|
||||
<p>Menu supports one level of nesting via subitems of an item.</p>
|
||||
<CodeHighlight lang="js">
|
||||
|
|
|
|||
Loading…
Reference in New Issue