96 lines
3.7 KiB
Vue
Executable File
96 lines
3.7 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<div class="content-section introduction">
|
|
<div class="feature-intro">
|
|
<h1>Panel</h1>
|
|
<p>Panel is a grouping component with the optional content toggle feature.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section implementation">
|
|
<h3 class="first">Regular</h3>
|
|
<Panel header="Godfather I">
|
|
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
|
|
</Panel>
|
|
|
|
<h3>Advanced</h3>
|
|
<Panel header="Godfather I" :toggleable="true">
|
|
<template #icons>
|
|
<a tabindex="0" class="p-panel-titlebar-icon" @click="toggle">
|
|
<span class="pi pi-cog"></span>
|
|
</a>
|
|
<Menu id="config_menu" ref="menu" :model="items" :popup="true" />
|
|
</template>
|
|
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
|
|
</Panel>
|
|
</div>
|
|
|
|
<PanelDoc/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import PanelDoc from './PanelDoc';
|
|
|
|
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',
|
|
to: '/fileupload'
|
|
}
|
|
]}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
toggle(event) {
|
|
this.$refs.menu.toggle(event);
|
|
},
|
|
save() {
|
|
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
|
}
|
|
},
|
|
components: {
|
|
'PanelDoc': PanelDoc
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.p-panel p {
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
</style> |