A list view with rows you can swipe to change the state of the given data.
npm install @nhochdrei/angular-swipe-listnpm i @nhochdrei/angular-swipe-list --save
To be able to use it, don't forget to import the SwipeListModule in your app.module.ts.
For the basic setup you need the following html part and the typescript object:
``html ` `typescript`
dataArray: SwipelistData[] = [
{
label: 'test'
},
{
label: 'test2'
}
];
The basic setup for a list without the displaying of the state consists of a list of swipe-cells. Each swipe-cell has a left, right and centre element. The middle element is the one which shows the label from the data object.
The left and right elements can be seen if you're swiping to one of the directions. In this case, the right element is placed right, you can see it if you're swiping to the left side.
This swipe-list is capable of an additional display of the actual state which your list element is in.
There is no limit to the number of states you can use, that's where the defaultStartIndex comes to life. For example, You want to use 3 different states, delete, archive and spam.options.hasStates
In our little example, the goal is a list where the user can select the needed operations on multiple elements. After the user selected all the operations she/he clicks a button and all the operations get executed.
To display the active state of each element we use the and set it to true. On every row, the standard state is set to delete for now. To change that just set the defaultStartIndex to 1. Now the standard state is archive, the counting starts from 0.
html
`
States:
`typescript
statesToInsert: SwipelistState[] = [
{
value: 'X',
color: 'rgb(50, 120, 180)',
label: 'XMas'
},
{
value: 'A',
color: 'rgb(6, 182, 0)',
label: 'automatic',
matIcon: 'code',
matIconStyling: 'color: rgb(120, 180, 120); font-size: 36px;'
},
{
value: 'Y',
color: 'rgb(80, 120, 120)',
label: 'Y wing squadron',
customIcon: 'T 9500'
}
];
`
Options:
`typescript
options: SwipelistOptions = {
states: this.statesToInsert,
statePanelWidth: '60px',
stateFontSize: '12pt',
colorCenter: 'rgb(37, 39, 44)',
colorStatePanel: 'rgb(0, 0, 0)',
colorText: 'white',
borderRadius: '4px',
height: '100px',
listFontsize: '12pt',
minSwipePercent: 30,
maxSwipePx: 700
};
`
Data:
`typescript
dataArray: SwipelistData[] = [
{
label: 'Test1',
defaultStartIndex: 1
},
{
label: 'Schrift',
defaultStartIndex: 2
},
{
label: 'Test',
defaultStartIndex: 0
}
];
`
Output:
`typescript
onOutput(event): void {
const newData: SwipelistData = event;
console.log(newData);
}
`
[data] can be a two-way binding. You can use the (dataChange) event too, this event is triggered on every swipe. Your data object will update automatically on every swipe no matter if you're listing on the object or not.`html
[data]="dataArray"
[options]="options"
(dataChange)="onDataChange()"
(singleChangedData)="onOutput($event)
(touch)="onTouch($event)">
`$3
The SwipelistData object has the following fields:
`typescript
SwipelistData {
label: string;
id?: any;
value?: string;
defaultStartIndex?: number;
}
`
The only field you have to use to get the swipe-list run is the label one. This field represents the list element.
Each data object will have a value field, at least after the assigned swipe-cell got swiped. After every swipe, the value field will hold the state information. The state information is a custom assigned value or, depending on the direction of the swipe, left or right.
Use the id field to identify your data after a change.defaultStartIndex: An array index to set a default value from the states array if you got one$3
SwipelistOptions object:
` typescript
SwipelistOptions {
states?: SwipelistState[];
displayStateValue?: boolean;
hasStates?: boolean;
statesAtLeft?: boolean;
statePanelWidth?: string;
stateFontSize?: string;
colorCenter?: string;
colorStatePanel?: string;
useColorOfStates?: boolean;
colorText?: string;
borderRadius?: string;
height?: string;
listFontsize?: string;
minSwipePercent?: number;
maxSwipePx?: number;
useSwipeTouch?: boolean;
}
`
>Each value has to be in a css readable format! For example rgb(0,0,0) or 20pxstates: An array of statesdisplayStateValue: If false no icons or values will be displayed in the status panel, this variable has a standard value of truehasStates: If you want to display the actual state, this has to be true. You can set your own states anyways, they will get usedstatesAtLeft: Only have to use this if you want this to be truestatePanelWidth: The width for your display of the active statestateFontSize: Font-size of the states panelcolorCenter: The background-colour for the middle elementcolorStatePanel: The background-colour for the display of the actual stateuseColorOfStates: If true the status panel will have the background colour of the active statecolorText: Sets the text/font-colour for the complete listborderRadius: If you want to, you can get rounded borders for the centre element. They only can be seen while swipingheight: The height for each of your list-elementslistFontsize: Font-size of the swipe-listminSwipePercent: The needed percentage of the screen width to detect a swipemaxSwipePx: This variable can be used to prevent a too long swipe on displays with too many pixelsuseSwipeTouch: If this is true the touch output will be triggered whenever the swipe was too small to trigger the singleChangedData$3
SwipelistState object:
`typescript
SwipelistState {
value: string;
color?: string;
label?: string;
matIcon?: string;
matIconStyling?: string;
customIcon?: string;
}
`
value: The value which will be displayed and set to your data object, don't leave this emptycolor: The colour which will be displayed while swipinglabel: The text which will be displayed while swipingmatIcon: If you use material icons just write the name of the icon down here - you can get the icons from Material IconsmatIconStyling: This field can be used to further style the material icon, use full wrote out css statements like this: color: rgb(120, 180, 120); font-size: 36px;customIcon: Use this if you want to use a none material design icon>You should be able to use the material icons if you use
ng add @angular/material`. Otherwise look at Material Icons Instructions