Transfer list
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
Customize columns
Available Columns
Selected 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
Tranfer List - Modal Title
From
To
<!-- 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
Interfaces and types
Accessibility
Accessibility guidelines coming soon