Visual Framework
Visual Framework
Supports click trigger to open. User can select menu item or click outside menu to close it. When menu is open, outside clicks will be captured by menu.
Currently, usage intended with navigation menu. Component is based on the Example Disclosure Navigation Menu of the ARIA Authoring Practices Guide (APG).
Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.
includeYou'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type" : "block",
"label" : "John doe",
"width" : "14rem",
"labelAlign" : "left",
"menuItems" : [object Object],[object Object],[object Object],[object Object],
}
%}
{% include "../path_to/vf-dropdown/vf-dropdown.njk" %}
renderThis approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.
{% render '@vf-dropdown', {
"component-type" : "block",
"label" : "John doe",
"width" : "14rem",
"labelAlign" : "left",
"menuItems" : [object Object],[object Object],[object Object],[object Object],}
%}
<div class="vf-dropdown" data-vf-js-dropdown style="width:14rem">
<div class="vf-dropdown__label-container">
<div class="vf-dropdown__label" style="text-align: left">John doe</div>
<div>
<svg aria-hidden="true" class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16">
<g transform="matrix(0.6666666666666666,0,0,0.6666666666666666,0,0)">
<path d="M12,19.5a2.34,2.34,0,0,1-1.73-.78L.46,7.57A1.85,1.85,0,1,1,3.23,5.13l8.58,9.75a.25.25,0,0,0,.38,0l8.58-9.75a1.85,1.85,0,1,1,2.77,2.44L13.73,18.72A2.34,2.34,0,0,1,12,19.5Z" style="fill: #000000"></path>
</g>
</svg>
</div>
</div>
<div class="vf-dropdown__menu-container">
<div class="vf-dropdown-overlay"></div>
<div class="vf-dropdown__menu">
<div class="vf-dropdown__menu-item">
<a class="vf-dropdown__menu-item-link" href="JavaScript:Void(0);">Profile</a>
</div>
<div class="vf-dropdown__menu-item">
<a class="vf-dropdown__menu-item-link" href="JavaScript:Void(0);">Settings</a>
</div>
<div class="vf-dropdown__menu-item">
<a class="vf-dropdown__menu-item-link" href="JavaScript:Void(0);">Logout</a>
</div>
<div class="vf-dropdown__menu-item">
<a class="vf-dropdown__menu-item-link" href="https://www.ebi.ac.uk/">EBI Home</a>
</div>
</div>
</div>
</div>
This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-dropdown with this command.
$ yarn add --dev @visual-framework/vf-dropdown
You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:
import { vfDropdown } from 'vf-dropdown/vf-dropdown';
// Or import directly
// import { vfDropdown } from '../components/raw/vf-dropdown/vf-dropdown.js';
vfDropdown(); // invoke it
The style files included are written in Sass. If you're using a VF-core project, you can import it like this:
@import "@visual-framework/vf-dropdown/index.scss";
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter
File system location: components/vf-dropdown
Find an issue on this page? Propose a change or discuss it.