Implemented readonly support
cagataycivici
parent
956698fa37
commit
978dce8c3d
|
|
@ -2,10 +2,14 @@
|
|||
<div :class="containerClass">
|
||||
<ul role="tablist">
|
||||
<li v-for="(item,index) of model" :key="item.to" :class="getItemClass(item)" :style="item.style">
|
||||
<router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)">
|
||||
<router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" v-if="!isItemDisabled(item)">
|
||||
<span class="p-steps-number">{{index + 1}}</span>
|
||||
<span class="p-steps-title">{{item.label}}</span>
|
||||
</router-link>
|
||||
<span v-else class="p-menuitem-link">
|
||||
<span class="p-steps-number">{{index + 1}}</span>
|
||||
<span class="p-steps-title">{{item.label}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -40,8 +44,11 @@ export default {
|
|||
getItemClass(item) {
|
||||
return ['p-steps-item', item.class, {
|
||||
'p-highlight p-steps-current': (this.activeRoute === item.to),
|
||||
'p-disabled': (item.disabled || (this.activeRoute !== item.to && this.readonly))
|
||||
'p-disabled': this.isItemDisabled(item)
|
||||
}];
|
||||
},
|
||||
isItemDisabled(item) {
|
||||
return (item.disabled || (this.readonly && this.activeRoute !== item.to));
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Steps</h1>
|
||||
<p>Steps components is an indicator for the steps in a wizard workflow.</p>
|
||||
<p>Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ import Steps from 'primevue/steps';
|
|||
</CodeHighlight>
|
||||
|
||||
<h3>MenuModel</h3>
|
||||
<p>TabMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
|
||||
<p>Steps 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>TabMenu is integrated with Vue Router and requires a collection of menuitems as its model.</p>
|
||||
<p>Steps is integrated with Vue Router and requires a collection of menuitems as its model.</p>
|
||||
<CodeHighlight>
|
||||
<Menu :model="items" />
|
||||
<Steps :model="items" />
|
||||
<router-view />
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -21,16 +21,32 @@ import Steps from 'primevue/steps';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu'},
|
||||
{label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar'},
|
||||
{label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit'},
|
||||
{label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation'},
|
||||
{label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings'}
|
||||
]
|
||||
items: [{
|
||||
label: 'Personal',
|
||||
to: '/steps'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
to: '/steps/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
to: '/steps/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
to: '/steps/confirmation'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Interactive</h3>
|
||||
<p>Items are readonly by default, if you'd like to make them interactive then disable <i>readonly</i> property.</p>
|
||||
<CodeHighlight>
|
||||
<Steps :model="items" :readonly="false" />
|
||||
<router-view />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -51,6 +67,12 @@ export default {
|
|||
<td>array</td>
|
||||
<td>null</td>
|
||||
<td>An array of menuitems.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>readonly</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether the items are clickable or not.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -68,28 +90,20 @@ export default {
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-tabmenu</td>
|
||||
<td>p-steps</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-tabmenu-nav</td>
|
||||
<td>List element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-tabmenuitem</td>
|
||||
<td>p-steps-item</td>
|
||||
<td>Menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-highlight</td>
|
||||
<td>Active menuitem element.</td>
|
||||
<td>p-steps-number</td>
|
||||
<td>Number of menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-icon</td>
|
||||
<td>Icon of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-text</td>
|
||||
<td>Text of a menuitem.</td>
|
||||
<td>p-steps-title</td>
|
||||
<td>Label of menuitem.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -105,7 +119,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Menu :model="items" />
|
||||
<Steps :model="items" :readonly="false" />
|
||||
<router-view />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
|
@ -114,13 +128,22 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu'},
|
||||
{label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar'},
|
||||
{label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit'},
|
||||
{label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation'},
|
||||
{label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings'}
|
||||
]
|
||||
items: [{
|
||||
label: 'Personal',
|
||||
to: '/steps'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
to: '/steps/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
to: '/steps/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
to: '/steps/confirmation'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue