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

Fixed #1795 - Templating for SplitButton

pull/1996/head
Tuğçe Küçükoğlu 2022-01-14 16:38:15 +03:00 committed by Tuğçe Küçükoğlu
parent 0da16479d6
commit f9bca655e5
4 changed files with 520 additions and 471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/splitbutton/SplitButton.d.ts vendored
View File

@ -1,3 +1,4 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { MenuItem } from '../menuitem';
@ -43,6 +44,10 @@ export interface SplitButtonProps {
}
export interface SplitButtonSlots {
/**
* Button part of the content can easily be customized with the default slot instead of using the built-in modes.
*/
default: () => VNode[];
}
export declare type SplitButtonEmits = {

2
src/components/splitbutton/SplitButton.vue
View File

@ -1,6 +1,8 @@
<template>
<div :class="containerClass" :style="style">
<slot>
<PVSButton type="button" class="p-splitbutton-defaultbutton" v-bind="$attrs" :icon="icon" :label="label" @click="onDefaultButtonClick" />
</slot>
<PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-chevron-down" @click="onDropdownButtonClick" :disabled="$attrs.disabled"
aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
<PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex"

8
src/views/splitbutton/SplitButtonDemo.vue
View File

@ -24,6 +24,14 @@
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></SplitButton>
<h5>Templating</h5>
<SplitButton :model="items" class="bg-primary border-round">
<Button @click="save">
<img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" />
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
</Button>
</SplitButton>
</div>
</div>

52
src/views/splitbutton/SplitButtonDoc.vue
View File

@ -15,6 +15,11 @@ import SplitButton from 'primevue/splitbutton';
<h5>Getting Started</h5>
<p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
<pre v-code><code>
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
</code></pre>
<pre v-code.script><code>
export default {
data() {
@ -51,11 +56,6 @@ export default {
}
}
</code></pre>
<pre v-code><code>
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
</code></pre>
<h5>MenuModel</h5>
@ -82,6 +82,18 @@ export default {
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"&gt;&lt;/SplitButton&gt;
</code></pre>
<h5>Templating</h5>
<p>Button part of the content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code><code>
&lt;SplitButton :model="items" class="bg-primary border-round"&gt;
&lt;Button @click="save"&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" /&gt;
&lt;span class="ml-2 flex align-items-center font-bold"&gt;PrimeVue&lt;/span&gt;
&lt;/Button&gt;
&lt;/SplitButton&gt;
</code></pre>
<h5>Properties</h5>
@ -228,6 +240,14 @@ export default {
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></SplitButton>
<h5>Templating</h5>
<SplitButton :model="items" class="bg-primary border-round">
<Button @click="save">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1rem" />
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
</Button>
</SplitButton>
</div>
</template>
@ -280,8 +300,7 @@ export default {
{
label:'Video',
icon:'pi pi-fw pi-video'
},
}
]
},
{
@ -371,8 +390,7 @@ export default {
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
}
]
},
{
@ -432,6 +450,14 @@ export default {
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></SplitButton>
<h5>Templating</h5>
<SplitButton :model="items" class="bg-primary border-round">
<Button @click="save">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1rem" />
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
</Button>
</SplitButton>
</div>
</template>
@ -633,6 +659,14 @@ export default {
<p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></p-splitbutton>
<p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></p-splitbutton>
<p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></p-splitbutton>
<h5>Templating</h5>
<p-splitbutton :model="items" class="bg-primary border-round">
<p-button @click="save">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1rem" />
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
</p-button>
</p-splitbutton>
</div>
<script>