@evergreen-wc/eve-navigation
Navigation web component made with lit element
Last updated 2 months ago by hutchgrant .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @evergreen-wc/eve-navigation 
SYNC missed versions from official npm registry.

eve-dropdown

An Evergreen Navigation Web Component

Demo

Install

npm i @evergreen-wc/eve-navigation

Usage

import { html, LitElement } from '@polymer/lit-element';
import '@evergreen-wc/eve-navigation';

const menu = [
  { label: 'Home', to: '/' },
  { label: 'Blog', to: '/blog' },
  { label: 'Portfolio', to: '/portfolio',
    dropdown: [
      { label: 'dropdown item 1', to: '/demos1' },
      { label: 'dropdown item 2', to: '/demos2' }
    ]
  },
  { label: 'Photos', to: '/photos' },
  { label: 'Contact', to: '/contact' }
];

class MyComponent extends LitElement {
  render() {
    return html`
      <eve-navigation brand="My Website" .menu=${menu} fluid></eve-navigation>
    `;
  }
}
customElements.define('my-component', MyComponent);

Props

Property Description
brand Main Brand name displayed and linked for the feature application
menu Main navigation menu array. Each item is an object which contains a label and to(url) keys. First index is default brand link.
fluid Set container width to 100% of all devices. Otherwise, container width is preset to responsive breakpoints >=1200px, >=992px, >=768px, >=576px, <576px and centered on page
fixed Set navigation position to fixed at top.

Styling

--primary-color: green;
--secondary-color: #fff;
--nav-background: var(--primary-color);
--nav-brand-text-size: 18px;
--nav-brand-text-color: var(--secondary-color);
--nav-menu-text-color: var(--secondary-color);
--nav-menu-text-size:18px;
--nav-menu-text-hover-color: var(--primary-color);
--nav-menu-text-hover-background: var(--secondary-color);
--nav-menu-drop-hover-background: color(green tint(25%));

Current Tags

  • 0.0.10                                ...           latest (2 months ago)

9 Versions

  • 0.0.10                                ...           2 months ago
  • 0.0.9                                ...           a year ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 5
Last Day 0
Last Week 4
Last Month 2
Dependencies (2)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |