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

No need for binding

pull/5806/head
Cagatay Civici 2024-05-30 02:37:54 +03:00
parent 4929c3c196
commit d96f59fb59
2 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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>

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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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="{ position: 'absolute', 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>