Web Component for easily creating layouts with sticky anchor navigation tabs and content sections.
APACHE-2.0 License
Web Component for easily creating layouts with sticky anchor navigation tabs and content sections.
Live demo ↗ | API documentation ↗
Install vcf-anchor-nav
:
npm i @vaadin-component-factory/vcf-anchor-nav --save
Once installed, import it in your application:
import '@vaadin-component-factory/vcf-anchor-nav';
Add <vcf-anchor-nav>
element and <vcf-anchor-nav-section>
s to the page.
<vcf-anchor-nav>
<h1 slot="header">Header</h1>
<vcf-anchor-nav-section name="One"> ... </vcf-anchor-nav-section>
<vcf-anchor-nav-section name="Two"> ... </vcf-anchor-nav-section>
<vcf-anchor-nav-section name="Three"> ... </vcf-anchor-nav-section>
</vcf-anchor-nav>
Fork the vcf-anchor-nav
repository and clone it locally.
Make sure you have npm installed.
When in the vcf-anchor-nav
directory, run npm install
to install dependencies.
Run npm start
to open the demo.
This is the client-side (Polymer 3) web component. If you are looking for the server-side (Java) API for the Vaadin Platform, it can be found here: Anchor Nav
Apache License 2.0