vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Initiated Steps Component

pull/132/head
cagataycivici 2019-12-06 16:52:42 +03:00
parent 1b9cfe1420
commit 956698fa37
12 changed files with 53 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/steps/Steps.vue
View File

@ -1,6 +1,13 @@
<template>
<div :class="containerClass">
Steps
<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)">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</router-link>
</li>
</ul>
</div>
</template>
@ -17,7 +24,25 @@ export default {
}
},
methods: {
onItemClick(event, item) {
if (item.disabled || this.readonly) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
},
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))
}];
}
},
computed: {
activeRoute() {
@ -45,8 +70,6 @@ export default {
.p-steps .p-steps-item {
float: left;
box-sizing: border-box;
cursor: pointer;
}
.p-steps.p-steps-readonly .p-steps-item {

4
src/views/steps/ConfirmationDemo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-check" style="font-size: 3em" />
<div class="stepsdemo-content">
<i class="pi pi-fw pi-check" />
<h1>Confirmation Component Content</h1>
</div>
</template>

4
src/views/steps/PaymentDemo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-money-bill" style="font-size: 3em" />
<div class="stepsdemo-content">
<i class="pi pi-fw pi-money-bill" />
<h1>Payment Component Content</h1>
</div>
</template>

4
src/views/steps/PersonalDemo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-user" style="font-size: 3em" />
<div class="stepsdemo-content">
<i class="pi pi-fw pi-user" />
<h1>Personal Component Content</h1>
</div>
</template>

4
src/views/steps/SeatDemo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-ticket" style="font-size: 3em" />
<div class="stepsdemo-content">
<i class="pi pi-fw pi-ticket" />
<h1>Seat Component Content</h1>
</div>
</template>

28
src/views/steps/StepsDemo.vue
View File

@ -3,12 +3,12 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>Steps</h1>
<p>Steps components is an indicator for the steps in a workflow.</p>
<p>Steps components is an indicator for the steps in a wizard workflow.</p>
</div>
</div>
<div class="content-section implementation">
<Steps :model="items" />
<Steps :model="items" :readonly="false" />
<router-view/>
</div>
@ -24,31 +24,19 @@ export default {
return {
items: [{
label: 'Personal',
to: '/steps',
command: (event) => {
this.$toast.add({severity:'info', summary:'First Step', detail: event.item.label});
}
to: '/steps'
},
{
label: 'Seat',
to: '/steps/seat',
command: (event) => {
this.$toast.add({severity:'info', summary:'Second Step', detail: event.item.label});
}
to: '/steps/seat'
},
{
label: 'Payment',
to: '/steps/payment',
command: (event) => {
this.$toast.add({severity:'info', summary:'Third Step', detail: event.item.label});
}
to: '/steps/payment'
},
{
label: 'Confirmation',
to: '/steps/confirmation',
command: (event) => {
this.$toast.add({severity:'info', summary:'Last Step', detail: event.item.label});
}
to: '/steps/confirmation'
}]
}
},
@ -64,10 +52,14 @@ export default {
font-weight: 400;
display: inline-block;
vertical-align: middle;
font-size: 24px;
margin-top: 1em;
}
i {
vertical-align: middle;
font-size: 2em;
margin-top: .3em;
}
}
</style>

2
src/views/tabmenu/CalendarDemo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-calendar" style="font-size: 3em" />
<i class="pi pi-fw pi-calendar" />
<h1>Calendar Component Content</h1>
</div>
</template>

2
src/views/tabmenu/DocumentationDemo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-file" style="font-size: 3em" />
<i class="pi pi-fw pi-file" />
<h1>Documentation Component Content</h1>
</div>
</template>

2
src/views/tabmenu/EditDemo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-pencil" style="font-size: 3em" />
<i class="pi pi-fw pi-pencil" />
<h1>Edit Component Content</h1>
</div>
</template>

2
src/views/tabmenu/HomeDemo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-home" style="font-size: 3em" />
<i class="pi pi-fw pi-home" />
<h1>Home Component Content</h1>
</div>
</template>

2
src/views/tabmenu/SettingsDemo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-cog" style="font-size: 3em" />
<i class="pi pi-fw pi-cog" />
<h1>Settings Component Content</h1>
</div>
</template>

5
src/views/tabmenu/TabMenuDemo.vue
View File

@ -43,11 +43,14 @@ export default {
font-weight: 400;
display: inline-block;
vertical-align: middle;
font-size: 24px;
margin-top: 1em;
}
i {
vertical-align: middle;
font-size: 2em;
margin-top: .3em;
}
}
</style>