BY Ajay Singh11 Nov 2021 Edit
WebAtoms -SwipeView
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.

BY Ajay Singh
LikeCommentSave
LikeCommentSaveShare
0
Categories
General
YantraJS
Developer Guides
Tutorials
Web Atoms Updates

POPULAR POSTS
17 Mar 2021
LATEST ACTIVITY
shubham.neurospeech
liked this post.
Simmi Kava
liked this post.
Show more
ARCHIVES
2021
2020
2019
2018
TAGS
javascript (46)
developer (25)
javascriptdeveloper (15)
Xamarin.Forms (15)
coding (10)
webatoms (10)
xamarin (10)
android (8)
arrays (8)
typescript (8)
csharp (6)
dotnet (5)
function (5)
iOS (5)
update (5)
web-atoms (5)
dotnet-standard (4)
methods (4)
object (4)
xamarin.android (4)
xamarin.io (4)




Web Atoms: JSX (TSX + TypeScript) for Xamarin.Forms, Hot Reload Your App in Production Environment

PlaygroundSamples Repository