SpeedDial template demo updated
tugcekucukoglu
parent
0cab80c37d
commit
a6af490275
|
|
@ -7513,7 +7513,7 @@
|
||||||
"name": "previousButton",
|
"name": "previousButton",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"readonly": false,
|
"readonly": false,
|
||||||
"type": "CalendarPassThroughOptionType",
|
"type": "ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
|
||||||
"default": "",
|
"default": "",
|
||||||
"description": "Used to pass attributes to the previous button's DOM element."
|
"description": "Used to pass attributes to the previous button's DOM element."
|
||||||
},
|
},
|
||||||
|
|
@ -7553,9 +7553,9 @@
|
||||||
"name": "nextButton",
|
"name": "nextButton",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"readonly": false,
|
"readonly": false,
|
||||||
"type": "CalendarPassThroughOptionType",
|
"type": "ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
|
||||||
"default": "",
|
"default": "",
|
||||||
"description": "Used to pass attributes to the previous button's DOM element."
|
"description": "Used to pass attributes to the next button's DOM element."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "container",
|
"name": "container",
|
||||||
|
|
@ -8273,14 +8273,6 @@
|
||||||
"default": "date",
|
"default": "date",
|
||||||
"description": "Type of view to display."
|
"description": "Type of view to display."
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "touchUI",
|
|
||||||
"optional": true,
|
|
||||||
"readonly": false,
|
|
||||||
"type": "boolean",
|
|
||||||
"default": "false",
|
|
||||||
"description": "When enabled, calendar overlay is displayed as optimized for touch devices."
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "monthNavigator",
|
"name": "monthNavigator",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
|
|
@ -8596,6 +8588,22 @@
|
||||||
"default": "",
|
"default": "",
|
||||||
"description": "Used to pass all properties of the ButtonProps to the clear button component."
|
"description": "Used to pass all properties of the ButtonProps to the clear button component."
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "navigatorButtonProps",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "object",
|
||||||
|
"default": "",
|
||||||
|
"description": "Used to pass all properties of the ButtonProps to the navigator button component."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "timepickerButtonProps",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "object",
|
||||||
|
"default": "",
|
||||||
|
"description": "Used to pass all properties of the ButtonProps to the timepicker button component."
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "ariaLabelledby",
|
"name": "ariaLabelledby",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
|
|
@ -45636,22 +45644,6 @@
|
||||||
"default": "",
|
"default": "",
|
||||||
"description": "Used to pass attributes to the root's DOM element."
|
"description": "Used to pass attributes to the root's DOM element."
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "cancelItem",
|
|
||||||
"optional": true,
|
|
||||||
"readonly": false,
|
|
||||||
"type": "RatingPassThroughOptionType",
|
|
||||||
"default": "",
|
|
||||||
"description": "Used to pass attributes to the cancel item's DOM element."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "cancelIcon",
|
|
||||||
"optional": true,
|
|
||||||
"readonly": false,
|
|
||||||
"type": "RatingPassThroughOptionType",
|
|
||||||
"default": "",
|
|
||||||
"description": "Used to pass attributes to the cancel icon's DOM element."
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "item",
|
"name": "item",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
|
|
@ -45676,22 +45668,6 @@
|
||||||
"default": "",
|
"default": "",
|
||||||
"description": "Used to pass attributes to the off icon's DOM element."
|
"description": "Used to pass attributes to the off icon's DOM element."
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "hiddenCancelInputWrapper",
|
|
||||||
"optional": true,
|
|
||||||
"readonly": false,
|
|
||||||
"type": "RatingPassThroughOptionType",
|
|
||||||
"default": "",
|
|
||||||
"description": "Used to pass attributes to the hidden cancel inputW wapper's DOM element."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "hiddenCancelInput",
|
|
||||||
"optional": true,
|
|
||||||
"readonly": false,
|
|
||||||
"type": "RatingPassThroughOptionType",
|
|
||||||
"default": "",
|
|
||||||
"description": "Used to pass attributes to the hidden cancel input's DOM element."
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "hiddenItemInputWrapper",
|
"name": "hiddenItemInputWrapper",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
|
|
@ -45845,15 +45821,6 @@
|
||||||
"default": "5",
|
"default": "5",
|
||||||
"description": "Number of stars."
|
"description": "Number of stars."
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "cancel",
|
|
||||||
"optional": true,
|
|
||||||
"readonly": false,
|
|
||||||
"type": "boolean",
|
|
||||||
"default": "false",
|
|
||||||
"description": "When specified a cancel icon is displayed to allow clearing the value.",
|
|
||||||
"deprecated": "since v4.0.0-beta.1"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "onIcon",
|
"name": "onIcon",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
|
|
@ -45872,15 +45839,6 @@
|
||||||
"description": "Icon for the off state.",
|
"description": "Icon for the off state.",
|
||||||
"deprecated": "since v3.27.0. Use 'officon' slot."
|
"deprecated": "since v3.27.0. Use 'officon' slot."
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "cancelIcon",
|
|
||||||
"optional": true,
|
|
||||||
"readonly": false,
|
|
||||||
"type": "string",
|
|
||||||
"default": "",
|
|
||||||
"description": "Icon for the cancelable state.",
|
|
||||||
"deprecated": "since v3.27.0. Use 'cancelicon' slot."
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "dt",
|
"name": "dt",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
|
|
@ -45921,19 +45879,6 @@
|
||||||
"relatedProp": "",
|
"relatedProp": "",
|
||||||
"props": [],
|
"props": [],
|
||||||
"methods": [
|
"methods": [
|
||||||
{
|
|
||||||
"name": "cancelicon",
|
|
||||||
"parameters": [
|
|
||||||
{
|
|
||||||
"name": "scope",
|
|
||||||
"optional": false,
|
|
||||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the icon.</span>\n }",
|
|
||||||
"description": "cancelicon slot's params."
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
|
||||||
"description": "Custom cancel icon template."
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "onicon",
|
"name": "onicon",
|
||||||
"parameters": [
|
"parameters": [
|
||||||
|
|
@ -48831,9 +48776,9 @@
|
||||||
"name": "action",
|
"name": "action",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"readonly": false,
|
"readonly": false,
|
||||||
"type": "SpeedDialPassThroughOptionType",
|
"type": "ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>",
|
||||||
"default": "",
|
"default": "",
|
||||||
"description": "Used to pass attributes to the action's DOM element."
|
"description": "Used to pass attributes to the action's Button component."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "actionIcon",
|
"name": "actionIcon",
|
||||||
|
|
@ -49124,6 +49069,22 @@
|
||||||
"default": "",
|
"default": "",
|
||||||
"description": "Whether to display the tooltip on items. The modifiers of Tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
|
"description": "Whether to display the tooltip on items. The modifiers of Tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "buttonProps",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "object",
|
||||||
|
"default": "",
|
||||||
|
"description": "Used to pass all properties of the ButtonProps to the button component."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "actionButtonProps",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "object",
|
||||||
|
"default": "",
|
||||||
|
"description": "Used to pass all properties of the ButtonProps to the item component."
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "ariaLabel",
|
"name": "ariaLabel",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
|
|
@ -49186,7 +49147,7 @@
|
||||||
{
|
{
|
||||||
"name": "scope",
|
"name": "scope",
|
||||||
"optional": false,
|
"optional": false,
|
||||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">item</span>: <span class=\"doc-option-parameter-type\">MenuItem</span>, <span class=\"doc-option-parameter-type\">// Menuitem instance</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">onClick</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Item click function</span>\n}",
|
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">item</span>: <span class=\"doc-option-parameter-type\">MenuItem</span>, <span class=\"doc-option-parameter-type\">// Menuitem instance</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">onClick</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Item click function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Button click function</span>\n}",
|
||||||
"description": "item slot's params."
|
"description": "item slot's params."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -49199,7 +49160,7 @@
|
||||||
{
|
{
|
||||||
"name": "scope",
|
"name": "scope",
|
||||||
"optional": false,
|
"optional": false,
|
||||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClick</span>: <span class=\"doc-option-parameter-type line-through\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type line-through\">// Button click function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Button click function</span>\n}",
|
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">visible</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Visible state of the item</span>\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClick</span>: <span class=\"doc-option-parameter-type line-through\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type line-through\">// Button click function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Button click function</span>\n}",
|
||||||
"description": "button slot's params."
|
"description": "button slot's params."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -1,175 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>SpeedDial sample with an outlined button, custom icons and <i>transitionDelay</i>.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
|
|
||||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Add',
|
|
||||||
icon: 'pi pi-pencil',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Update',
|
|
||||||
icon: 'pi pi-refresh',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Delete',
|
|
||||||
icon: 'pi pi-trash',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Upload',
|
|
||||||
icon: 'pi pi-upload',
|
|
||||||
command: () => {
|
|
||||||
this.$router.push('/fileupload');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Vue Website',
|
|
||||||
icon: 'pi pi-external-link',
|
|
||||||
command: () => {
|
|
||||||
window.location.href = 'https://vuejs.org/';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
|
|
||||||
<Toast />
|
|
||||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Add',
|
|
||||||
icon: 'pi pi-pencil',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Update',
|
|
||||||
icon: 'pi pi-refresh',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Delete',
|
|
||||||
icon: 'pi pi-trash',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Upload',
|
|
||||||
icon: 'pi pi-upload',
|
|
||||||
command: () => {
|
|
||||||
this.$router.push('/fileupload');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Vue Website',
|
|
||||||
icon: 'pi pi-external-link',
|
|
||||||
command: () => {
|
|
||||||
window.location.href = 'https://vuejs.org/';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
|
|
||||||
<Toast />
|
|
||||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useToast } from 'primevue/usetoast';
|
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
|
|
||||||
const toast = useToast();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
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: () => {
|
|
||||||
router.push('/fileupload');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Vue Website',
|
|
||||||
icon: 'pi pi-external-link',
|
|
||||||
command: () => {
|
|
||||||
window.location.href = 'https://vuejs.org/'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
])
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
SpeedDial offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. The button has its own <i>button</i> template, additional slot named <i>icon</i> is provided to embed
|
||||||
|
icon content for default button.
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card">
|
||||||
|
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
|
||||||
|
<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
|
||||||
|
<template #button="{ toggleCallback }">
|
||||||
|
<Button outlined class="border-2" @click="toggleCallback">
|
||||||
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
|
fill="var(--p-primary-color)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
||||||
|
fill="var(--text-color)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
<template #item="{ item, toggleCallback }">
|
||||||
|
<div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
|
||||||
|
<span :class="item.icon" />
|
||||||
|
<span>
|
||||||
|
{{ item.label }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</SpeedDial>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Add',
|
||||||
|
icon: 'pi pi-pencil',
|
||||||
|
command: () => {
|
||||||
|
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Update',
|
||||||
|
icon: 'pi pi-refresh',
|
||||||
|
command: () => {
|
||||||
|
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-trash',
|
||||||
|
command: () => {
|
||||||
|
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Upload',
|
||||||
|
icon: 'pi pi-upload',
|
||||||
|
command: () => {
|
||||||
|
this.$router.push('/fileupload');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Website',
|
||||||
|
icon: 'pi pi-external-link',
|
||||||
|
command: () => {
|
||||||
|
window.location.href = 'https://vuejs.org/';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
|
||||||
|
<template #button="{ toggleCallback }">
|
||||||
|
<Button outlined class="border-2" @click="toggleCallback">
|
||||||
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="..." fill="var(--p-primary-color)" />
|
||||||
|
<path d="..." fill="var(--text-color)" />
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
<template #item="{ item, toggleCallback }">
|
||||||
|
<div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
|
||||||
|
<span :class="item.icon" />
|
||||||
|
<span>
|
||||||
|
{{ item.label }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</SpeedDial>
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
|
||||||
|
<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
|
||||||
|
<template #button="{ toggleCallback }">
|
||||||
|
<Button outlined class="border-2" @click="toggleCallback">
|
||||||
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="..." fill="var(--p-primary-color)" />
|
||||||
|
<path d="..." fill="var(--text-color)" />
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
<template #item="{ item, toggleCallback }">
|
||||||
|
<div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
|
||||||
|
<span :class="item.icon" />
|
||||||
|
<span>
|
||||||
|
{{ item.label }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</SpeedDial>
|
||||||
|
</div>
|
||||||
|
<Toast />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Add',
|
||||||
|
icon: 'pi pi-pencil',
|
||||||
|
command: () => {
|
||||||
|
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Update',
|
||||||
|
icon: 'pi pi-refresh',
|
||||||
|
command: () => {
|
||||||
|
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-trash',
|
||||||
|
command: () => {
|
||||||
|
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Upload',
|
||||||
|
icon: 'pi pi-upload',
|
||||||
|
command: () => {
|
||||||
|
this.$router.push('/fileupload');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Vue Website',
|
||||||
|
icon: 'pi pi-external-link',
|
||||||
|
command: () => {
|
||||||
|
window.location.href = 'https://vuejs.org/';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
|
||||||
|
<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
|
||||||
|
<template #button="{ toggleCallback }">
|
||||||
|
<Button outlined class="border-2" @click="toggleCallback">
|
||||||
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="..." fill="var(--p-primary-color)" />
|
||||||
|
<path d="..." fill="var(--text-color)" />
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
<template #item="{ item, toggleCallback }">
|
||||||
|
<div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
|
||||||
|
<span :class="item.icon" />
|
||||||
|
<span>
|
||||||
|
{{ item.label }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</SpeedDial>
|
||||||
|
</div>
|
||||||
|
<Toast />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useToast } from 'primevue/usetoast';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
const toast = useToast();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
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: () => {
|
||||||
|
router.push('/fileupload');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Vue Website',
|
||||||
|
icon: 'pi pi-external-link',
|
||||||
|
command: () => {
|
||||||
|
window.location.href = 'https://vuejs.org/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
])
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -13,12 +13,12 @@
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/speeddial/AccessibilityDoc.vue';
|
import AccessibilityDoc from '@/doc/speeddial/AccessibilityDoc.vue';
|
||||||
import CircleDoc from '@/doc/speeddial/CircleDoc.vue';
|
import CircleDoc from '@/doc/speeddial/CircleDoc.vue';
|
||||||
import CustomDoc from '@/doc/speeddial/CustomDoc.vue';
|
|
||||||
import ImportDoc from '@/doc/speeddial/ImportDoc.vue';
|
import ImportDoc from '@/doc/speeddial/ImportDoc.vue';
|
||||||
import LinearDoc from '@/doc/speeddial/LinearDoc.vue';
|
import LinearDoc from '@/doc/speeddial/LinearDoc.vue';
|
||||||
import MaskDoc from '@/doc/speeddial/MaskDoc.vue';
|
import MaskDoc from '@/doc/speeddial/MaskDoc.vue';
|
||||||
import QuarterCircleDoc from '@/doc/speeddial/QuarterCircleDoc.vue';
|
import QuarterCircleDoc from '@/doc/speeddial/QuarterCircleDoc.vue';
|
||||||
import SemiCircleDoc from '@/doc/speeddial/SemiCircleDoc.vue';
|
import SemiCircleDoc from '@/doc/speeddial/SemiCircleDoc.vue';
|
||||||
|
import TemplateDoc from '@/doc/speeddial/TemplateDoc.vue';
|
||||||
import TooltipDoc from '@/doc/speeddial/TooltipDoc.vue';
|
import TooltipDoc from '@/doc/speeddial/TooltipDoc.vue';
|
||||||
import PTComponent from '@/doc/speeddial/pt/index.vue';
|
import PTComponent from '@/doc/speeddial/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/speeddial/theming/index.vue';
|
import ThemingDoc from '@/doc/speeddial/theming/index.vue';
|
||||||
|
|
@ -34,7 +34,7 @@ export default {
|
||||||
{ id: 'quarter-circle', label: 'Quarter Circle', component: QuarterCircleDoc },
|
{ id: 'quarter-circle', label: 'Quarter Circle', component: QuarterCircleDoc },
|
||||||
{ id: 'tooltip', label: 'Tooltip', component: TooltipDoc },
|
{ id: 'tooltip', label: 'Tooltip', component: TooltipDoc },
|
||||||
{ id: 'mask', label: 'Mask', component: MaskDoc },
|
{ id: 'mask', label: 'Mask', component: MaskDoc },
|
||||||
{ id: 'custom', label: 'Custom', component: CustomDoc },
|
{ id: 'template', label: 'Template', component: TemplateDoc },
|
||||||
{ id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc }
|
{ id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc }
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent,
|
ptComponent: PTComponent,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue