DEV Community

loading...
Cover image for Vue3 SplitButton

Vue3 SplitButton

primetek profile image PrimeTek ・2 min read

Vue SplitButton groups a set of commands in an overlay with a default command.
It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import SplitButton from 'primevue/splitbutton';
Enter fullscreen mode Exit fullscreen mode

Getting Started

SplitButton has a default command button and a collection of additional options defined by the model property.

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'
                }
            ]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
Enter fullscreen mode Exit fullscreen mode

 MenuModel

SplitButton uses the common MenuModel API to define the items, visit MenuModel API for details.

Severity

Different color options are available as severity levels.

  • .p-button-secondary
  • .p-button-success
  • .p-button-info
  • .p-button-warning
  • .p-button-help
  • .p-button-danger
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
Enter fullscreen mode Exit fullscreen mode

Theming

SplitButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue SplitButton showcase for demos and documentation.

Discussion (0)

pic
Editor guide