Merge pull request #2748 from tugcekucukoglu/active-doc

add docs 'p-menuitem-active' class definition
pull/2749/head
Tuğçe Küçükoğlu 2022-07-01 16:52:56 +03:00 committed by GitHub
commit 9bea5bb25f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 159 additions and 146 deletions

View File

@ -95,7 +95,7 @@ export default {
if (this.activeItem && item === this.activeItem) if (this.activeItem && item === this.activeItem)
this.activeItem = null; this.activeItem = null;
else else
this.activeItem = item; this.activeItem = item;
} }
if (!item.items) { if (!item.items) {

View File

@ -117,7 +117,7 @@ export default {
if (this.activeItem && item === this.activeItem) if (this.activeItem && item === this.activeItem)
this.activeItem = null; this.activeItem = null;
else else
this.activeItem = item; this.activeItem = item;
} }
if (!item.items) { if (!item.items) {

View File

@ -113,7 +113,7 @@ export default {
if (this.activeItem && item === this.activeItem) if (this.activeItem && item === this.activeItem)
this.activeItem = null; this.activeItem = null;
else else
this.activeItem = item; this.activeItem = item;
} }
if (!item.items) { if (!item.items) {

View File

@ -337,6 +337,10 @@ export default {
<tr> <tr>
<td>p-menuitem</td> <td>p-menuitem</td>
<td>Menuitem element.</td> <td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-active</td>
<td>Active menuitem element.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-text</td> <td>p-menuitem-text</td>

View File

@ -153,7 +153,7 @@ export default {
<p>Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p> <p>Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;MegaMenu :model="items"&gt; &lt;MegaMenu :model="items"&gt;
&lt;template #start&gt; &lt;template #start&gt;
Before Before
&lt;/template&gt; &lt;/template&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
@ -170,7 +170,7 @@ export default {
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;MegaMenu :model="items"&gt; &lt;MegaMenu :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt; &lt;/router-link&gt;
&lt;/template&gt; &lt;/template&gt;
@ -278,6 +278,10 @@ export default {
<td>p-menuitem</td> <td>p-menuitem</td>
<td>Menuitem element.</td> <td>Menuitem element.</td>
</tr> </tr>
<tr>
<td>p-menuitem-active</td>
<td>Active menuitem element.</td>
</tr>
<tr> <tr>
<td>p-menuitem-text</td> <td>p-menuitem-text</td>
<td>Label of a menuitem.</td> <td>Label of a menuitem.</td>

View File

@ -29,132 +29,129 @@ export default {
return { return {
items: [ items: [
{ {
label:'File', label:'File',
icon:'pi pi-fw pi-file', icon:'pi pi-fw pi-file',
items:[ items:[
{ {
label:'New', label:'New',
icon:'pi pi-fw pi-plus', icon:'pi pi-fw pi-plus',
items:[ items:[
{ {
label:'Bookmark', label:'Bookmark',
icon:'pi pi-fw pi-bookmark' icon:'pi pi-fw pi-bookmark'
}, },
{ {
label:'Video', label:'Video',
icon:'pi pi-fw pi-video' icon:'pi pi-fw pi-video'
}, }
]
] },
}, {
{ label:'Delete',
label:'Delete', icon:'pi pi-fw pi-trash'
icon:'pi pi-fw pi-trash' },
}, {
{ separator:true
separator:true },
}, {
{ label:'Export',
label:'Export', icon:'pi pi-fw pi-external-link'
icon:'pi pi-fw pi-external-link' }
} ]
]
}, },
{ {
label:'Edit', label:'Edit',
icon:'pi pi-fw pi-pencil', icon:'pi pi-fw pi-pencil',
items:[ items:[
{ {
label:'Left', label:'Left',
icon:'pi pi-fw pi-align-left' icon:'pi pi-fw pi-align-left'
}, },
{ {
label:'Right', label:'Right',
icon:'pi pi-fw pi-align-right' icon:'pi pi-fw pi-align-right'
}, },
{ {
label:'Center', label:'Center',
icon:'pi pi-fw pi-align-center' icon:'pi pi-fw pi-align-center'
}, },
{ {
label:'Justify', label:'Justify',
icon:'pi pi-fw pi-align-justify' icon:'pi pi-fw pi-align-justify'
}, }
]
]
}, },
{ {
label:'Users', label:'Users',
icon:'pi pi-fw pi-user', icon:'pi pi-fw pi-user',
items:[ items:[
{ {
label:'New', label:'New',
icon:'pi pi-fw pi-user-plus', icon:'pi pi-fw pi-user-plus',
}, },
{ {
label:'Delete', label:'Delete',
icon:'pi pi-fw pi-user-minus', icon:'pi pi-fw pi-user-minus',
}, },
{ {
label:'Search', label:'Search',
icon:'pi pi-fw pi-users', icon:'pi pi-fw pi-users',
items:[ items:[
{ {
label:'Filter', label:'Filter',
icon:'pi pi-fw pi-filter', icon:'pi pi-fw pi-filter',
items:[ items:[
{ {
label:'Print', label:'Print',
icon:'pi pi-fw pi-print' icon:'pi pi-fw pi-print'
} }
] ]
}, },
{ {
icon:'pi pi-fw pi-bars', icon:'pi pi-fw pi-bars',
label:'List' label:'List'
} }
] ]
} }
] ]
}, },
{ {
label:'Events', label:'Events',
icon:'pi pi-fw pi-calendar', icon:'pi pi-fw pi-calendar',
items:[ items:[
{ {
label:'Edit', label:'Edit',
icon:'pi pi-fw pi-pencil', icon:'pi pi-fw pi-pencil',
items:[ items:[
{ {
label:'Save', label:'Save',
icon:'pi pi-fw pi-calendar-plus' icon:'pi pi-fw pi-calendar-plus'
}, },
{ {
label:'Delete', label:'Delete',
icon:'pi pi-fw pi-calendar-minus' icon:'pi pi-fw pi-calendar-minus'
}, }
]
] },
}, {
{ label:'Archieve',
label:'Archieve', icon:'pi pi-fw pi-calendar-times',
icon:'pi pi-fw pi-calendar-times', items:[
items:[ {
{ label:'Remove',
label:'Remove', icon:'pi pi-fw pi-calendar-minus'
icon:'pi pi-fw pi-calendar-minus' }
} ]
] }
} ]
]
}, },
{ {
label:'Quit', label:'Quit',
icon:'pi pi-fw pi-power-off' icon:'pi pi-fw pi-power-off'
} }
] ]
} }
} }
} }
@ -209,7 +206,7 @@ export default {
<td>null</td> <td>null</td>
<td>An array of menuitems.</td> <td>An array of menuitems.</td>
</tr> </tr>
<tr> <tr>
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
@ -219,31 +216,31 @@ export default {
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>start</td> <td>start</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>end</td> <td>end</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>item</td> <td>item</td>
<td>item: Menuitem instance</td> <td>item: Menuitem instance</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <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> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
@ -271,6 +268,10 @@ export default {
<tr> <tr>
<td>p-menuitem</td> <td>p-menuitem</td>
<td>Menuitem element.</td> <td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-active</td>
<td>Active menuitem element.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-text</td> <td>p-menuitem-text</td>

View File

@ -323,6 +323,10 @@ toggle(event) {
<td>p-menuitem</td> <td>p-menuitem</td>
<td>Menuitem element.</td> <td>Menuitem element.</td>
</tr> </tr>
<tr>
<td>p-menuitem-active</td>
<td>Active menuitem element.</td>
</tr>
<tr> <tr>
<td>p-menuitem-text</td> <td>p-menuitem-text</td>
<td>Label of a menuitem.</td> <td>Label of a menuitem.</td>