Add icons slot to panel and demo
cagataycivici
parent
6b7ae4be59
commit
417516b084
|
|
@ -74,11 +74,6 @@
|
|||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
|
||||
&:first-child,
|
||||
&.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,13 @@
|
|||
<slot name="header">
|
||||
<span class="p-panel-title" v-if="header" :id="ariaId + '_header'">{{header}}</span>
|
||||
</slot>
|
||||
<a v-if="toggleable" tabindex="0" class="p-panel-titlebar-icon p-panel-titlebar-toggler" @click="toggle" @keydown.enter="toggle"
|
||||
:id="ariaId + '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed">
|
||||
<span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
|
||||
</a>
|
||||
<div class="p-panel-icons">
|
||||
<slot name="icons"></slot>
|
||||
<a v-if="toggleable" tabindex="0" class="p-panel-titlebar-icon p-panel-titlebar-toggler" @click="toggle" @keydown.enter="toggle"
|
||||
:id="ariaId + '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed">
|
||||
<span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="p-toggleable-content">
|
||||
<div class="p-toggleable-content" v-show="!d_collapsed" role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
|
||||
|
|
|
|||
|
|
@ -16,8 +16,14 @@
|
|||
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>Toggleable</h3>
|
||||
<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,
|
||||
|
|
@ -32,6 +38,50 @@
|
|||
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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,6 +54,21 @@ import Panel from 'primevue/panel';
|
|||
<Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed">
|
||||
Content
|
||||
</Panel>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Custom Icons</h3>
|
||||
<p>Additional icons can be placed at the header section of the panel using the special <i>icons</i> slot. For a unified look, it is suggest to add <i>.p-panel-titlebar-icon</i>
|
||||
class to your icons.</p>
|
||||
<CodeHighlight>
|
||||
<h3>Advanced</h3>
|
||||
<Panel header="Godfather I">
|
||||
<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>
|
||||
</Panel>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -156,6 +171,7 @@ import Panel from 'primevue/panel';
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/panel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Regular</h3>
|
||||
|
|
@ -166,14 +182,69 @@ import Panel from 'primevue/panel';
|
|||
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>Toggleable</h3>
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
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});
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
|
|
|||
Loading…
Reference in New Issue