Pular para o conteúdo

Transfer list

Um transferência de lista (ou "shuttle") permite ao usuário mover um ou mais itens da lista entre as listas.

Para completar, este exemplo inclui botões para "mover tudo", mas nem todas as transferências de lista precisam disso.

Transferência de lista simples

Para completar, este exemplo inclui botões para "mover tudo", mas nem todas as transferências de lista precisam disso.

List item 1
List item 2
List item 3
List item 4
  • List item 5
    List item 6
    List item 7
    List item 8
  • Transferência de lista aprimorada

    Este exemplo troca os botões "mover todos" por uma caixa de seleção para "selecionar todos / selecionar nenhum" e adiciona um contador.

    Choices0/4 selected

    List item 1
    List item 2
    List item 3
    List item 4
  • Chosen0/4 selected

    List item 5
    List item 6
    List item 7
    List item 8
  • Limitations

    The component comes with a couple of limitations:

    • It only works on desktop. If you have a limited amount of options to select, prefer the Autocomplete component. If mobile support is important for you, have a look at #27579.
    • There are no high-level components exported from npm. The demos are based on composition. If this is important for you, have a look at #27579.

    API

    See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.