https://github.com/manufosela/nav-list

Polymer 3 webcomponent nav-list
https://github.com/manufosela/nav-list

Last synced: 4 days ago
JSON representation

Polymer 3 webcomponent nav-list

• Host: GitHub
• URL: https://github.com/manufosela/nav-list
• Owner: manufosela
• License: other
• Created: 2018-10-02T20:33:31.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:48:23.000Z (almost 2 years ago)
• Last Synced: 2024-09-19T00:13:11.966Z (about 2 months ago)
• Language: JavaScript
• Size: 711 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# \ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@manufosela/nav-list) [![Published on npmjs.com](https://img.shields.io/badge/npmjs-package-orange)](https://www.npmjs.com/package/@manufosela/nav-list) [![License: Apache-2.0](https://img.shields.io/badge/license-apache2.0-green)](https://www.apache.org/licenses/LICENSE-2.0)

@manufosela/nav-list is a Lit-Element webcomponent to draw a horizontal navigation list

## Demo

[nav-list codepen demo](https://codepen.io/manufosela/pen/MWjrrEW)

```html

Default nav-list demo


With attributes nav-list demo


  


    
5

    
6

    
7

    
8

    
9

  


With attributes nav-list demo


  


    
<3

    
3–5

    
5–10

    
>10

  


```

## Attributes

```code

[title] (String)

[selected] (String)

[fixed] (Boolean) (false by default)

[listen-events] (Boolean) (false by default)

```

## Listen Events

```code

navlist-last

navlist-next

(detail.id is mandatory)

```

## Dispatch Events

```code

navlist-changed (when new value is set)

```

## CSS vars

```css

    --width-list-element: auto;

    --height-list-element: auto;

    --border-radius-element: 0;

    --border-radius-selected-element: 0;

    --border-top-list-element: 2px solid transparent;

    --border-bottom-list-element: 2px solid transparent;

    --border-left-list-element: 2px solid transparent;

    --border-right-list-element: 2px solid transparent;

    --border-top-selected-element: 2px solid #cc3743;

    --border-bottom-selected-element: 2px solid #cc3743;

    --border-left-selected-element: 2px solid #cc3743;

    --border-right-selected-element: 2px solid #cc3743;

    --padding-list-element: 10px 20px;

    --padding-selected-element: 10px 13px;

```

## Install

First run `npm install` to install your element's dependencies.

## Viewing Your Element

```

$ npm run start

```

## Running Tests

```

$ npm run test

```

## Build

```

$ npm run build

```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

## Author

* **Mánu Fosela** - *Web Developer* - [manufosela](https://github.com/manufosela)

## License

This project is licensed under the Apache 2.0 License - see the [LICENSE](https://www.apache.org/licenses/LICENSE-2.0) file for details