SpeedDial demo added
Tuğçe Küçükoğlu
parent
6daa56c36b
commit
c8dbe3a06e
|
|
@ -268,6 +268,11 @@
|
||||||
"name": "Button",
|
"name": "Button",
|
||||||
"to": "/button"
|
"to": "/button"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Speed Dial",
|
||||||
|
"to": "/speeddial",
|
||||||
|
"badge": "New"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "SplitButton",
|
"name": "SplitButton",
|
||||||
"to": "/splitbutton"
|
"to": "/splitbutton"
|
||||||
|
|
|
||||||
|
|
@ -73,6 +73,7 @@ import Skeleton from './components/skeleton/Skeleton';
|
||||||
import Slider from './components/slider/Slider';
|
import Slider from './components/slider/Slider';
|
||||||
import Sidebar from './components/sidebar/Sidebar';
|
import Sidebar from './components/sidebar/Sidebar';
|
||||||
import SplitButton from './components/splitbutton/SplitButton';
|
import SplitButton from './components/splitbutton/SplitButton';
|
||||||
|
import SpeedDial from './components/speeddial/SpeedDial';
|
||||||
import Splitter from './components/splitter/Splitter';
|
import Splitter from './components/splitter/Splitter';
|
||||||
import SplitterPanel from './components/splitterpanel/SplitterPanel';
|
import SplitterPanel from './components/splitterpanel/SplitterPanel';
|
||||||
import Steps from './components/steps/Steps';
|
import Steps from './components/steps/Steps';
|
||||||
|
|
@ -191,6 +192,7 @@ app.component('SelectButton', SelectButton);
|
||||||
app.component('Slider', Slider);
|
app.component('Slider', Slider);
|
||||||
app.component('Sidebar', Sidebar);
|
app.component('Sidebar', Sidebar);
|
||||||
app.component('Skeleton', Skeleton);
|
app.component('Skeleton', Skeleton);
|
||||||
|
app.component('SpeedDial', SpeedDial);
|
||||||
app.component('SplitButton', SplitButton);
|
app.component('SplitButton', SplitButton);
|
||||||
app.component('Splitter', Splitter);
|
app.component('Splitter', Splitter);
|
||||||
app.component('SplitterPanel', SplitterPanel);
|
app.component('SplitterPanel', SplitterPanel);
|
||||||
|
|
|
||||||
|
|
@ -577,6 +577,11 @@ const routes = [
|
||||||
name: 'spacing',
|
name: 'spacing',
|
||||||
component: () => import('../views/spacing/SpacingDemo.vue')
|
component: () => import('../views/spacing/SpacingDemo.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/speeddial',
|
||||||
|
name: 'speeddial',
|
||||||
|
component: () => import('../views/speeddial/SpeedDialDemo.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/splitbutton',
|
path: '/splitbutton',
|
||||||
name: 'splitbutton',
|
name: 'splitbutton',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Speed Dial</h1>
|
||||||
|
<p>When pressed, a floating action button can display multiple primary actions that can be performed on a page.</p>
|
||||||
|
</div>
|
||||||
|
<AppDemoActions />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Linear</h5>
|
||||||
|
<div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
|
||||||
|
<SpeedDial :model="items" direction="up">
|
||||||
|
<template #button="{ toggle }">
|
||||||
|
<Button type="button" class="p-px-3" @click="toggle($event)">
|
||||||
|
<img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</SpeedDial>
|
||||||
|
<SpeedDial :model="items" direction="down" hideIcon="pi pi-discord">
|
||||||
|
<template #item="{ item }">
|
||||||
|
<a :href="item.url || '#'" :class="['p-speeddial-action', { 'p-disabled': item.disabled }]" @click="deneme($event, item)">
|
||||||
|
<span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
</SpeedDial>
|
||||||
|
<SpeedDial :model="items" direction="left" />
|
||||||
|
<SpeedDial :model="items" direction="right" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Circle, Semi-Circle and Quarter-Circle</h5>
|
||||||
|
<div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
|
||||||
|
<SpeedDial :model="items" :radius="80" type="circle" buttonClassName="p-button-warning" hideIcon="pi pi-discord" />
|
||||||
|
<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="left" 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-right" type="quarter-circle" buttonClassName="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-right" type="quarter-circle" buttonClassName="p-button-success" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Tooltip</h5>
|
||||||
|
<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-left" buttonClassName="p-button-help" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Transition Duration, Icon and No Rotate Animation</h5>
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Mask</h5>
|
||||||
|
<div class="speeddial-mask-demo" :style="{ position: 'relative', height: '350px' }">
|
||||||
|
<SpeedDial :model="items" direction="up" mask />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SpeedDialDoc />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SpeedDialDoc from './SpeedDialDoc.vue';
|
||||||
|
|
||||||
|
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: () => {
|
||||||
|
window.location.hash = "/fileupload"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Vue Website',
|
||||||
|
icon: 'pi pi-external-link',
|
||||||
|
command: () => {
|
||||||
|
window.location.href = 'https://vuejs.org/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'SpeedDialDoc': SpeedDialDoc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep(.speeddial-linear-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-down {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-left {
|
||||||
|
right: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-right {
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-circle-demo) {
|
||||||
|
.p-speeddial-circle {
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-semi-circle {
|
||||||
|
&.p-speeddial-direction-up {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-down {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-left {
|
||||||
|
right: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-right {
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-quarter-circle {
|
||||||
|
&.p-speeddial-direction-up-left {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-up-right {
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-down-left {
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-down-right {
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-tooltip-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
&.speeddial-left {
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.speeddial-right {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-delay-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-mask-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,702 @@
|
||||||
|
<template>
|
||||||
|
<AppDoc name="SpeedDialDemo" :sources="sources" github="speeddial/SpeedDialDemo.vue">
|
||||||
|
<h5>Import</h5>
|
||||||
|
<pre v-code.script><code>
|
||||||
|
import SpeedDial from 'primevue/speeddial';
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Getting Started</h5>
|
||||||
|
<p>When pressed, a floating action button can display multiple primary actions that can be performed on a page. It has a collection of additional options defined by the <i>model</i> property.
|
||||||
|
SpeedDial's position is calculated according to the container element with the position type style.</p>
|
||||||
|
|
||||||
|
<pre v-code.script><code>
|
||||||
|
<SpeedDial :model="items" />
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<pre v-code.script><code>
|
||||||
|
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: () => {
|
||||||
|
window.location.hash = "/fileupload"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Vue Website',
|
||||||
|
icon: 'pi pi-external-link',
|
||||||
|
command: () => {
|
||||||
|
window.location.href = 'https://vuejs.org/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>MenuModel API</h5>
|
||||||
|
<p>SpeedDial uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
|
||||||
|
|
||||||
|
<h5>Type</h5>
|
||||||
|
<p>SpeedDial has 4 types; <i>linear</i>, <i>circle</i>, <i>semi-circle</i> and <i>quarter-circle</i>.</p>
|
||||||
|
|
||||||
|
<h5>Direction</h5>
|
||||||
|
<p>Specifies the opening direction of actions. For the <strong>linear</strong> and <strong>semi-circle</strong> types; <i>up</i>, <i>down</i>, <i>left</i> and <i>right</i>. For the <strong>quarter-circle</strong> type; <i>up-left</i>, <i>up-right</i>, <i>down-left</i> and <i>down-right</i>.</p>
|
||||||
|
|
||||||
|
<h5>Properties</h5>
|
||||||
|
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Type</th>
|
||||||
|
<th>Default</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>model</td>
|
||||||
|
<td>object</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>MenuModel instance to define the action items.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>visible</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>false</td>
|
||||||
|
<td>Specifies the visibility of the overlay.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>direction</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>up</td>
|
||||||
|
<td>Specifies the opening direction of actions. Valid values are 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left' and 'down-right'</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>transitionDelay</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>Transition delay step for each action item.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>type</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>linear</td>
|
||||||
|
<td>Specifies the opening type of actions.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>radius</td>
|
||||||
|
<td>number</td>
|
||||||
|
<td>0</td>
|
||||||
|
<td>Radius for *circle types.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>mask</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>false</td>
|
||||||
|
<td>Whether to show a mask element behind the speeddial</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>disabled</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>false</td>
|
||||||
|
<td>Whether the component is disabled.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>hideOnClickOutside</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>true</td>
|
||||||
|
<td>Whether the actions close when clicked outside.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>buttonClassName</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Style class of the button element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>maskClassName</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Style class of the mask element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>maskStyle</td>
|
||||||
|
<td>object</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Inline style of the mask element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>showIcon</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>pi pi-plus</td>
|
||||||
|
<td>Show icon of the button element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>hideIcon</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Hide icon of the button element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>rotateAnimation</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>true</td>
|
||||||
|
<td>Defined to rotate showIcon when hideIcon is not present.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>class</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Style class of the element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>style</td>
|
||||||
|
<td>object</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Inline style of the element.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Events</h5>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Parameters</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>click</td>
|
||||||
|
<td>event: Browser event.</td>
|
||||||
|
<td>Fired when the button element clicked.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>show</td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>Fired when the actions are visible.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>hide</td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>Fired when the actions are hidden.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Slots</h5>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Parameters</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>item</td>
|
||||||
|
<td>item: Custom template for item</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>button</td>
|
||||||
|
<td>toggle: toggle metadata</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Styling</h5>
|
||||||
|
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Element</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>p-speeddial</td>
|
||||||
|
<td>Container element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-speeddial-button</td>
|
||||||
|
<td>Button element of speeddial.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-speeddial-mask</td>
|
||||||
|
<td>Mask element of speeddial.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-speeddial-list</td>
|
||||||
|
<td>List of the actions.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-speeddial-item</td>
|
||||||
|
<td>Each action item of list.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Dependencies</h5>
|
||||||
|
<p>None.</p>
|
||||||
|
</AppDoc>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sources: {
|
||||||
|
'options-api': {
|
||||||
|
tabName: 'Options API Source',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="card">
|
||||||
|
<h5>Linear</h5>
|
||||||
|
<div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
|
||||||
|
<SpeedDial :model="items" direction="up" />
|
||||||
|
<SpeedDial :model="items" direction="down" />
|
||||||
|
<SpeedDial :model="items" direction="left" />
|
||||||
|
<SpeedDial :model="items" direction="right" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Circle, Semi-Circle and Quarter-Circle</h5>
|
||||||
|
<div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
|
||||||
|
<SpeedDial :model="items" :radius="80" type="circle" buttonClassName="p-button-warning" hideIcon="pi pi-discord" />
|
||||||
|
<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="left" 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-right" type="quarter-circle" buttonClassName="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-right" type="quarter-circle" buttonClassName="p-button-success" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Tooltip</h5>
|
||||||
|
<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-left" buttonClassName="p-button-help" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Transition Duration, Icon and No Rotate Animation</h5>
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Mask</h5>
|
||||||
|
<div class="speeddial-mask-demo" :style="{ position: 'relative', height: '350px' }">
|
||||||
|
<SpeedDial :model="items" direction="up" mask />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useToast } from "primevue/usetoast";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
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: () => {
|
||||||
|
window.location.hash = "/fileupload"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Vue Website',
|
||||||
|
icon: 'pi pi-external-link',
|
||||||
|
command: () => {
|
||||||
|
window.location.href = 'https://vuejs.org/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
return { items }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep(.speeddial-linear-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-down {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-left {
|
||||||
|
right: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-right {
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-circle-demo) {
|
||||||
|
.p-speeddial-circle {
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-semi-circle {
|
||||||
|
&.p-speeddial-direction-up {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-down {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-left {
|
||||||
|
right: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-right {
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-quarter-circle {
|
||||||
|
&.p-speeddial-direction-up-left {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-up-right {
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-down-left {
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-down-right {
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-tooltip-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
&.speeddial-left {
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.speeddial-right {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-delay-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-mask-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'composition-api': {
|
||||||
|
tabName: 'Composition API Source',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="card">
|
||||||
|
<h5>Linear</h5>
|
||||||
|
<div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
|
||||||
|
<SpeedDial :model="items" direction="up" />
|
||||||
|
<SpeedDial :model="items" direction="down" />
|
||||||
|
<SpeedDial :model="items" direction="left" />
|
||||||
|
<SpeedDial :model="items" direction="right" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Circle, Semi-Circle and Quarter-Circle</h5>
|
||||||
|
<div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
|
||||||
|
<SpeedDial :model="items" :radius="80" type="circle" buttonClassName="p-button-warning" hideIcon="pi pi-discord" />
|
||||||
|
<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="left" 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-right" type="quarter-circle" buttonClassName="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-right" type="quarter-circle" buttonClassName="p-button-success" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Tooltip</h5>
|
||||||
|
<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-left" buttonClassName="p-button-help" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Transition Duration, Icon and No Rotate Animation</h5>
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Mask</h5>
|
||||||
|
<div class="speeddial-mask-demo" :style="{ position: 'relative', height: '350px' }">
|
||||||
|
<SpeedDial :model="items" direction="up" mask />
|
||||||
|
</div>
|
||||||
|
</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: () => {
|
||||||
|
window.location.hash = "/fileupload"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Vue Website',
|
||||||
|
icon: 'pi pi-external-link',
|
||||||
|
command: () => {
|
||||||
|
window.location.href = 'https://vuejs.org/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep(.speeddial-linear-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-down {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-left {
|
||||||
|
right: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-direction-right {
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-circle-demo) {
|
||||||
|
.p-speeddial-circle {
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-semi-circle {
|
||||||
|
&.p-speeddial-direction-up {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-down {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-left {
|
||||||
|
right: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-right {
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% - 2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-speeddial-quarter-circle {
|
||||||
|
&.p-speeddial-direction-up-left {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-up-right {
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-down-left {
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-speeddial-direction-down-right {
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-tooltip-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
&.speeddial-left {
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.speeddial-right {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-delay-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
left: calc(50% - 2rem);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.speeddial-mask-demo) {
|
||||||
|
.p-speeddial-direction-up {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue