<template>
<div class="wd-example-preview-nav-list">
<w-nav-list
:heading="headingNavList"
:items="navListItems"
@change="handleNavItemClick"
/>
</div>
</template>
<script>
export default {
data() {
return {
headingNavList: 'Marketing',
navListItems: [
{
title: 'Public Profile',
isActive: true,
dataId: 'watson1'
},
{
title: 'Account',
isActive: false
},
{
title: 'Organization',
isActive: false
},
{
title: 'Messages',
counter: 4,
counterType: 'warning',
isActive: false
},
{
title: 'Logout',
isActive: false
}
]
};
},
methods: {
handleNavItemClick(navItemSelected) {
this.selectedNavItem = navItemSelected;
}
}
};
</script>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
heading |
Defines a heading title for the navigation list |
string |
|
|
|
items |
An array of objects that represents the list of Navigation Items for the Navigation List component. |
array |
[] |
[ { title: String, isActive: Boolean, counter: Number, counterType: String, to: String, href: String, leadingVisual: Object } ] |
Slots
|
Name |
Description |
|---|---|
|
default |
Default content slot for nav-list |
Events
|
Name |
Description |
Type |
|---|---|---|
|
change |
This event is emitted when nav item change. |
{ "names": [ "String" ] } |