browser source for buttons
Tuğçe Küçükoğlu
parent
695048889d
commit
f9ebbc4685
|
|
@ -1,9 +1,15 @@
|
|||
<template>
|
||||
<AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
|
||||
<h5>Import</h5>
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Button from 'primevue/button';
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Import via CDN</h5>
|
||||
<pre v-code><code>
|
||||
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
|
|
@ -624,6 +630,199 @@ export default({
|
|||
}
|
||||
</style>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
content: `
|
||||
<div id="app">
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<p-button label="Submit"></p-button>
|
||||
<p-button label="Disabled" disabled="disabled"></p-button>
|
||||
<p-button label="Link" class="p-button-link"></p-button>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<p-button icon="pi pi-check"></p-button>
|
||||
<p-button label="Submit" icon="pi pi-check"></p-button>
|
||||
<p-button label="Submit" icon="pi pi-check" iconPos="right"></p-button>
|
||||
|
||||
<h5>Severities</h5>
|
||||
<p-button label="Primary"></p-button>
|
||||
<p-button label="Secondary" class="p-button-secondary"></p-button>
|
||||
<p-button label="Success" class="p-button-success"></p-button>
|
||||
<p-button label="Info" class="p-button-info"></p-button>
|
||||
<p-button label="Warning" class="p-button-warning"></p-button>
|
||||
<p-button label="Help" class="p-button-help"></p-button>
|
||||
<p-button label="Danger" class="p-button-danger"></p-button>
|
||||
|
||||
<h5>Raised Buttons</h5>
|
||||
<p-button label="Primary" class="p-button-raised"></p-button>
|
||||
<p-button label="Secondary" class="p-button-raised p-button-secondary"></p-button>
|
||||
<p-button label="Success" class="p-button-raised p-button-success"></p-button>
|
||||
<p-button label="Info" class="p-button-raised p-button-info"></p-button>
|
||||
<p-button label="Warning" class="p-button-raised p-button-warning"></p-button>
|
||||
<p-button label="Help" class="p-button-raised p-button-help"></p-button>
|
||||
<p-button label="Danger" class="p-button-raised p-button-danger"></p-button>
|
||||
|
||||
<h5>Rounded Buttons</h5>
|
||||
<p-button label="Primary" class="p-button-rounded"></p-button>
|
||||
<p-button label="Secondary" class="p-button-rounded p-button-secondary"></p-button>
|
||||
<p-button label="Success" class="p-button-rounded p-button-success"></p-button>
|
||||
<p-button label="Info" class="p-button-rounded p-button-info"></p-button>
|
||||
<p-button label="Warning" class="p-button-rounded p-button-warning"></p-button>
|
||||
<p-button label="Help" class="p-button-rounded p-button-help"></p-button>
|
||||
<p-button label="Danger" class="p-button-rounded p-button-danger"></p-button>
|
||||
|
||||
<h5>Text Buttons</h5>
|
||||
<p-button label="Primary" class="p-button-text"></p-button>
|
||||
<p-button label="Secondary" class="p-button-secondary p-button-text"></p-button>
|
||||
<p-button label="Success" class="p-button-success p-button-text"></p-button>
|
||||
<p-button label="Info" class="p-button-info p-button-text"></p-button>
|
||||
<p-button label="Warning" class="p-button-warning p-button-text"></p-button>
|
||||
<p-button label="Help" class="p-button-help p-button-text"></p-button>
|
||||
<p-button label="Danger" class="p-button-danger p-button-text"></p-button>
|
||||
<p-button label="Plain" class="p-button-text p-button-plain"></p-button>
|
||||
|
||||
<h5>Raised Text Buttons</h5>
|
||||
<p-button label="Primary" class="p-button-raised p-button-text"></p-button>
|
||||
<p-button label="Secondary" class="p-button-raised p-button-secondary p-button-text"></p-button>
|
||||
<p-button label="Success" class="p-button-raised p-button-success p-button-text"></p-button>
|
||||
<p-button label="Info" class="p-button-raised p-button-info p-button-text"></p-button>
|
||||
<p-button label="Warning" class="p-button-raised p-button-warning p-button-text"></p-button>
|
||||
<p-button label="Help" class="p-button-raised p-button-help p-button-text"></p-button>
|
||||
<p-button label="Danger" class="p-button-raised p-button-danger p-button-text"></p-button>
|
||||
<p-button label="Plain" class="p-button-raised p-button-text p-button-plain"></p-button>
|
||||
|
||||
<h5>Outlined Buttons</h5>
|
||||
<p-button label="Primary" class="p-button-outlined"></p-button>
|
||||
<p-button label="Secondary" class="p-button-outlined p-button-secondary"></p-button>
|
||||
<p-button label="Success" class="p-button-outlined p-button-success"></p-button>
|
||||
<p-button label="Info" class="p-button-outlined p-button-info"></p-button>
|
||||
<p-button label="Warning" class="p-button-outlined p-button-warning"></p-button>
|
||||
<p-button label="Help" class="p-button-outlined p-button-help"></p-button>
|
||||
<p-button label="Danger" class="p-button-outlined p-button-danger"></p-button>
|
||||
|
||||
<h5>Rounded Icon Buttons</h5>
|
||||
<p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary"></p-button>
|
||||
<p-button icon="pi pi-search" class="p-button-rounded p-button-success"></p-button>
|
||||
<p-button icon="pi pi-user" class="p-button-rounded p-button-info"></p-button>
|
||||
<p-button icon="pi pi-bell" class="p-button-rounded p-button-warning"></p-button>
|
||||
<p-button icon="pi pi-heart" class="p-button-rounded p-button-help"></p-button>
|
||||
<p-button icon="pi pi-times" class="p-button-rounded p-button-danger"></p-button>
|
||||
<p-button icon="pi pi-check" class="p-button-rounded"></p-button>
|
||||
|
||||
<h5>Rounded Text Icon Buttons</h5>
|
||||
<p-button icon="pi pi-check" class="p-button-rounded p-button-text"></p-button>
|
||||
<p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text"></p-button>
|
||||
<p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text"></p-button>
|
||||
<p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text"></p-button>
|
||||
<p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text"></p-button>
|
||||
<p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text"></p-button>
|
||||
<p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></p-button>
|
||||
<p-button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain"></p-button>
|
||||
|
||||
<h5>Rounded and Outlined Icon Buttons</h5>
|
||||
<p-button icon="pi pi-check" class="p-button-rounded p-button-outlined"></p-button>
|
||||
<p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined"></p-button>
|
||||
<p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined"></p-button>
|
||||
<p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined"></p-button>
|
||||
<p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined"></p-button>
|
||||
<p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined"></p-button>
|
||||
<p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined"></p-button>
|
||||
|
||||
<h5>Badges</h5>
|
||||
<p-button type="button" label="Emails" badge="8"></p-button>
|
||||
<p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
|
||||
|
||||
<h5>Loading</h5>
|
||||
<p-button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)"></p-button>
|
||||
<p-button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"></p-button>
|
||||
<p-button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)"></p-button>
|
||||
<p-button type="button" label="Search" :loading="loading[3]" @click="load(3)"></p-button>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<p-button type="button" class="p-px-3">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
|
||||
</p-button>
|
||||
<p-button type="button" class="p-button-outlined p-button-success">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
|
||||
<span class="p-ml-2 p-text-bold">PrimeVue</span>
|
||||
</p-button>
|
||||
|
||||
<h5>Button Set</h5>
|
||||
<span class="p-buttonset">
|
||||
<p-button label="Save" icon="pi pi-check"></p-button>
|
||||
<p-button label="Delete" icon="pi pi-trash"></p-button>
|
||||
<p-button label="Cancel" icon="pi pi-times"></p-button>
|
||||
</span>
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<div class="sizes">
|
||||
<p-button label="Small" icon="pi pi-check" class="p-button-sm"></p-button>
|
||||
<p-button label="Normal" icon="pi pi-check" class="p-button"></p-button>
|
||||
<p-button label="Large" icon="pi pi-check" class="p-button-lg"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const loading = ref([false, false, false]);
|
||||
const load = (index) => {
|
||||
loading.value[index] = true;
|
||||
setTimeout(() => loading.value[index] = false, 1000);
|
||||
}
|
||||
|
||||
return {loading, load};
|
||||
},
|
||||
components: {
|
||||
"p-button": primevue.button
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default, { ripple: true })
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.p-button {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sizes .button {
|
||||
margin-bottom: .5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sizes .button:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.p-button {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.p-button:not(.p-button-icon-only) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -704,7 +704,217 @@ export default {
|
|||
</style>
|
||||
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/speeddial/speeddial.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/tooltip/tooltip.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<p-toast></p-toast>
|
||||
<div class="card">
|
||||
<h5>Linear</h5>
|
||||
<div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
|
||||
<p-speeddial :model="items" direction="up"></p-speeddial>
|
||||
<p-speeddial :model="items" direction="down"></p-speeddial>
|
||||
<p-speeddial :model="items" direction="left"></p-speeddial>
|
||||
<p-speeddial :model="items" direction="right"></p-speeddial>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Circle, Semi-Circle and Quarter-Circle</h5>
|
||||
<div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
|
||||
<p-speeddial :model="items" :radius="80" type="circle" button-class="p-button-warning"></p-speeddial>
|
||||
<p-speeddial :model="items" :radius="80" direction="up" type="semi-circle"></p-speeddial>
|
||||
<p-speeddial :model="items" :radius="80" direction="down" type="semi-circle"></p-speeddial>
|
||||
<p-speeddial :model="items" :radius="80" direction="left" type="semi-circle"></p-speeddial>
|
||||
<p-speeddial :model="items" :radius="80" direction="right" type="semi-circle"></p-speeddial>
|
||||
<p-speeddial :model="items" :radius="120" direction="up-left" type="quarter-circle" button-class="p-button-success"></p-speeddial>
|
||||
<p-speeddial :model="items" :radius="120" direction="up-right" type="quarter-circle" button-class="p-button-success"></p-speeddial>
|
||||
<p-speeddial :model="items" :radius="120" direction="down-left" type="quarter-circle" button-class="p-button-success"></p-speeddial>
|
||||
<p-speeddial :model="items" :radius="120" direction="down-right" type="quarter-circle" button-class="p-button-success"></p-speeddial>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Tooltip</h5>
|
||||
<div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
|
||||
<p-speeddial :model="items" direction="up" class="speeddial-right" button-class="p-button-danger" :tooltip-options="{position: 'left'}"></p-speeddial>
|
||||
|
||||
<p-speeddial :model="items" direction="up" class="speeddial-left" button-class="p-button-help" :tooltip-options="{position: 'right'}"></p-speeddial>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Transition Duration, Icon and No Rotate Animation</h5>
|
||||
<div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }">
|
||||
<p-speeddial :model="items" direction="up" :transition-delay="80" show-icon="pi pi-bars" hide-icon="pi pi-times" button-class="p-button-outlined"></p-speeddial>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Mask</h5>
|
||||
<div class="speeddial-mask-demo" :style="{ position: 'relative', height: '350px' }">
|
||||
<p-speeddial :model="items" direction="up" mask></p-speeddial>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
const { useToast } = primevue.usetoast;
|
||||
const Tooltip = primevue.tooltip;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const toast = useToast();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Add',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => {
|
||||
toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash',
|
||||
command: () => {
|
||||
toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
window.location.hash = "/fileupload"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/'
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
return { items }
|
||||
},
|
||||
components: {
|
||||
"p-speeddial": primevue.speeddial,
|
||||
"p-toast": primevue.toast
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.use(primevue.toastservice)
|
||||
.directive("tooltip", Tooltip)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.speeddial-linear-demo .p-speeddial-direction-up {
|
||||
left: calc(50% - 2rem);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.speeddial-linear-demo .p-speeddial-direction-down {
|
||||
left: calc(50% - 2rem);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.speeddial-linear-demo .p-speeddial-direction-left {
|
||||
right: 0;
|
||||
top: calc(50% - 2rem);
|
||||
}
|
||||
|
||||
.speeddial-linear-demo .p-speeddial-direction-right {
|
||||
left: 0;
|
||||
top: calc(50% - 2rem);
|
||||
}
|
||||
|
||||
.speeddial-circle-demo .p-speeddial-circle {
|
||||
top: calc(50% - 2rem);
|
||||
left: calc(50% - 2rem);
|
||||
}
|
||||
|
||||
.speeddial-circle-demo .p-speeddial-semi-circle.p-speeddial-direction-up {
|
||||
left: calc(50% - 2rem);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.speeddial-circle-demo .p-speeddial-semi-circle.p-speeddial-direction-down {
|
||||
left: calc(50% - 2rem);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.speeddial-circle-demo .p-speeddial-semi-circle.p-speeddial-direction-left {
|
||||
right: 0;
|
||||
top: calc(50% - 2rem);
|
||||
}
|
||||
|
||||
.speeddial-circle-demo .p-speeddial-semi-circle.p-speeddial-direction-right {
|
||||
left: 0;
|
||||
top: calc(50% - 2rem);
|
||||
}
|
||||
|
||||
.speeddial-circle-demo .p-speeddial-quarter-circle.p-speeddial-direction-up-left {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.speeddial-circle-demo .p-speeddial-quarter-circle.p-speeddial-direction-up-right {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.speeddial-circle-demo .p-speeddial-quarter-circle.p-speeddial-direction-down-left {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.speeddial-circle-demo .p-speeddial-quarter-circle.p-speeddial-direction-down-right {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.speeddial-tooltip-demo .p-speeddial-direction-up.speeddial-left {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.speeddial-tooltip-demo .p-speeddial-direction-up.speeddial-right {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.speeddial-delay-demo .p-speeddial-direction-up {
|
||||
left: calc(50% - 2rem);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.speeddial-mask-demo .p-speeddial-direction-up {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
`
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -402,7 +402,8 @@ export default {
|
|||
.p-splitbutton {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
</style>` },
|
||||
</style>`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API Source',
|
||||
content:`
|
||||
|
|
@ -463,7 +464,7 @@ export default {
|
|||
}
|
||||
}
|
||||
]);
|
||||
const nestedItems: [
|
||||
const nestedItems = ref([
|
||||
{
|
||||
label:'File',
|
||||
icon:'pi pi-fw pi-file',
|
||||
|
|
@ -588,7 +589,7 @@ export default {
|
|||
label:'Quit',
|
||||
icon:'pi pi-fw pi-power-off'
|
||||
}
|
||||
];
|
||||
]);
|
||||
const save = () => {
|
||||
toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
||||
};
|
||||
|
|
@ -601,7 +602,218 @@ export default {
|
|||
.p-splitbutton {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
</style>` },
|
||||
</style>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/splitbutton/splitbutton.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>`,
|
||||
content:`
|
||||
<div id="app">
|
||||
<p-toast></p-toast>
|
||||
|
||||
<h5>Basic</h5>
|
||||
<p-splitbutton label="Save" icon="pi pi-plus" @click="save" :model="items"></p-splitbutton>
|
||||
|
||||
<h5>Nested</h5>
|
||||
<p-splitbutton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></p-splitbutton>
|
||||
|
||||
<h5>Severities</h5>
|
||||
<p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></p-splitbutton>
|
||||
<p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></p-splitbutton>
|
||||
<p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></p-splitbutton>
|
||||
<p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></p-splitbutton>
|
||||
<p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></p-splitbutton>
|
||||
<p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></p-splitbutton>
|
||||
<p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></p-splitbutton>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, ref } = Vue;
|
||||
const { useToast } = primevue.usetoast;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const toast = useToast();
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/'
|
||||
}
|
||||
},
|
||||
{ label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
window.location.hash = "/fileupload"
|
||||
}
|
||||
}
|
||||
]);
|
||||
const nestedItems = ref([
|
||||
{
|
||||
label:'File',
|
||||
icon:'pi pi-fw pi-file',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-plus',
|
||||
items:[
|
||||
{
|
||||
label:'Bookmark',
|
||||
icon:'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label:'Video',
|
||||
icon:'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
label:'Export',
|
||||
icon:'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Left',
|
||||
icon:'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label:'Right',
|
||||
icon:'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label:'Center',
|
||||
icon:'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label:'Justify',
|
||||
icon:'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Users',
|
||||
icon:'pi pi-fw pi-user',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-user-plus',
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-user-minus',
|
||||
},
|
||||
{
|
||||
label:'Search',
|
||||
icon:'pi pi-fw pi-users',
|
||||
items:[
|
||||
{
|
||||
label:'Filter',
|
||||
icon:'pi pi-fw pi-filter',
|
||||
items:[
|
||||
{
|
||||
label:'Print',
|
||||
icon:'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon:'pi pi-fw pi-bars',
|
||||
label:'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Events',
|
||||
icon:'pi pi-fw pi-calendar',
|
||||
items:[
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Save',
|
||||
icon:'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Archieve',
|
||||
icon:'pi pi-fw pi-calendar-times',
|
||||
items:[
|
||||
{
|
||||
label:'Remove',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
label:'Quit',
|
||||
icon:'pi pi-fw pi-power-off'
|
||||
}
|
||||
]);
|
||||
const save = () => {
|
||||
toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
||||
};
|
||||
return {items, nestedItems, save, toast}
|
||||
},
|
||||
components: {
|
||||
"p-splitbutton": primevue.splitbutton,
|
||||
"p-toast": primevue.toast
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.use(primevue.toastservice)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.p-splitbutton {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue