Update SpeedDial doc and demo

pull/1533/head
mertsincan 2021-08-31 14:20:07 +03:00
parent be2365bfef
commit 003b90c62d
2 changed files with 18 additions and 12 deletions

View File

@ -15,7 +15,7 @@
<SpeedDial :model="items" direction="up" /> <SpeedDial :model="items" direction="up" />
<SpeedDial :model="items" direction="down" /> <SpeedDial :model="items" direction="down" />
<SpeedDial :model="items" direction="left" /> <SpeedDial :model="items" direction="left" />
<SpeedDial :model="items" direction="right" /> <SpeedDial :model="items" direction="right" />
</div> </div>
</div> </div>
@ -37,9 +37,9 @@
<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" /> <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
<SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" /> <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
</div> </div>
</div> </div>
@ -214,4 +214,4 @@ export default {
bottom: 0; bottom: 0;
} }
} }
</style> </style>

View File

@ -52,7 +52,7 @@ items: [
window.location.href = 'https://vuejs.org/' window.location.href = 'https://vuejs.org/'
} }
} }
] ]
</code></pre> </code></pre>
<h5>MenuModel API</h5> <h5>MenuModel API</h5>
@ -179,6 +179,12 @@ items: [
<td>null</td> <td>null</td>
<td>Inline style of the element.</td> <td>Inline style of the element.</td>
</tr> </tr>
<tr>
<td>tooltipOptions</td>
<td>object</td>
<td>null</td>
<td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -291,7 +297,7 @@ export default {
<SpeedDial :model="items" direction="up" /> <SpeedDial :model="items" direction="up" />
<SpeedDial :model="items" direction="down" /> <SpeedDial :model="items" direction="down" />
<SpeedDial :model="items" direction="left" /> <SpeedDial :model="items" direction="left" />
<SpeedDial :model="items" direction="right" /> <SpeedDial :model="items" direction="right" />
</div> </div>
</div> </div>
@ -313,9 +319,9 @@ export default {
<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" /> <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
<SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" /> <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
</div> </div>
</div> </div>
@ -502,7 +508,7 @@ export default {
<SpeedDial :model="items" direction="up" /> <SpeedDial :model="items" direction="up" />
<SpeedDial :model="items" direction="down" /> <SpeedDial :model="items" direction="down" />
<SpeedDial :model="items" direction="left" /> <SpeedDial :model="items" direction="left" />
<SpeedDial :model="items" direction="right" /> <SpeedDial :model="items" direction="right" />
</div> </div>
</div> </div>
@ -524,9 +530,9 @@ export default {
<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" /> <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
<SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" /> <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
</div> </div>
</div> </div>
@ -701,4 +707,4 @@ export default {
} }
} }
} }
</script> </script>