Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/github/task-lists-element
Drag and drop task list items.
https://github.com/github/task-lists-element
custom-elements web-components
Last synced: 7 days ago
JSON representation
Drag and drop task list items.
- Host: GitHub
- URL: https://github.com/github/task-lists-element
- Owner: github
- License: mit
- Created: 2018-04-25T23:05:39.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-10-11T05:38:44.000Z (4 months ago)
- Last Synced: 2025-01-13T00:07:12.644Z (14 days ago)
- Topics: custom-elements, web-components
- Language: TypeScript
- Homepage: https://github.github.io/task-lists-element/examples/
- Size: 919 KB
- Stars: 138
- Watchers: 231
- Forks: 23
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
- awesome-standalones - `<task-lists>`
README
# <task-lists> element
Drag and drop task list items.
## Installation
```
$ npm install --save @github/task-lists-element
```
## Usage
### Script
Import as a module:
```js
import '@github/task-lists-element'
```
With a script tag:
```html
```
### Markup
```html
<task-lists sortable>
<ul class="contains-task-list">
<li class="task-list-item">
<input type="checkbox" class="task-list-item-checkbox">
Hubot
</li>
<li class="task-list-item">
<input type="checkbox" class="task-list-item-checkbox">
Bender
</li>
</ul>
<ul class="contains-task-list">
<li class="task-list-item">
<input type="checkbox" class="task-list-item-checkbox">
BB-8
</li>
<li class="task-list-item">
<input type="checkbox" class="task-list-item-checkbox">
WALL-E
</li>
</ul>
</task-lists>
```
## Events
```js
const list = document.querySelector('task-lists')
list.addEventListener('task-lists-check', function(event) {
const {position, checked} = event.detail
console.log(position, checked)
})
list.addEventListener('task-lists-move', function(event) {
const {src, dst} = event.detail
console.log(src, dst)
})
```
## Browser support
Browsers without native [custom element support][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Microsoft Edge
[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements
## Development
```
npm install
npm test
```
## License
Distributed under the MIT license. See LICENSE for details.