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

speeddial demo fix

pull/1533/head
Tuğçe Küçükoğlu 2021-09-02 09:23:44 +03:00
parent d501c12b0f
commit e61b4b0b99
2 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/speeddial/SpeedDialDemo.vue
View File

@ -22,31 +22,31 @@
<div class="card"> <div class="card">
<h5>Circle, Semi-Circle and Quarter-Circle</h5> <h5>Circle, Semi-Circle and Quarter-Circle</h5>
<div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }"> <div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" :radius="80" type="circle" buttonClassName="p-button-warning" /> <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
<SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" />
<SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" />
<SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" />
<SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" />
<SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClass="p-button-success" />
<SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClass="p-button-success" />
<SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClass="p-button-success" />
<SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClass="p-button-success" />
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h5>Tooltip</h5> <h5>Tooltip</h5>
<div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }"> <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" /> <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClass="p-button-danger" :tooltipOptions="{position: 'left'}" />
<SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" /> <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClass="p-button-help" :tooltipOptions="{position: 'right'}" />
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h5>Transition Duration, Icon and No Rotate Animation</h5> <h5>Transition Duration, Icon and No Rotate Animation</h5>
<div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }"> <div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" /> <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
</div> </div>
</div> </div>

34
src/views/speeddial/SpeedDialDoc.vue
View File

@ -291,6 +291,7 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<Toast />
<div class="card"> <div class="card">
<h5>Linear</h5> <h5>Linear</h5>
<div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }"> <div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
@ -304,31 +305,31 @@ export default {
<div class="card"> <div class="card">
<h5>Circle, Semi-Circle and Quarter-Circle</h5> <h5>Circle, Semi-Circle and Quarter-Circle</h5>
<div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }"> <div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" :radius="80" type="circle" buttonClassName="p-button-warning" /> <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
<SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" />
<SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" />
<SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" />
<SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" />
<SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClass="p-button-success" />
<SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClass="p-button-success" />
<SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClass="p-button-success" />
<SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClass="p-button-success" />
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h5>Tooltip</h5> <h5>Tooltip</h5>
<div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }"> <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" /> <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClass="p-button-danger" :tooltipOptions="{position: 'left'}" />
<SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" /> <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClass="p-button-help" :tooltipOptions="{position: 'right'}" />
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h5>Transition Duration, Icon and No Rotate Animation</h5> <h5>Transition Duration, Icon and No Rotate Animation</h5>
<div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }"> <div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" /> <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
</div> </div>
</div> </div>
@ -502,6 +503,7 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<Toast />
<div class="card"> <div class="card">
<h5>Linear</h5> <h5>Linear</h5>
<div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }"> <div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
@ -515,31 +517,31 @@ export default {
<div class="card"> <div class="card">
<h5>Circle, Semi-Circle and Quarter-Circle</h5> <h5>Circle, Semi-Circle and Quarter-Circle</h5>
<div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }"> <div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
<SpeedDial :model="items" :radius="80" type="circle" buttonClassName="p-button-warning" /> <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
<SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" />
<SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" />
<SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" />
<SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" /> <SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" />
<SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClass="p-button-success" />
<SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClass="p-button-success" />
<SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClass="p-button-success" />
<SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClassName="p-button-success" /> <SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClass="p-button-success" />
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h5>Tooltip</h5> <h5>Tooltip</h5>
<div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }"> <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" /> <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClass="p-button-danger" :tooltipOptions="{position: 'left'}" />
<SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" /> <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClass="p-button-help" :tooltipOptions="{position: 'right'}" />
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h5>Transition Duration, Icon and No Rotate Animation</h5> <h5>Transition Duration, Icon and No Rotate Animation</h5>
<div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }"> <div class="speeddial-delay-demo" :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" /> <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
</div> </div>
</div> </div>