https://github.com/alphagov/miller-columns-element
Miller columns (cascading lists) for hierarchical topic selection on GOV.UK
https://github.com/alphagov/miller-columns-element
custom-elements govuk govuk-content-publisher web-components
Last synced: about 1 year ago
JSON representation
Miller columns (cascading lists) for hierarchical topic selection on GOV.UK
- Host: GitHub
- URL: https://github.com/alphagov/miller-columns-element
- Owner: alphagov
- License: mit
- Created: 2018-10-26T11:21:28.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2025-05-02T16:14:35.000Z (about 1 year ago)
- Last Synced: 2025-05-08T22:49:37.270Z (about 1 year ago)
- Topics: custom-elements, govuk, govuk-content-publisher, web-components
- Language: JavaScript
- Homepage: https://alphagov.github.io/miller-columns-element/
- Size: 2.92 MB
- Stars: 16
- Watchers: 47
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# <miller-columns> element
Express a hierarchy by showing selectable lists of the items in each hierarchy level.
Selection of any item shows that item’s children in the next list.
## Installation
```
npm install --save miller-columns-element
```
## Usage
This element is expected to be used in an application with [govuk-frontend](https://github.com/alphagov/govuk-frontend) installed. The expected CSS dependencies are outlined in [examples.scss](./examples.scss).
```html
Use the right arrow to explore sub-topics, use the up and down arrows to find other topics.
-
Parenting, childcare and children's services
-
Divorce, separation and legal issues
-
Childcare and early years
-
```
## Browser support
Browsers without native [custom element support][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Internet Explorer 11
- Microsoft Edge
[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements
## Development
```
npm install
npm test
```
To continuously build files while developing run:
```
npm run watch
```
To install and run a local HTTP server using Node.js:
```
npm install -g http-server
http-server
```
To manually check examples in a web browser or using BrowserStack:
- `http://127.0.0.1:8080/examples/index.html` (default example)
- `http://127.0.0.1:8080/examples/checkboxes-checked.html` (with pre-selected items at page load)
- `http://127.0.0.1:8080/examples/miller-columns-test.html` (example used for tests)
Alternatively, you can open one of the HTML files in the [`/examples`](https://github.com/alphagov/miller-columns-element/tree/master/examples) directory for a quick preview.
## License
Distributed under the MIT license. See LICENSE for details.