browser source for buttons
Tuğçe Küçükoğlu
parent
695048889d
commit
f9ebbc4685
|
|
@ -1,9 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
|
<AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
|
||||||
<h5>Import</h5>
|
<h5>Import via Module</h5>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Button from 'primevue/button';
|
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>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
|
|
@ -624,6 +630,199 @@ export default({
|
||||||
}
|
}
|
||||||
</style>`
|
</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>
|
</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 {
|
.p-splitbutton {
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
</style>` },
|
</style>`
|
||||||
|
},
|
||||||
'composition-api': {
|
'composition-api': {
|
||||||
tabName: 'Composition API Source',
|
tabName: 'Composition API Source',
|
||||||
content:`
|
content:`
|
||||||
|
|
@ -463,7 +464,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
const nestedItems: [
|
const nestedItems = ref([
|
||||||
{
|
{
|
||||||
label:'File',
|
label:'File',
|
||||||
icon:'pi pi-fw pi-file',
|
icon:'pi pi-fw pi-file',
|
||||||
|
|
@ -588,7 +589,7 @@ export default {
|
||||||
label:'Quit',
|
label:'Quit',
|
||||||
icon:'pi pi-fw pi-power-off'
|
icon:'pi pi-fw pi-power-off'
|
||||||
}
|
}
|
||||||
];
|
]);
|
||||||
const save = () => {
|
const save = () => {
|
||||||
toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
||||||
};
|
};
|
||||||
|
|
@ -601,7 +602,218 @@ export default {
|
||||||
.p-splitbutton {
|
.p-splitbutton {
|
||||||
margin-right: .5rem;
|
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