AppCard

A material style card. More...

Import Statement: import VPlayApps 1.0
Inherits:

Item

Properties

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 VPlayApps 1.0
 import QtQuick 2.0

 App {
   Page {
     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 {
           icon: IconType.thumbsup
         }
         IconButton {
           icon: 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 VPlayApps 1.0
 import QtQuick 2.0

 App {
   Page {
     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 {
           icon: IconType.thumbsup
         }
         IconButton {
           icon: IconType.sharealt
         }
         AppButton {
           text: "Follow"
           flat: true
         }
       }
     }
   }
 }

Property Documentation

actions : var

The QML item used for the actions cell of the card.

This QML property was introduced in V-Play 2.18.1.


bottomMargin : real

The bottom margin of the card container (paper) relative to the card width.

This QML property was introduced in V-Play 2.18.1.

See also margin, topMargin, leftMargin, and rightMargin.


cardSwipeArea : alias

Alias to the AppCardSwipeArea item used to create Tinder-like swipe gestures.

This QML property was introduced in V-Play 2.18.1.


content : var

The QML item used for the content cell of the card.

This QML property was introduced in V-Play 2.18.1.


header : var

The QML item used for the header cell of the card.

This QML property was introduced in V-Play 2.18.1.


leftMargin : real

The left margin of the card container (paper) relative to the card width.

This QML property was introduced in V-Play 2.18.1.

See also margin, topMargin, bottomMargin, and rightMargin.


margin : real

The margin of the card container (paper) relative to the card width. You can also set the properties for top, bottom, left and right margin individually.

This QML property was introduced in V-Play 2.18.1.

See also topMargin, bottomMargin, leftMargin, and rightMargin.


media : var

The QML item used for the media cell of the card.

This QML property was introduced in V-Play 2.18.1.


paper : alias

Alias to the AppPaper item used to create the card container.

This QML property was introduced in V-Play 2.18.1.


rightMargin : real

The right margin of the card container (paper) relative to the card width.

This QML property was introduced in V-Play 2.18.1.

See also margin, topMargin, bottomMargin, and leftMargin.


swipeEnabled : bool

Set this property to true to enable a Tinder-like swipe gesture for this card. The default value is false.

This QML property was introduced in V-Play 2.18.1.


topMargin : real

The top margin of the card container (paper) relative to the card width.

This QML property was introduced in V-Play 2.18.1.

See also margin, bottomMargin, leftMargin, and rightMargin.


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support