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

dock csb example

pull/1429/head
Tuğçe Küçükoğlu 2021-08-05 09:51:23 +03:00
parent 1b50d13cd2
commit a806ca2251
1 changed files with 98 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/dock/DockDoc.vue
View File

@ -147,6 +147,7 @@ export default {
tabName: 'Options API Source',
content: `
<template>
<div>
<div class="dock-demo">
<Toast position="top-center" group="tc" />
@ -177,7 +178,7 @@ export default {
<Dock :model="dockItems">
<template #item="{ item }">
<a href="#" class="p-dock-action" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%">
</a>
</template>
</Dock>
@ -193,11 +194,12 @@ export default {
<Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px"
:circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
<template #item="slotProps">
<img src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png' :alt="slotProps.item.alt" />
<img src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png' :alt="slotProps.item.alt" style="width: 100%" />
</template>
</Galleria>
</div>
</div>
</div>
</template>
<script>
@ -468,9 +470,6 @@ export default {
TerminalService.emit('response', response);
}
},
components: {
'DockDoc': DockDoc
}
}
<\\/script>
@ -481,7 +480,7 @@ export default {
width: 100%;
height: 450px;
position: relative;
background-image: url('../../assets/images/dock/window.jpg');
background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg");
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
@ -531,6 +530,7 @@ export default {
tabName: 'Composition API Source',
content: `
<template>
<div>
<div class="content-section implementation dock-demo">
<Toast position="top-center" group="tc" />
@ -561,7 +561,7 @@ export default {
<Dock :model="dockItems">
<template #item="{ item }">
<a href="#" class="p-dock-action" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
<img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
</a>
</template>
</Dock>
@ -577,15 +577,16 @@ export default {
<Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px"
:circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
<template #item="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.alt" />
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.alt" style="width: 100%" />
</template>
</Galleria>
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useToast } from 'primevue/usetoast';
import NodeService from './service/NodeService';
import PhotoService from './service/PhotoService';
@ -607,25 +608,25 @@ export default {
const displayFinder = ref(false);
const displayTerminal = ref(false);
const displayPhotos = ref(false);
const productService = ref(new ProductService());
const nodeService = ref(new NodeService());
const photoService = ref(new PhotoService());
const images = ref();
const nodes = ref();
const toast = useToast();
const imgErrorPath = ref('https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'),
const imgErrorPath = ref('https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png');
const dockItems = ref([
{
label: 'Finder',
icon: "demo/images/dock/finder.svg",
command: () => {
this.displayFinder = true;
displayFinder.value = true;
}
},
{
label: 'Terminal',
icon: "demo/images/dock/terminal.svg",
command: () => {
this.displayTerminal = true;
displayTerminal.value = true;
}
},
{
@ -646,7 +647,7 @@ export default {
label: 'Photos',
icon: "demo/images/dock/photos.svg",
command: () => {
this.displayPhotos = true;
displayPhotos.value = true;
}
},
{
@ -896,7 +897,7 @@ export default {
width: 100%;
height: 450px;
position: relative;
background-image: url('../../assets/images/dock/window.jpg');
background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg");
background-repeat: no-repeat;
background-size: cover;
z-index: 1;