<legno-header show="logo" logo-href="#logo" align="center" />
INFO
When using plain HTML you need to manually toggle the visibility of the HTML element if you want to show and hide the loader.
# LegnoHeader
# Examples
# Example 1 - Logo
# Example 2 - Links
<legno-header :show="headerContent" :links="headerLinks" />
data: {
headerContent: ["logo", "links"],
headerLinks: [{
url: "#profile",
text: "Profile",
icon: "legno-icon-user",
hideLinkOn: ["mobile"]
}, {
url: "#search",
text: "Search",
icon: "legno-icon-search-circle",
hideTextOn: ["mobile"],
}]
}
To show/hide headerLinks on various screen sizes use:
hideLinkOn: ["mobile", "tablet", "desktop", "above-desktop"] //Hides text and icon
hideTextOn: ["mobile", "tablet", "desktop", "above-desktop"] //Hides text
hideIconOn: ["mobile", "tablet", "desktop", "above-desktop"] //Hides icon
INFO
This component is only available as a Vue.js component.
# Example 3 - Menu
<legno-header
close-text="Close"
:show="headerContent"
:links="headerLinks"
:menu="headerMenu"
@menu-open="onMenuOpen"
@menu-close="onMenuClose" />
data: {
headerContent: ["logo", "links", "menu"],
headerLinks: [{
openMenu: true,
text: "Menu",
icon: "legno-icon-menu-circle",
hideLinkOn: ["desktop"]
}],
headerMenu: [{
url: "#menu-item-1",
text: "Menu item 1"
}, {
url: "#menu-item-2",
text: "Menu item 2"
}, {
url: "#menu-item-3",
text: "Menu item 3"
}, {
url: "#menu-item-4",
text: "Menu item 4"
}, {
url: "#menu-item-5",
text: "Menu item 5"
}]
},
methods: {
onMenuOpen: function () {
console.log('menu open');
},
onMenuClose: function () {
console.log('menu close');
}
}
INFO
This component is only available as a Vue.js component.
# Example 4 - Search
<legno-header
:show="headerContent"
:links="headerLinks"
close-text="Close"
search-placeholder="Search"
search-button-aria-label="Search"
search-info-text="[ Add optional info text here ]"
@search-open="onSearchOpen"
@search-close="onSearchClose"
@search-update="onSearchUpdate"
@search-submit="onSearchSubmit" />
data: {
headerContent: ["logo", "links", "search"],
headerLinks: [{
openSearch: true,
text: "Search",
icon: "legno-icon-search-circle"
}]
},
methods: {
onSearchOpen: function () {
console.log('search open');
},
onSearchClose: function () {
console.log('search close');
},
onSearchUpdate: function (value) {
console.log('updated value', value);
},
onSearchSubmit: function (value) {
console.log('submitted value', value);
}
}
INFO
This component is only available as a Vue.js component.
# Example 5 - All options
<legno-header
logo-href="#logo"
close-text="Close"
search-placeholder="Search"
search-button-aria-label="Search"
search-info-text="[ Add optional info text here ]"
:show="headerContent"
:links="headerLinks"
:menu="headerMenu"
@menu-open="onMenuOpen"
@menu-close="onMenuClose"
@search-open="onSearchOpen"
@search-close="onSearchClose"
@search-update="onSearchUpdate"
@search-submit="onSearchSubmit" />
data: {
headerContent: ["logo", "links", "menu", "search", "search-in-menu"],
headerLinks: [{
url: "#login",
text: "Login",
icon: "legno-icon-user-thin",
hideLinkOn: ["mobile"]
},{
openSearch: true,
text: "Search",
icon: "legno-icon-search-circle"
}, {
openMenu: true,
text: "Menu",
icon: "legno-icon-menu-circle",
hideLinkOn: ["desktop"]
}],
headerMenu: [{
url: "#login",
text: "Login",
icon: "legno-icon-user-thin",
hideLinkOn: ["tablet", "desktop"]
}, {
url: "#menu-item-1",
text: "Menu item 1"
}, {
url: "#menu-item-2",
text: "Menu item 2"
}, {
url: "#menu-item-3",
text: "Menu item 3"
}, {
url: "#menu-item-4",
text: "Menu item 4"
}, {
url: "#menu-item-5",
text: "Menu item 5"
}]
},
methods: {
onMenuOpen: function () {
console.log('menu open');
},
onMenuClose: function () {
console.log('menu close');
},
onSearchOpen: function () {
console.log('search open');
},
onSearchClose: function () {
console.log('search close');
},
onSearchUpdate: function (value) {
console.log('updated value', value);
},
onSearchSubmit: function (value) {
console.log('submitted value', value);
}
}
INFO
This component is only available as a Vue.js component.
# Slots
...
# Props
...