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

Refactor #5437 - SpeedDial

pull/5507/head
tugcekucukoglu 2024-03-18 13:29:19 +03:00
parent 89e01ffe77
commit 926b085060
8 changed files with 148 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/themes/primeone/base/speeddial/index.js
View File

@ -1,7 +1,7 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-speeddial { .p-speeddial {
position: absolute; position: static;
display: flex; display: flex;
gap: 0.25rem; gap: 0.25rem;
} }

14
doc/speeddial/CircleDoc.vue
View File

@ -3,8 +3,8 @@
<p>Items can be displayed around the button when <i>type</i> is set to <i>circle</i>. Additional <i>radius</i> property defines the radius of the circle.</p> <p>Items can be displayed around the button when <i>type</i> is set to <i>circle</i>. Additional <i>radius</i> property defines the radius of the circle.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div :style="{ height: '500px' }" class="flex align-items-center justify-content-center"> <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" /> <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -53,13 +53,13 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" /> <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<div :style="{ height: '500px' }" class="flex align-items-center justify-content-center"> <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" /> <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
<Toast /> <Toast />
</div> </div>
</div> </div>
@ -114,8 +114,8 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<div :style="{ height: '500px' }" class="flex align-items-center justify-content-center"> <div :style="{ position: 'relative', height: '500px' }" class="flex align-items-center justify-content-center">
<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" /> <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" :style="{ position: 'absolute' }" />
<Toast /> <Toast />
</div> </div>
</div> </div>

161
doc/speeddial/CustomDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }"> <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" /> <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -53,62 +53,61 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Toast /> <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }"> <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
<Toast /> <Toast />
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" /> <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
items: [ items: [
{ {
label: 'Add', label: 'Add',
icon: 'pi pi-pencil', icon: 'pi pi-pencil',
command: () => { command: () => {
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' }); this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
} }
}, },
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh', icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' }); this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-trash', icon: 'pi pi-trash',
command: () => { command: () => {
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' }); this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
} }
}, },
{ {
label: 'Upload', label: 'Upload',
icon: 'pi pi-upload', icon: 'pi pi-upload',
command: () => { command: () => {
this.$router.push('/fileupload'); this.$router.push('/fileupload');
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link', icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
} }
] ]
} }
} }
}; };
<\/script> <\/script>
`, `,
@ -117,7 +116,7 @@ export default {
<div class="card"> <div class="card">
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }"> <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
<Toast /> <Toast />
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" /> <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
</div> </div>
</div> </div>
</template> </template>
@ -131,41 +130,41 @@ const toast = useToast();
const router = useRouter(); const router = useRouter();
const items = ref([ const items = ref([
{ {
label: 'Add', label: 'Add',
icon: 'pi pi-pencil', icon: 'pi pi-pencil',
command: () => { command: () => {
toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' }); toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
} }
}, },
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh', icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' }); toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-trash', icon: 'pi pi-trash',
command: () => { command: () => {
toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' }); toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
} }
}, },
{ {
label: 'Upload', label: 'Upload',
icon: 'pi pi-upload', icon: 'pi pi-upload',
command: () => { command: () => {
router.push('/fileupload'); router.push('/fileupload');
} }
}, },
{ {
label: 'Vue Website', label: 'Vue Website',
icon: 'pi pi-external-link', icon: 'pi pi-external-link',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/' window.location.href = 'https://vuejs.org/'
} }
} }
]) ])
<\/script> <\/script>
` `

32
doc/speeddial/LinearDoc.vue
View File

@ -4,10 +4,10 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '500px' }"> <div :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" /> <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" /> <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
<SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" /> <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" /> <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -56,19 +56,19 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" /> <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" /> <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
<SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" /> <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" /> <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '500px' }"> <div :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" /> <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" /> <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
<SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" /> <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" /> <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
<Toast /> <Toast />
</div> </div>
</div> </div>
@ -124,10 +124,10 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '500px' }"> <div :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" /> <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" /> <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
<SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" /> <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" /> <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
<Toast /> <Toast />
</div> </div>
</div> </div>

8
doc/speeddial/MaskDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card p-3"> <div class="card p-3">
<div :style="{ position: 'relative', height: '350px' }"> <div :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" /> <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -53,13 +53,13 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" /> <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
`, `,
options: ` options: `
<template> <template>
<div class="card p-3"> <div class="card p-3">
<div :style="{ position: 'relative', height: '350px' }"> <div :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" /> <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
</div> </div>
</div> </div>
</template> </template>
@ -114,7 +114,7 @@ data() {
<template> <template>
<div class="card p-3"> <div class="card p-3">
<div :style="{ position: 'relative', height: '350px' }"> <div :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" /> <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
</div> </div>
</div> </div>
</template> </template>

32
doc/speeddial/QuarterCircleDoc.vue
View File

@ -4,10 +4,10 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '500px' }"> <div :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -56,19 +56,19 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '500px' }"> <div :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
<Toast /> <Toast />
</div> </div>
</div> </div>
@ -124,10 +124,10 @@ data() {
<template> <template>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '500px' }"> <div :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" /> <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
<Toast /> <Toast />
</div> </div>
</div> </div>

32
doc/speeddial/SemiCircleDoc.vue
View File

@ -4,10 +4,10 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '500px' }"> <div :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -56,19 +56,19 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '500px' }"> <div :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
<Toast /> <Toast />
</div> </div>
</div> </div>
@ -123,10 +123,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card" :style="{ position: 'relative', height: '500px' }"> <div class="card" :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" /> <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
<Toast /> <Toast />
</div> </div>
</template> </template>

16
doc/speeddial/TooltipDoc.vue
View File

@ -4,8 +4,8 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '350px' }"> <div :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" /> <SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
<SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" /> <SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -54,15 +54,15 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" /> <SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
<SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" /> <SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '350px' }"> <div :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" /> <SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
<SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" /> <SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
<Toast /> <Toast />
</div> </div>
</div> </div>
@ -118,8 +118,8 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div :style="{ position: 'relative', height: '350px' }"> <div :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" /> <SpeedDial :model="items" direction="up" class="right-0 bottom-0 absolute" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
<SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" /> <SpeedDial :model="items" direction="up" class="left-0 bottom-0 absolute" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
<Toast /> <Toast />
</div> </div>
</div> </div>