mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 17:02:38 +00:00
Merged new Docs and Demos
This commit is contained in:
Cagatay Civici
parent
296cc217fb
commit
dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
148
doc/splitbutton/AccessibilityDoc.vue
Normal file
148
doc/splitbutton/AccessibilityDoc.vue
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>
|
||||
SplitButton component renders two native button elements, main button uses the label property to define <i>aria-label</i> by default which can be customized with <i>buttonProps</i>. Dropdown button requires an explicit definition to
|
||||
describe it using <i>menuButtonProps</i> option and also includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button.
|
||||
</p>
|
||||
|
||||
<p>The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the dropdown button.</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<h3>Main Button Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<i>enter</i>
|
||||
</td>
|
||||
<td>Activates the button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i>space</i>
|
||||
</td>
|
||||
<td>Activates the button.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Menu Button Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="inline-flex flex-column">
|
||||
<i class="mb-1">enter</i>
|
||||
<i class="mb-1">space</i>
|
||||
<i class="mb-1">down arrow</i>
|
||||
<i>up arrow</i>
|
||||
</span>
|
||||
</td>
|
||||
<td>Opens the menu and moves focus to the first item.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Menu Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<i>enter</i>
|
||||
</td>
|
||||
<td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i>space</i>
|
||||
</td>
|
||||
<td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i>escape</i>
|
||||
</td>
|
||||
<td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i>down arrow</i>
|
||||
</td>
|
||||
<td>Moves focus to the next menuitem within the submenu.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i>up arrow</i>
|
||||
</td>
|
||||
<td>Moves focus to the previous menuitem within the submenu.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>alt</i> + <i>up arrow</i></td>
|
||||
<td>Closes the popup, then moves focus to the target element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>right arrow</i></td>
|
||||
<td>In nested mode if option is closed, opens the option otherwise moves focus to the first child option.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>left arrow</i></td>
|
||||
<td>In nested mode if option is open, closes the option otherwise moves focus to the parent option.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i>home</i>
|
||||
</td>
|
||||
<td>Moves focus to the first menuitem within the submenu.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i>end</i>
|
||||
</td>
|
||||
<td>Moves focus to the last menuitem within the submenu.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>any printable character</i></td>
|
||||
<td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton :buttonProps="{'aria-label': 'Default Action'}" :menuButtonProps="{'aria-label': 'More Options'}" />`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
137
doc/splitbutton/BasicDoc.vue
Normal file
137
doc/splitbutton/BasicDoc.vue
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
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', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
136
doc/splitbutton/DisabledDoc.vue
Normal file
136
doc/splitbutton/DisabledDoc.vue
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
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', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
17
doc/splitbutton/ImportDoc.vue
Normal file
17
doc/splitbutton/ImportDoc.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import SplitButton from 'primevue/splitbutton';`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
161
doc/splitbutton/OutlinedDoc.vue
Normal file
161
doc/splitbutton/OutlinedDoc.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Outlined buttons display a border without a background initially.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toast() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
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', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
161
doc/splitbutton/RaisedDoc.vue
Normal file
161
doc/splitbutton/RaisedDoc.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Raised buttons display a shadow to indicate elevation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
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', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
161
doc/splitbutton/RaisedTextDoc.vue
Normal file
161
doc/splitbutton/RaisedTextDoc.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Text buttons can be displayed as raised as well for elevation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
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', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
161
doc/splitbutton/RoundedDoc.vue
Normal file
161
doc/splitbutton/RoundedDoc.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Rounded buttons have a circular border radius.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
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', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
161
doc/splitbutton/SeverityDoc.vue
Normal file
161
doc/splitbutton/SeverityDoc.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>severity</i> option specifies the type of the message.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
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', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
144
doc/splitbutton/SizesDoc.vue
Normal file
144
doc/splitbutton/SizesDoc.vue
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>SplitButton provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex align-items-center justify-content-center flex-wrap gap-3">
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-sm"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-lg"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-sm mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-lg mb-2"></SplitButton>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex align-items-center justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-sm mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-lg mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex align-items-center justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-sm mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-lg mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
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', to: '/fileupload' }];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
33
doc/splitbutton/StyleDoc.vue
Normal file
33
doc/splitbutton/StyleDoc.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<DocSectionText id="style" label="Style" v-bind="$attrs">
|
||||
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
|
||||
</DocSectionText>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-splitbutton</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-splitbutton-defaultbutton</td>
|
||||
<td>Default button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-splitbutton-menubutton</td>
|
||||
<td>Dropdown button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-tieredmenu</td>
|
||||
<td>Overlay menu.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
157
doc/splitbutton/TemplateDoc.vue
Normal file
157
doc/splitbutton/TemplateDoc.vue
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
|
||||
<Button @click="save">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
|
||||
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
|
||||
</Button>
|
||||
</SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
|
||||
<Button @click="save">
|
||||
<img alt="logo" src="/images/logo.svg" style="width: 1rem" />
|
||||
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
|
||||
</Button>
|
||||
</SplitButton>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
|
||||
<Button @click="save">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
|
||||
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
|
||||
</Button>
|
||||
</SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Toast />
|
||||
<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
|
||||
<Button @click="save">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
|
||||
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
|
||||
</Button>
|
||||
</SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
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', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
161
doc/splitbutton/TextDoc.vue
Normal file
161
doc/splitbutton/TextDoc.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Text buttons are displayed as textual elements.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$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', to: '/fileupload' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center flex-wrap gap-3">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-secondary mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
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', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue