<vega-left-nav footnote="Version 2.0.0"></vega-left-nav>
<vega-button-circle variant="primary" icon="hb-menu"></vega-button> document.querySelector('vega-button-circle').addEventListener('vegaClick', () => {
document.querySelector('vega-left-nav').toggle();
});
document.querySelector('vega-left-nav').headerConfig = {
title: 'Heartland',
subtitle: 'MyAccount',
};
document.querySelector('vega-left-nav').source = [
{
type: 'section',
sectionHeader: {
title: 'section1',
actionTitle: 'EDIT',
},
children: [
{
type: 'group',
name: 'Dashboard',
children: [
{
type: 'link',
url: '',
name: 'subDashboard1',
counterBadge: { counter: 1 },
},
{
type: 'link',
url: '',
name: 'subDashboard2',
counterBadge: { counter: 2 },
},
],
},
{
type: 'link',
url: '',
name: 'Dashboard2',
selected: true,
counterBadge: { counter: 1 },
},
],
},
{
type: 'group',
name: 'Order Equipment',
icon: 'fas fa-shopping-bag',
children: [
{
type: 'link',
url: '',
name: 'Equipment',
counterBadge: { counter: 1 },
},
{
type: 'link',
url: '',
name: 'Equipment2',
},
],
},
{
type: 'link',
url: '',
name: 'Support',
icon: 'fas fa-file-alt',
},
];
The vega-left-nav is a complex fully contained component which will provide a navigation interfaces.
It may be displayed as a static navigation bar, or may be triggered by a menu button, as demonstrated above.
The left navigation may be toggled using the toggle() method:
document.querySelector('vega-left-nav').toggle();| Name | Description | Default |
|---|---|---|
| footnote | The footnote of the left nav string |
"" |
| source | The data source of the left navLeftNavSourceItem[] |
|
| header-config | The header config of the left nav.LeftNavHeaderConfig |
|
| open | Determines whether the navigation bar will be set to open or closed. boolean |
false |
| show-as-overlay | Indicates whether the backdrop should be shown. The default setting shows the backdrop. Note: this setting is only valid for breakpoint >= L. To avoid showing the backdrop, wrap all content into a class="vega-left-nav-content" right after vega-left-nav, otherwise contents outside the left nav will not shrink to right when the left nav is open. Boolean |
true |
export type LeftNavHeaderConfig = {
title?: string,
subtitle?: string,
};
export type LeftNavSourceItem = LeftNavSection | LeftNavGroup | LeftNavLink;
export type LeftNavSection = {
type: 'section',
sectionHeader?: LeftNavSectionHeaderConfig,
children: (LeftNavGroup | LeftNavLink)[],
};
export type LeftNavGroup = {
type: 'group',
name: string,
icon?: string,
children: LeftNavLink[],
};
export type LeftNavLink = {
type: 'link',
name: string,
url: string,
icon?: string,
selected?: boolean,
counterBadge?: LeftNavCounterBadgeConfig,
};
export type LeftNavSectionHeaderConfig = {
title?: string,
actionTitle?: string,
actionLink?: string,
actionEventful?: boolean,
};
export type LeftNavCounterBadgeConfig = {
color?: 'bg-danger' | 'bg-action',
counter?: number,
};
<body>
<vega-left-nav footnote="Version 2.0.0">
<vega-left-nav-section>
<vega-left-nav-group label="Dashboard">
<vega-left-nav-link>subDashboard1</vega-left-nav-link>
<vega-left-nav-link>subDashboard2</vega-left-nav-link>
</vega-left-nav-group>
<vega-left-nav-link>Dashboard2</vega-left-nav-link>
</vega-left-nav-section>
<vega-left-nav-group label="Order Equipment" icon="fas fa-shopping-bag">
<vega-left-nav-link>Equipment</vega-left-nav-link>
<vega-left-nav-link>Equipment2</vega-left-nav-link>
</vega-left-nav-group>
<vega-left-nav-link icon="fas fa-file-alt">support</vega-left-nav-link>
</vega-left-nav>
</body>
counterBadge for link items. <slot name='header-slot' /> to override the configuration of the header title, and <slot name='footer-slot' /> to override the footer. Note that the slot settings are only supported on first load. Example:
<vega-left-nav class="open">
<div slot="header-slot" class="v-bg-primary v-p-size-4 v-mx-size-32 v-font-field-label">
This is the content for header slot
</div>
<div slot="footer-slot" class="v-bg-primary v-p-size-4 v-mx-size-32 v-font-field-label">
This is the content for footer slot
</div>
</vega-left-nav>
vega-left-nav-section along with <vega-left-nav-group> and <vega-left-nav-link>. To set the header for a section, use the sectionHeader property in <vega-left-nav-section>.Note that
sectionHeaderis optional; it will only take effect when the title is set.
The section separator appears only below each section. We recommend that you set sections before group and link items.
Example:
<vega-left-nav-section sectionHeader="Object<LeftNavSectionHeaderConfig>">
<!-- a list of <vega-left-nav-group> -->
<!-- a list of <vega-left-nav-link> -->
</vega-left-nav-section><vega-left-nav-group> with <vega-left-nav-link>. You may set icon and label properties in <vega-left-nav-group>. label is required, while icon is optional. Example:
<vega-left-nav-group icon="XXX" label="XXX">
<!-- a list of <vega-left-nav-link> -->
</vega-left-nav-group><vega-left-nav-link> and set name, icon, url, counterBadge and the selected status.name and url are required, while icon, counterBadge, and selected are optional.Example:
<vega-left-nav-link
icon="XXX"
url="XXX"
selected="true|false"
counterBadge="Object<LeftNavCounterBadgeConfig>"
>
Name of Menu
</vega-left-nav-link>vegaStatusUpdateThe vegaStateUpdate event will be dispatched when the left nav status is changed (after being rendered).
Javascript
document.getElementById("left_nav_id").addEventListener("vegaStateUpdate", (e) => {
console.log(e.currentTarget.value) })React
<VegaLeftNav vegaStateUpdate={ (e) => { // do something } } ... ></VegaLeftNav>Vue.js
<vega-left-nav @vegastateupdate="method"></vega-left-nav>vegaMenuClickThe vegaMenuClick event will be dispatched when a link is clicked.
JavaScript
document.getElementById("link_id").addEventListener("vegaMenuClick", (e) => {
console.log(e.currentTarget.value) })React
<VegaLeftNavLink onVegaMenuClick={ (e) => { // do something } } ... ></VegaLeftNavLink>vue.js 3.X
<vega-left-nav-link @vegamenuclick="method"></vega-left-nav-link>