AppCard

A material style card. More...

Import Statement:	import Felgo 4.0
Inherits:	Item

List of all members, including inherited members

Properties

actions : var
bottomMargin : real
cardSwipeArea : alias
content : var
header : var
leftMargin : real
margin : real
media : var
paper : alias
rightMargin : real
swipeEnabled : bool
topMargin : real

Detailed Description

The AppCard offers a material style card component. The card also includes an AppCardSwipeArea to create cards with a Tinder-like swipe gesture.

Example Usage: A Basic Card with Header, Banner, Content and Actions

This is an example for a basic card with a header, a banner image, some text content and action buttons.

 import Felgo
 import QtQuick

 App {
   AppPage {
     AppCard {
       id: card
       width: parent.width
       margin: dp(15)
       paper.radius: dp(5)

       // We use a slightly adapted SimpleRow as header cell, this gives us nice styling with low effort
       header: SimpleRow {
         imageSource: "https://cdn.pixabay.com/photo/2016/06/24/10/47/architecture-1477041_960_720.jpg"
         text: "Lorem ipsum"
         detailText: "Ut enim ad minim veniam"

         enabled: false
         image.radius: image.width/2
         image.fillMode: Image.PreserveAspectCrop
         style: StyleSimpleRow {
           showDisclosure: false
           backgroundColor: "transparent"
         }
       }

       // For the media cell, we use a simple AppImage
       media: AppImage {
         width: parent.width
         fillMode: Image.PreserveAspectFit
         source: "https://cdn.pixabay.com/photo/2016/06/24/10/47/architecture-1477041_960_720.jpg"
       }

       // For the content cell, we use some placeholder text
       content: AppText{
         width: parent.width
         padding: dp(15)
         text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
       }

       // Some useless buttons to display in the actions cell
       actions: Row {
         IconButton {
           iconType: IconType.thumbsup
         }
         IconButton {
           iconType: IconType.sharealt
         }
         AppButton {
           text: "Follow"
           flat: true
         }
       }
     }
   }
 }

Example Usage: A Tinder-like Swipeable Card

This is basically the same example as above, with only the AppCard::swipeEnabled property set to true. This enables the internal AppCardSwipeArea and the card can be swiped. You can further customize the swipe, by changing the properties of the AppCard::cardSwipeArea, in this example we decrease the AppCardSwipeArea::rotationFactor to 0.05.

 import Felgo
 import QtQuick

 App {
   AppPage {
     AppCard {
       id: card
       width: parent.width
       margin: dp(15)
       paper.radius: dp(5)
       swipeEnabled: true
       cardSwipeArea.rotationFactor: 0.05

       // If the card is swiped out, this signal is fired with the direction as parameter
       cardSwipeArea.onSwipedOut: {
         console.debug("card swiped out: " + direction)
       }

       // We use a slightly adapted SimpleRow as header cell, this gives us nice styling with low effort
       header: SimpleRow {
         imageSource: "https://cdn.pixabay.com/photo/2016/06/24/10/47/architecture-1477041_960_720.jpg"
         text: "Lorem ipsum"
         detailText: "Ut enim ad minim veniam"

         enabled: false
         image.radius: image.width/2
         image.fillMode: Image.PreserveAspectCrop
         style: StyleSimpleRow {
           showDisclosure: false
           backgroundColor: "transparent"
         }
       }

       // For the media cell, we use a simple AppImage
       media: AppImage {
         width: parent.width
         fillMode: Image.PreserveAspectFit
         source: "https://cdn.pixabay.com/photo/2016/06/24/10/47/architecture-1477041_960_720.jpg"
       }

       // For the content cell, we use some placeholder text
       content: AppText{
         width: parent.width
         padding: dp(15)
         text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
       }

       // Some useless buttons to display in the actions cell
       actions: Row {
         IconButton {
           iconType: IconType.thumbsup
         }
         IconButton {
           iconType: IconType.sharealt
         }
         AppButton {
           text: "Follow"
           flat: true
         }
       }
     }
   }
 }