src/controls.6/GalleryRollItem.qml

0001 import QtQuick
0002 import QtQuick.Controls
0003
0004 import org.mauikit.controls 1.3 as Maui
0005 import Qt5Compat.GraphicalEffects
0006
0007 /**
0008  * @inherit GridBrowserDelegate
0009  * @since org.mauikit.controls
0010  *
0011  *  @brief A custom item to be used as a delegate in the browsing views or as a standalone card. This element presents a group of images in a carousel form.
0012  *
0013  *  This control inherits all properties from the MauiKit GridBrowserDelegate control. As such, this can have two labels, for a title and a message.
0014  *  @see GridBrowserDelegate#label1
0015  *  @see GridBrowserDelegate#label2
0016  *
0017  *  The header part of this control, the actual carousel of images, is handled by a GalleryRollTemplate.
0018  *  @see GalleryRollTemplate
0019  *
0020  *    @image html Delegates/galleryrollitem.png
0021  *
0022  *    @code
0023  *    Maui.GridBrowser
0024  *    {
0025  *        anchors.fill: parent
0026  *        model: 30
0027  *
0028  *        itemSize: 200
0029  *
0030  *        delegate: Item
0031  *        {
0032  *            width: GridView.view.cellWidth
0033  *            height: GridView.view.cellHeight
0034  *
0035  *            Maui.GalleryRollItem
0036  *            {
0037  *                anchors.fill: parent
0038  *                anchors.margins: Maui.Style.space.small
0039  *
0040  *                label1.text: "Demo"
0041  *                label2.text: index
0042  *                images: index %2 === 0 ? ['/home/camiloh/Downloads/street-1234360.jpg', '/home/camiloh/Downloads/flat-coated-retriever-1339154.jpg', '/home/camiloh/Downloads/5911329.jpeg'] : ['/home/camiloh/Downloads/street-1234360.jpg', '/home/camiloh/Downloads/flat-coated-retriever-1339154.jpg', '/home/camiloh/Downloads/5911329.jpeg', '/home/camiloh/Pictures/LastLights_by_Mushcube/LastLightsScreenPreview.png']
0043  *            }
0044  *        }
0045  *    }
0046  *    @endcode
0047  *
0048  *    <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/GalleryRollItem.qml">You can find a more complete example at this link.</a>
0049  *
0050  */
0051 Maui.GridBrowserDelegate
0052 {
0053     id: control
0054
0055     /**
0056      * @brief Whether the images should be saved in the cache, to reduce loading times.
0057      * By default this is set to `true`.
0058      */
0059     property bool cache : true
0060
0061
0062     /**
0063      * @brief A list of images to be used. This will be use as the model.
0064      */
0065     property var images : []
0066
0067     /**
0068      * @brief A callback function to manage what image is positioned. This callback function is called for each image source set in the model `images`, so the final source can be modified. This function should return a - new or modified - image source URL.
0069      *
0070      * As an example, if the `images` model looks like: `["page1", "page2", "page3"]` - which are not file URLs, this callback function can be use to map each individual source to an actual file URL.
0071      * @code
0072      * images: ["page1", "page2", "page3"]
0073      * cb : (source) =>
0074      * {
0075      *   return mapSourceToImageFile(source) //here the "page1" could be mapped to "file:///some/path/to/image1.jpg" and return this new source to be use.
0076      * }
0077      * @endcode
0078      */
0079     property var cb
0080
0081     /**
0082      * @brief The orientation of the transition of the images. By default this is set to horizontal using `ListView.Horizontal`.
0083      * Possible values are:
0084      * - ListView.Horizontal
0085      * - ListView.Vertical
0086      */
0087     property int orientation : Qt.Horizontal
0088
0089     label1.font.weight: Font.DemiBold
0090     label1.font.pointSize: Maui.Style.fontSizes.big
0091     template.labelSizeHint: 32
0092     template.alignment: Qt.AlignLeft
0093
0094     maskRadius: radius
0095
0096     template.iconComponent: Maui.GalleryRollTemplate
0097     {
0098         radius: control.radius
0099         cache: control.cache
0100         images: control.images
0101         cb: control.cb
0102         fillMode: control.fillMode
0103         running: !control.hovered && !control.checked
0104         imageWidth: control.imageWidth
0105         imageHeight: control.imageHeight
0106
0107         corners
0108         {
0109             topLeftRadius: control.radius
0110             topRightRadius: control.radius
0111             bottomLeftRadius: control.radius
0112             bottomRightRadius: control.radius
0113         }
0114     }
0115 }