Skip to content

How to manage the space between the cards? #129

@ma-ramezani

Description

@ma-ramezani

Screen Shot 2021-09-11 at 7 38 52 PM

import QtQuick 2.15
import Qaterial 1.0 as Qaterial
import QtQuick.Controls 2.12

Qaterial.Page
{
    id: root
    ScrollView
    {
        parent: root
        id: _pagescroll
        width:root.width
        height: root.height
        contentWidth: -1
        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
        ScrollBar.horizontal.interactive: false
        ScrollBar.vertical.interactive: false
        Column
        {
            width: parent.width
            height: parent.height
            Qaterial.Grid
            {
                height: parent.height
                width: parent.width
                id: grid
                leftPadding: 16
                rightPadding: 16
                topPadding: 8
                bottomPadding: 8
                
                Qaterial.Card{
                    parent: grid
                    implicitWidth: 200
                    height: 100
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.medium: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.small: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                }
                
                Qaterial.Card
                {
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.medium: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.small: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                    
                    implicitHeight: 50
                }
                
                Qaterial.Card
                {
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillHalf
                    Qaterial.Layout.large: Qaterial.Layout.FillHalf
                    Qaterial.Layout.medium: Qaterial.Layout.FillHalf
                    Qaterial.Layout.small: Qaterial.Layout.FillHalf
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                    
                    implicitHeight: 50
                }
                
                Qaterial.Card
                {
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.medium: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.small: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                    
                    implicitHeight: 50
                }
                
                Qaterial.Card
                {
                    implicitHeight: 50
                    
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillSixth
                }
                
                Qaterial.Card
                {
                    implicitHeight: 50
                    
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillSixth
                }
                
                Qaterial.Card
                {
                    implicitHeight: 150
                    
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillSixth
                }
                
                Qaterial.Card
                {
                    implicitHeight: 50
                    
                    Qaterial.Layout.large: Qaterial.Layout.FillQuarter
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillSixth
                }
                
                Qaterial.Card
                {
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillThird
                    Qaterial.Layout.large: Qaterial.Layout.FillParent
                    Qaterial.Layout.medium: Qaterial.Layout.FillHalf
                    Qaterial.Layout.small: Qaterial.Layout.FillParent
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                    
                    implicitHeight: 50
                    
                }
                
                Qaterial.Card
                {
                    Qaterial.Layout.extraLarge: Qaterial.Layout.FillParent
                    Qaterial.Layout.large: Qaterial.Layout.FillParent
                    Qaterial.Layout.medium: Qaterial.Layout.FillHalf
                    Qaterial.Layout.small: Qaterial.Layout.FillParent
                    Qaterial.Layout.extraSmall: Qaterial.Layout.FillParent
                    
                    implicitHeight: 50
                    
                }
            } 
        }
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions