What is WebAtoms XF.SwipeView?
This control is a container control that contains the items for swipe gestures.
What are the properties of XF.SwipeView?
- LeftItems
- RightItems
- TopItems
- BottomItems
LeftItems
of type XF.SwipeItems
, shows the swipe items that are accessible by swiping from the left side of the control.
RightItems
of type XF.SwipeItems
, shows the swipe items that are accessible by swiping from the left side of the control.
TopItems
of type XF.SwipeItems
, shows the swipe items that are accessible by swiping from the top side of the control.
BottomItems
of type XF.SwipeItems
, shows the swipe items that are accessible by swiping from the bottom side of the control.
XF.SwipeView Code Sample
The demo code sample explains how to use the control in more detail. We'll start with the left items and right items swipe, which is part of the SwipeView. The hierarchy is straightforward.
<XF.SwipeView>
<XF.SwipeView.LeftItems>
<XF.SwipeItems>
<XF.SwipeItem Text="Favorite"
BackgroundColor="LightGreen"
command={Bind.event(()=> ...)}/>
</XF.SwipeItems>
</XF.SwipeView.LeftItems>
<XF.SwipeView.RightItems>
<----->
</XF.SwipeView.RightItems>
<--Content-->
</SwipeView>
How to Add the custom swipe items?
We can use the XF.SwipeItemView
type and design custom swipe items. We created the inbox view using XF.CollectionView
and used the custom swipe item in this example. The beauty of WebAtoms is that we've incorporated the FontAwesome library, which means we can use any font awesome icons with any of the controls in WebAtoms
.
Now, in this example, we've demonstrated custom swipe items such as marking an email as a favorite by swiping from the left side and marking as read by swiping from the right side.
<XF.SwipeView>
<XF.SwipeView.rightItems>
<XF.SwipeItems>
<XF.SwipeItemView
backgroundColor={Colors.green}
command={Bind.event((x) => x.data.read = !x.data.read)}>
---
</XF.SwipeItemView>
</XF.SwipeItems>
</XF.SwipeView>
In the last example, we demonstrated the XF.SwipeView.RightItems
swipe gesture, and similarly; the left side gesture can be implemented.
The mock data is bound to the XF.CollectionView
item source.
const XFEmailData = [
{
emailID:1,
subject:'WebAtoms Support',
message:'Login verification code from WebAtoms.',
image:'',
favorite: false,
archived:false,
dateSent: new Date(),
isDeleted:false,
isImportant: false,
read: false,
},
{...},
{...},
{...},
]
We added functionality to the ViewModel
component to generate the random color to make our inbox more beautiful. The function random_rgba
returns a random color that is bound to the view. Binding in WebAtoms
is simple; check the article of WebAtoms
on binding for more information.
public random_rgba() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
This demo can be downloaded.
Like | Comment | Save | Share |