UI components

Linked Lists

A component to select multiple items from a long list, while keeping them sorted.

  • Alexander Summers
  • Alison Blaire
  • Anna Marie LeBeau
  • Charles Francis Xavier
  • Elizabeth Braddock
  • Emma Grace Frost
  • Erik Magnus Lehnsherr
  • Henry Philip McCoy
  • James Howlett
  • Jean Elaine Grey
  • John Proudstar
  • Jubilation Lee
  • Katherine Anne Pryde
  • Kurt Wagner
  • Lucas Bishop
  • Nathan Summers
  • Ororo Munroe
  • Piotr Nikolaievitch Rasputin
  • Raven Darkhölme
  • Remy Etienne LeBeau
  • Robert Louis Drake
  • Roberto da Costa
  • Scott Summers
  • Sean Cassidy
  • Shiro Yoshida
  • Warren Worthington III
    <div>
      <label>Known Mutants</label>
      <LinkedList id="linkedlist-demo-list1" linked_to="linkedlist-demo-list2">
        <li><input type="checkbox" name="users" value="1" />
          Alexander Summers</li>
        <!-- ... etc ... -->
        <li><input type="checkbox" name="users" value="27" />
          Warren Worthington III</li>
      </LinkedList>
    
      <button
        type="button"
        class="select-all"
        onclick="document.getElementById('linkedlist-demo-list1').dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
      >
        Select all &raquo;
      </button>
    </div>
    <div>
      <label>X-Men</label>
      <LinkedList id="linkedlist-demo-list2" linked_to="linkedlist-demo-list1" active>
      </LinkedList>
    
      <button
        type="button"
        class="remove-all"
        onclick="document.getElementById('linkedlist-demo-list2').dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
      >
        &laquo; Remove all
      </button>
    </div>
    
    .ui-linkedlist {
      padding: 0px;
      background-color: rgb(255 255 255);
      overscroll-behavior: contain;
      overflow-y: scroll;
      list-style-type: none;
      height: 16rem;
      margin: 0px;
      border: 1px solid rgb(128 128 128);
      border-radius: 0.25rem;
      font-size: 0.85rem;
    }
    .ui-linkedlist li {
      cursor: pointer;
      display: flex;
      padding: 0.25rem 1rem;
      align-items: center;
    }
    .ui-linkedlist li[disabled] {
      color: rgb(156 156 156);
      cursor: default;
    }
    .ui-linkedlist li:hover {
      background-color: rgb(243 244 246);
    }
    .ui-linkedlist input[type="checkbox"] {
      margin-right: 0.5rem;
    }
    label {
      display: inline-block;
      font-weight: bold;
      background-color: white;
      padding: 0.25rem 2rem;
      border: 1px solid rgb(128 128 128);
      border-radius: 0.25rem 0.25rem 0 0;
      font-size: 0.7rem;
      margin-bottom: -1px;
    }
    
    button {
      margin-top: 0.5rem;
      display: inline-flex;
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      align-items: center;
      justify-content: center;
    }
    button > :not([hidden]) ~ :not([hidden]) {
      margin-left: 0.25rem;
    }
    button {
      white-space: nowrap;
      border-radius: 0.25rem;
      border: 1px solid transparent;
      background-color: rgb(229 231 235);
      padding: 0.5rem 0.75rem;
      text-align: center;
      font-size: 0.75rem;
      line-height: 1rem;
    }
    button:hover {
      border-color: rgb(219 234 254);
      background-color: rgb(243 244 246);
    }
    button:focus {
      background-color: rgb(229 231 235);
      outline-offset: 1px;
      outline-color: #3b82f6;
    }
    @media (min-width: 640px) {
      button {
        padding: 0.25rem 0.5rem;
      }
    }
    button.select-all {
      float: right;
    }