CenturyLink
Lumen
Lumen Enterprise Portal
Lumen Rebrand24
Portal Rebrand24

Transfer list

Transfer list is used to organize and select items

Examples

Base #

From

To 

<!-- Vue component -->
<ChiTransferList
  :transferListData="list"
  :config="config"
/>

<!-- Config and Data -->
data: {
  config: {
    searchInput: true,
    checkbox: false,
    columns: {
      from: {
        title: 'From',
        description: 'Description from',
      },
      to: {
        title: 'To',
        description: 'Description to',
      },
    },
  },
  list: [
    {
      value: 'first',
      label: 'First',
      selected: false,
      locked: false,
      wildcard: false,
    },
    {
      value: 'second',
      label: 'Second',
      selected: false,
      locked: false,
      wildcard: false,
    },
    {
      value: 'third',
      label: 'Third',
      selected: true,
      locked: true,
      wildcard: false,
    },
    {
      value: 'fourth',
      label: 'Fourth',
      selected: true,
      locked: true,
      wildcard: false,
    },
    {
      value: 'fifth',
      label: 'Fifth',
      selected: true,
      locked: false,
      wildcard: false,
    },
    {
      value: 'sixth',
      label: 'Sixth',
      selected: true,
      locked: false,
      wildcard: true,
    },
    {
      value: 'seventh',
      label: 'Seventh',
      selected: true,
      locked: false,
      wildcard: true,
    },
  ]
}

Modal #

Customize columns
<!-- Vue component -->
<ChiTransferList
  :transferListData="list"
  :config="config"
  modal
/>

<!-- Config and Data -->
data: {
  config: {
    searchInput: true,
    checkbox: false,
    columns: {
      from: {
        title: 'From',
        description: 'Description from',
      },
      to: {
        title: 'To',
        description: 'Description to',
      },
    },
  },
  list: [
    {
      value: 'first',
      label: 'First',
      selected: false,
      locked: false,
      wildcard: false,
    },
    {
      value: 'second',
      label: 'Second',
      selected: false,
      locked: false,
      wildcard: false,
    },
    {
      value: 'third',
      label: 'Third',
      selected: true,
      locked: true,
      wildcard: false,
    },
    {
      value: 'fourth',
      label: 'Fourth',
      selected: true,
      locked: true,
      wildcard: false,
    },
    {
      value: 'fifth',
      label: 'Fifth',
      selected: true,
      locked: false,
      wildcard: false,
    },
    {
      value: 'sixth',
      label: 'Sixth',
      selected: true,
      locked: false,
      wildcard: true,
    },
    {
      value: 'seventh',
      label: 'Seventh',
      selected: true,
      locked: false,
      wildcard: true,
    },
  ]
}

Modal with custom config #

Tooltip message
<!-- Vue component -->
<ChiTransferList
  :transferListData="list"
  :config="config"
  :modal="modal"
/>

<!-- Config and Data -->
data: {
  config: {
    searchInput: true,
    checkbox: false,
    columns: {
      from: {
        title: 'From',
        description: 'Description from',
      },
      to: {
        title: 'To',
        description: 'Description to',
      },
    },
  },
  list: [
    {
      value: 'first',
      label: 'First',
      selected: false,
      locked: false,
      wildcard: false,
    },
    {
      value: 'second',
      label: 'Second',
      selected: false,
      locked: false,
      wildcard: false,
    },
    {
      value: 'third',
      label: 'Third',
      selected: true,
      locked: true,
      wildcard: false,
    },
    {
      value: 'fourth',
      label: 'Fourth',
      selected: true,
      locked: true,
      wildcard: false,
    },
    {
      value: 'fifth',
      label: 'Fifth',
      selected: true,
      locked: false,
      wildcard: false,
    },
    {
      value: 'sixth',
      label: 'Sixth',
      selected: true,
      locked: false,
      wildcard: true,
    },
    {
      value: 'seventh',
      label: 'Seventh',
      selected: true,
      locked: false,
      wildcard: true,
    },
  ],
  modal: {
    tooltipMsg: 'Custom tooltip msg',
    icon: 'atom',
    title: 'My awesome title',
    ariaLabel: 'custom aria label',
  };
}

JavaScript

Props

Property
Description
Interface
Default
config
To customize Transfer list details
{
  checkbox?: boolean;
  columns: {
    from: {
      title: string;
      description?: string;
    };
    to: {
      title: string;
      description?: string;
    };
  };
  searchInput?: boolean;
}
undefined
transferListData
To provide Transfer list with data
TransferListItem[]
undefined
modal
To define transfer list as modal or add modal configuration
TransferListModalConfig | boolean
undefined

Interfaces and types

Name
Interface
TransferListItem
interface TransferListItem {
  label: string;
  locked?: boolean;
  selected: boolean;
  value: string;
  wildcard?: boolean;
}
TransferListModalConfig
interface TransferListModalConfig {
  ariaLabel?: boolean;
  icon?: string;
  title?: boolean;
  tooltipMsg?: string;
}

Accessibility

Accessibility guidelines coming soon