Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to manage the space between the cards? #129

Open
avr68 opened this issue Sep 11, 2021 · 1 comment
Open

How to manage the space between the cards? #129

avr68 opened this issue Sep 11, 2021 · 1 comment

Comments

@avr68
Copy link

avr68 commented Sep 11, 2021 •
edited by OlivierLDff

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
                    
                }
            } 
        }
    }
}
@OlivierLDff
Copy link
Owner

With the spacing property of Qaterial.Grid
Check it QaterialOnline

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@OlivierLDff @avr68