Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/designbycode/vanilla-headless
https://github.com/designbycode/vanilla-headless
a11y accessibility disclosure dropdown dropdown-menus navigation popover popperjs tooltip
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/designbycode/vanilla-headless
- Owner: designbycode
- License: mit
- Created: 2022-09-30T21:44:07.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-23T08:00:17.000Z (10 months ago)
- Last Synced: 2024-04-14T12:58:12.009Z (10 months ago)
- Topics: a11y, accessibility, disclosure, dropdown, dropdown-menus, navigation, popover, popperjs, tooltip
- Language: TypeScript
- Homepage: https://designbycode.co.za/open-source/npm/vanilla-headless-web-components
- Size: 5.58 MB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Vanilla Headless
##### Completely un-styled, fully accessible UI Web Components library, with fully unopinionated css styling.
[](https://github.com/DesignByCode/vanilla-headless/stargazers)
[](https://nodei.co/npm/vanilla-headless/)
- [Install](#install)
- [Use](#use)
- [Demo](#codepen-demos)
- [Web Components](#web-components)
- [Popover](#popover-with-aria-keyboard-navigation)
- [Dropdown Menu](#dropdown-with-aria-keyboard-navigation)
- [Disclosure](#disclosure-with-aria-keyboard-navigation)
- [Tabs](#tab-with-aria-keyboard-navigation)
- [Mobile Navigation](#navigation-with-aria-keyboard-interactions)
- [Dark Mode Button](#dark-mode-toggle-button-with-keyboard-interactions)
- [Toggle Switch](#toggle-switch)
- [Directives](#directives)
- [ScrollTop](#scrolltop-with-aria-keyboard-interactions)
- [GoBack](#goback-with-aria-keyboard-interactions)
- [Use with PopperJs](#popperjs)
### Install
```bash
npm i vanilla-headless
```
```bash
yarn add vanilla-headless
```
```bash
// CDN
https://unpkg.com/vanilla-headless@latest
https://cdn.jsdelivr.net/npm/vanilla-headless@latest
```
### Use
```typescript
import "vanilla-headless"
```
> That's all, no other javascript required. Just wrap you aria compliant markup with the appropriate tag and attributes.
> The **example** files is using [TailwindCSS](https://tailwindcss.com/) but is not required
> with [TailwindUI](https://tailwindui.com/)
### Codepen Demos
- [Navigation, Popover, Dropdown, Disclosure,
ScrollTop](https://codepen.io/claudemyburgh/pen/JjvvPyx)
- [Dropdown Menu](https://codepen.io/claudemyburgh/pen/yLjQYVJ)
## Web Components
The web component is basically a wrapper around your semantic html. At it's most basic it will even work without any
css.
- [popover](#popover-with-aria-keyboard-navigation)
- [dropdown menu](#dropdown-with-aria-keyboard-navigation)
- [disclosure](#disclosure-with-aria-keyboard-navigation)
- [navigation](#navigation-with-aria-keyboard-interactions)
- [darkmode](#dark-mode-toggle-button-with-keyboard-interactions)
- [toggle switch](#toggle-switch)
### Popover with aria keyboard navigation
The popover element makes it easy to show and hide html elements on page. This work great for dropdown, menus and
popover.
#### Events:
- Toggle dropdown on click event.
- Toggle dropdown on keyEvent Space and Enter keys
- Close dropdown keyEvent Esc key.
- Close dropdown on click outside of element.
#### Requirements:
- Button:
- must be typeof `button`
- must have attributes of `aria-haspopup` and `aria-expanded`
- `ID` must have same value as dropdown labelledby
- Dropdown
- must have attributes of `aria-labelledby`
```html
Popover
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.
```
### Dropdown with aria keyboard navigation
The dropdown is at the core the same as the popover element with the only difference that it adds additional
functionality to navigate menu elements via keyboard and adding `aria-current` attribute to track selected element.
#### Events:
- Toggle dropdown on click event.
- Toggle dropdown on keyEvent Space and Enter keys
- Navigate up and down with Tab, Shift + Tab, DownArrow, UpArrow, RightArrow, LeftArrow keys
- Close dropdown keyEvent Esc key.
- Close dropdown on click outside of element.
#### Requirements:
- Button:
- must be typeof `button`
- must have attributes of `aria-haspopup` and `aria-expanded`
- `ID` must have same value as dropdown `labelledby`
- Dropdown
- must have attributes of `aria-labelledby`
- dropdown require at least 1 anchor or button tag with attribute `role="menuitem"`
```html
Dropdown
```
### Disclosure with aria keyboard navigation
The Disclosure element is ideal for hide and showing a list of elements. Best used for components like for Q&A's.
#### Events:
- Toggle panels on click event.
- Toggle panels on keyEvent Space and Enter
- Navigate up and down with Tab, Shift + Tab, DownArrow, UpArrow
#### Requirements:
- Button:
- must be typeof `button`
- must have attributes of `aria-controls` and `aria-expanded`
- Dropdown
- must have a `ID` matching `aria-controls`
```html
-
What do I do if I have a permit for an assigned lot, but can't find a space there?
-
Park at the nearest available parking meter without paying the meter and call 999-999-9999 to report the
problem. We will note and approve your alternate location and will
investigate the cause of the shortage in your assigned facility.
-
What do I do if I lose my permit or if my permit is stolen?
-
You should come to the Parking office and report the loss. There is a fee to replace your lost permit. However,
if your permit was stolen, a copy of a police report needs
to be submitted along with a stolen parking permit form for a fee replacement exemption.
-
Is there free parking on holidays?
-
All facilities are restricted from 2:00 am - 6:00 am on all days. No exceptions are made for any holiday or
recess except those officially listed as a
Holidays
in the calendar. Please note: 24-hour rental spaces, 24-hour rental lots, and disabled parking is enforced at
all times.
-
Do all parking facilities have the same enforcement rules?
-
Some parking facility restrictions differ from others. Be sure to take note of the signs at each lot entrance.
```
### Tab with aria keyboard navigation
_Since v1.3.0_
The Tab element is ideal for hide and showing a list of elements. Best used for components like for Tabs.
#### Events:
- Toggle panels on click event.
- Toggle panels on keyEvent Space and Enter
- Navigate up and down with Tab, Shift + Tab, DownArrow, UpArrow
#### Requirements:
- Button:
- must be typeof `button`
- must have attributes of `aria-controls` and `aria-expanded`
- Dropdown
- must have a `ID` matching `aria-controls`
```html
Tab 1
Tab 2
Tab 3
Tab 4
Tab 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, odit voluptas. Consequuntur debitis doloribus error iusto minus non odit quam!
Tab 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, odit voluptas. Consequuntur debitis doloribus error iusto minus non odit quam!
Tab 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, odit voluptas. Consequuntur debitis doloribus error iusto minus non odit quam!
Tab 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, odit voluptas. Consequuntur debitis doloribus error iusto minus non odit quam!
```
### Navigation with aria keyboard interactions
This component allow you to add hamburger toggle functionality to your navigation by adding aria labels to button
and the section you want to hide and show. The data attribute of ``data-state`` can be used to style or hide element.
#### Events:
- Toggle mobile menu with mouse click events.
- Toggle mobile menu pressing down on Enter and Space keys.
- Close mobile menu pressing Esc Key.
- Close mobile menu by clicking outside menu.
- Add multiple data-state of open and close
- Support two-way binding on state change of data-state
#### Requirements:
- Button:
- must be typeof `button`
- must add an attribute of `aria-expanded` `aria-controls`
- Mobile Menu
- must have a html element with an `id` matching `aria-controls`
```html
Open menu
Solutions
Analytics
Get a better understanding of where your traffic is coming from.
Engagement
Speak directly to your customers in a more meaningful way.
Security
Your customers' data will be safe and secure.
Integrations
Connect with third-party tools that you're already using.
Automations
Build strategic funnels that will drive your customers to convert
More
Help Center
Get all of your questions answered in our forums or contact support.
Guides
Learn how to maximize our platform to get the most out of it.
Events
See what meet-ups and other events we might be planning near you.
Recent Posts
-
Boost your conversion rate
-
How to use search engine
optimization to drive traffic to your site
-
Improve your customer
experience
```
### Dark Mode Toggle button with keyboard interactions
The dark mode component will toggle between dark and light and save the result to localStorage.
#### Events:
- Toggle theme button with mouse click events.
- Toggle theme button pressing down on Enter and Space keys.
- Adds a ``data-theme`` to root component
#### Requirements:
- Button:
- must be typeof `button`
- There must be at least 1 ``headless-darkmode`` component on every page. It is recommended to use it with in a
section that will be display on every page. Places like navigation or footer will work great.
```html
Dark Mode
```
### Toggle Switch
The toggle component allow you to turn a button elements into toggle switch
#### Events
- Toggle switch with mouse click event
- Toggle switch by pressing down on Enter and Space keys.
#### Requirements
- Button element with type of button
```html
Use setting
```
#### Styling toggle state
Markup the button the way you want and adding ``data-switch`` to one or multiple elements. This will set the data
attribute to "on" or "off". Now you can style, hide or show elements by styling data attribute. By default, this
attribute will be added to the top level component.
```css
headless-toggle[data-switch="on"] button[aria-checked] {
background: indigo;
}
headless-toggle[data-switch="on"] span[aria-hidden="true"] {
transform: translateX(20px);
}
```
## Directives
Directives are markers on a DOM element to attach a specified behavior to that DOM element.
- [Button](#button-directive)
- [ScrollTop](#scrolltop-with-aria-keyboard-interactions)
- [GoBack](#goback-with-aria-keyboard-interactions)
### Button directive
The button directive just adds event listeners to set aria-pressed attributes to a button element. Just add
``is="headless-button"`` to button element. Use css to style button using css propery `` button[aria-pressed=true]
`` or `` button[aria-pressed=false]
``
#### Events
- Add ``aria-pressed="true | false"`` on keydown, keyup, mouse click
#### Requirements:
- Must be a ``button`` element.
- Just add ``is="headless-button"`` to button elements
### ScrollTop with aria keyboard interactions (Extends HeadlessButton)
The scroll-to-top button makes it super easy to add this feature to your website. Just add a button and add the
attribute of `is="headless-scrolltop"` and that is it.
#### Events:
- Hide button on initial load.
- Hide and show button on scroll.
- Scroll to top on Mouse click.
- Scroll to top on Keydown for Space, Enter and Ctrl + Home.
#### Requirements:
- Button:
- must be typeof `button`
- must add an attribute of `is="headless-scrolltop"`
```html
Scroll to top
```
### GoBack with aria keyboard interactions (Extends HeadlessButton)
The ``headless-goback`` directive allow you to turn a button into go to previous page button using window.history
and adding the necessary aria indicators and events
#### Events:
- Trigger element on mouse click event
- Trigger element on keyboard event, when using Space or Enter
- Automatically set aria-pressed to true and false
```html
Go Back
```
### PopperJs
PopperJs is already bundle in and only require an attribute of `popper` to work. PopperJs only works on Popover,
DropDown and Navigation component.
#### Optional
- Popper.js
- **Required:** Add attribute of `popper` or `popper="true"` to enable popper.js
- Change placement with attribute `placement="bottom-end bottom-start"`
- Change offset with attribute `offset="0 20"`
#### Use with PopperJs
Attribute can be seperated by comma or empty space
```html