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: 4 months 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 (about 6 years ago)
• Default Branch: main
• Last Pushed: 2024-01-24T21:42:32.000Z (5 months ago)
• Last Synced: 2024-02-25T04:04:05.538Z (4 months ago)
• Topics: custom-elements, web-components
• Language: TypeScript
• Homepage: https://github.github.io/task-lists-element/examples/
• Size: 611 KB
• Stars: 135
• Watchers: 189
• Forks: 29
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Lists

• 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.