csb added
Tuğçe Küçükoğlu
parent
1a2e3a6a94
commit
97bcf12331
|
|
@ -104,9 +104,12 @@ export default {
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
<div class="p-d-flex p-jc-between">
|
||||||
<span>View on GitHub</span>
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
</a>
|
<span>View on GitHub</span>
|
||||||
|
</a>
|
||||||
|
<LiveEditor name="BreadcrumbDemo" :sources="sources"/>
|
||||||
|
</div>
|
||||||
<pre v-code>
|
<pre v-code>
|
||||||
<code><template v-pre>
|
<code><template v-pre>
|
||||||
<Breadcrumb :home="home" :model="items" />
|
<Breadcrumb :home="home" :model="items" />
|
||||||
|
|
@ -134,4 +137,51 @@ export default {
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LiveEditor from '../liveeditor/LiveEditor';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sources: {
|
||||||
|
'template': {
|
||||||
|
content: `<template>
|
||||||
|
<div class="layout-content">
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="card">
|
||||||
|
<Breadcrumb :home="home" :model="items" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
home: {
|
||||||
|
icon: 'pi pi-home',
|
||||||
|
command: () => {
|
||||||
|
window.location.hash = "/fileupload"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
items: [
|
||||||
|
{label: 'Computer'},
|
||||||
|
{label: 'Notebook'},
|
||||||
|
{label: 'Accessories'},
|
||||||
|
{label: 'Backpacks'},
|
||||||
|
{label: 'Item'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
LiveEditor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -212,9 +212,12 @@ toggle(event) {
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
<div class="p-d-flex p-jc-between">
|
||||||
<span>View on GitHub</span>
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
</a>
|
<span>View on GitHub</span>
|
||||||
|
</a>
|
||||||
|
<LiveEditor name="MenuDemo" :sources="sources" :toastService="true" :components="['Button']"/>
|
||||||
|
</div>
|
||||||
<pre v-code>
|
<pre v-code>
|
||||||
<code><template v-pre>
|
<code><template v-pre>
|
||||||
<h3>Inline</h3>
|
<h3>Inline</h3>
|
||||||
|
|
@ -280,3 +283,84 @@ export default {
|
||||||
</TabView>
|
</TabView>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LiveEditor from '../liveeditor/LiveEditor';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sources: {
|
||||||
|
'template': {
|
||||||
|
content: `<template>
|
||||||
|
<div class="layout-content">
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Inline</h5>
|
||||||
|
<Menu :model="items" />
|
||||||
|
|
||||||
|
<h5>Overlay</h5>
|
||||||
|
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/>
|
||||||
|
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Options',
|
||||||
|
items: [{
|
||||||
|
label: 'Update',
|
||||||
|
icon: 'pi pi-refresh',
|
||||||
|
command: () => {
|
||||||
|
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-times',
|
||||||
|
command: () => {
|
||||||
|
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]},
|
||||||
|
{
|
||||||
|
label: 'Navigate',
|
||||||
|
items: [{
|
||||||
|
label: 'Vue Website',
|
||||||
|
icon: 'pi pi-external-link',
|
||||||
|
url: 'https://vuejs.org/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Router',
|
||||||
|
icon: 'pi pi-upload',
|
||||||
|
command: () => {
|
||||||
|
window.location.hash = "/fileupload"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggle(event) {
|
||||||
|
this.$refs.menu.toggle(event);
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
LiveEditor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -186,9 +186,12 @@ import Panel from 'primevue/panel';
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/panel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
<div class="p-d-flex p-jc-between">
|
||||||
<span>View on GitHub</span>
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/panel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
</a>
|
<span>View on GitHub</span>
|
||||||
|
</a>
|
||||||
|
<LiveEditor name="PanelDemo" :sources="sources" :toastService="true" :components="['Menu']" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<pre v-code>
|
<pre v-code>
|
||||||
<code><template v-pre>
|
<code><template v-pre>
|
||||||
|
|
@ -269,4 +272,105 @@ export default {
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LiveEditor from '../liveeditor/LiveEditor';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sources: {
|
||||||
|
'template': {
|
||||||
|
content: `<template>
|
||||||
|
<div class="layout-content">
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<h5>Regular</h5>
|
||||||
|
<Panel header="Header">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||||
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
</Panel>
|
||||||
|
|
||||||
|
<h5>Advanced</h5>
|
||||||
|
<Panel header="Header" :toggleable="true">
|
||||||
|
<template #icons>
|
||||||
|
<button class="p-panel-header-icon p-link p-mr-2" @click="toggle">
|
||||||
|
<span class="pi pi-cog"></span>
|
||||||
|
</button>
|
||||||
|
<Menu id="config_menu" ref="menu" :model="items" :popup="true" />
|
||||||
|
</template>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||||
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
</Panel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
collapsed: true,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Options',
|
||||||
|
items: [{
|
||||||
|
label: 'Update',
|
||||||
|
icon: 'pi pi-refresh',
|
||||||
|
command: () => {
|
||||||
|
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-times',
|
||||||
|
command: () => {
|
||||||
|
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]},
|
||||||
|
{
|
||||||
|
label: 'Navigate',
|
||||||
|
items: [{
|
||||||
|
label: 'Vue Website',
|
||||||
|
icon: 'pi pi-external-link',
|
||||||
|
url: 'https://vuejs.org/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Router',
|
||||||
|
icon: 'pi pi-upload',
|
||||||
|
command: () => {
|
||||||
|
window.location.hash = "/fileupload"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggle(event) {
|
||||||
|
this.$refs.menu.toggle(event);
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`,
|
||||||
|
style: `<style lang="scss" scoped>
|
||||||
|
.p-panel p {
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
LiveEditor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -323,7 +323,9 @@ export default {
|
||||||
},
|
},
|
||||||
{ label: 'Upload',
|
{ label: 'Upload',
|
||||||
icon: 'pi pi-upload',
|
icon: 'pi pi-upload',
|
||||||
to: '/fileupload'
|
command: () => {
|
||||||
|
window.location.hash = "/fileupload"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue