diff --git a/src/components/splitbutton/SplitButton.vue b/src/components/splitbutton/SplitButton.vue index bacf1d0fa..c43f7b74b 100644 --- a/src/components/splitbutton/SplitButton.vue +++ b/src/components/splitbutton/SplitButton.vue @@ -25,9 +25,9 @@ export default { props: { label: String, icon: String, + model: Array, disabled: Boolean, - tabindex: String, - model: Array + tabindex: String }, data() { return { diff --git a/src/views/splitbutton/SplitButtonDemo.vue b/src/views/splitbutton/SplitButtonDemo.vue index 80572e08d..a2cb6f424 100644 --- a/src/views/splitbutton/SplitButtonDemo.vue +++ b/src/views/splitbutton/SplitButtonDemo.vue @@ -10,11 +10,23 @@ <div class="content-section implementation"> <h3 class="first">Basic</h3> <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton> + + <h3>Severities</h3> + <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-danger"></SplitButton> </div> + + <SplitButtonDoc/> </div> </template> <script> +import SplitButtonDoc from './SplitButtonDoc'; + export default { data() { return { @@ -53,7 +65,11 @@ export default { save() { this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000}); } - } + }, + components: { + 'SplitButtonDoc': SplitButtonDoc + + } } </script> diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue new file mode 100644 index 000000000..c30f2d83f --- /dev/null +++ b/src/views/splitbutton/SplitButtonDoc.vue @@ -0,0 +1,248 @@ +<template> + <div class="content-section documentation"> + <TabView> + <TabPanel header="Documentation"> + <h3>Import</h3> +<CodeHighlight lang="javascript"> +import SplitButton from 'primevue/splitbutton'; +</CodeHighlight> + + <h3>Getting Started</h3> + <p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p> +<CodeHighlight lang="js"> +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', + command: () => { + window.location.hash = "/fileupload" + } + } + ] + } + } +} +</CodeHighlight> + +<CodeHighlight> +<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton> +</CodeHighlight> + + <h3>Severity</h3> + <p>Different color options are available as severity levels.</p> + + <ul> + <li>.p-button-secondary</li> + <li>.p-button-success</li> + <li>.p-button-info</li> + <li>.p-button-warning</li> + <li>.p-button-danger</li> + </ul> + +<CodeHighlight> +<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-danger"></SplitButton> +</CodeHighlight> + + <h3>Properties</h3> + <div class="doc-tablewrapper"> + <table class="doc-table"> + <thead> + <tr> + <th>Name</th> + <th>Type</th> + <th>Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>label</td> + <td>string</td> + <td>null</td> + <td>Text of the button.</td> + </tr> + <tr> + <td>icon</td> + <td>string</td> + <td>null</td> + <td>Name of the icon.</td> + </tr> + <tr> + <td>model</td> + <td>object</td> + <td>null</td> + <td>MenuModel instance to define the overlay items.</td> + </tr> + <tr> + <td>disabled</td> + <td>boolean</td> + <td>false</td> + <td>When present, it specifies that the component should be disabled.</td> + </tr> + <tr> + <td>tabIndex</td> + <td>string</td> + <td>null</td> + <td>Index of the element in tabbing order.</td> + </tr> + </tbody> + </table> + </div> + + <h3>Events</h3> + <div class="doc-tablewrapper"> + <table class="doc-table"> + <thead> + <tr> + <th>Name</th> + <th>Parameters</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>click</td> + <td>event: Browser event</td> + <td>Callback to invoke when main button is clicked.</td> + </tr> + </tbody> + </table> + </div> + + <h3>Styling</h3> + <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> + <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-button</td> + <td>Dropdown button.</td> + </tr> + <tr> + <td>p-menu</td> + <td>Overlay menu.</td> + </tr> + </tbody> + </table> + </div> + + <h3>Dependencies</h3> + <p>None.</p> + </TabPanel> + + <TabPanel header="Source"> + <a href="https://github.com/primefaces/primevue/tree/master/src/views/splitbutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> + <span>View on GitHub</span> + </a> +<CodeHighlight> +<template v-pre> +<template> + <div> + <div class="content-section introduction"> + <div class="feature-intro"> + <h1>SplitButton</h1> + <p>SplitButton groups a set of commands in an overlay with a default command.</p> + </div> + </div> + + <div class="content-section implementation"> + <h3 class="first">Basic</h3> + <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton> + </div> + </div> +</template> +</template> +</CodeHighlight> + +<CodeHighlight lang="javascript"> +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', + command: () => { + window.location.hash = "/fileupload" + } + } + ] + } + }, + methods: { + save() { + this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000}); + } + } +} +</CodeHighlight> + +<CodeHighlight lang="css"> +.p-splitbutton { + margin-right: .5em; +} +</CodeHighlight> + </TabPanel> + </TabView> + </div> +</template> \ No newline at end of file