mwcpl
Version:
Master's Web Component Pattern Library
176 lines (175 loc) • 5.24 kB
JavaScript
import { Component, h, Prop } from '@stencil/core';
export class MwcplNavbarItem {
constructor() {
/**
* Selects the text, icon and background.
*/
this.active = false;
/**
* The label of the navigation item.
*/
this.label = '';
/**
* `href` of the navigation item.
*/
this.href = '#';
/**
* Pushes the element to the bottom of the navigation bar.
*/
this.spacer = false;
/**
* Extends the navigation item.
*/
this.open = false;
/**
* Makes the font larger and bolder.
*/
this.header = false;
/**
* Hides the header icon.
*/
this.iconless = false;
}
render() {
return (h("li", null,
h("a", { href: this.href },
h("slot", { name: "icon" }),
h("span", { class: "label" }, this.label))));
}
static get is() { return "mwcpl-navbar-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["mwcpl-navbar-item.scss"]
}; }
static get styleUrls() { return {
"$": ["mwcpl-navbar-item.css"]
}; }
static get properties() { return {
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Selects the text, icon and background."
},
"attribute": "active",
"reflect": false,
"defaultValue": "false"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The label of the navigation item."
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "`href` of the navigation item."
},
"attribute": "href",
"reflect": false,
"defaultValue": "'#'"
},
"spacer": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Pushes the element to the bottom of the navigation bar."
},
"attribute": "spacer",
"reflect": false,
"defaultValue": "false"
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Extends the navigation item."
},
"attribute": "open",
"reflect": false,
"defaultValue": "false"
},
"header": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Makes the font larger and bolder."
},
"attribute": "header",
"reflect": false,
"defaultValue": "false"
},
"iconless": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hides the header icon."
},
"attribute": "iconless",
"reflect": false,
"defaultValue": "false"
}
}; }
}