Skip to content

task-lists-element 1.0.8 Latest version

Install from the command line:
Learn more
$ npm install @github/task-lists-element@1.0.8
Install via package.json:
"@github/task-lists-element": "1.0.8"

About this package

<task-lists> element

Drag and drop task list items.

Installation

$ npm install --save @github/task-lists-element

Usage

Script

Import as a module:

import '@github/task-lists-element'

With a script tag:

<script type="module" src="./node_modules/@github/task-lists-element/dist/index.js">

Markup

<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

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 require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

Package details

  • @github github
  • June 04, 2020
  • 13 dependencies
  • MIT License

Download activity

  • Total downloads 28
  • Last 30 days 1
  • Last week 0
  • Today 0

Recent versions

View all
You can’t perform that action at this time.