Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › Invalid property assignment: "drawer" is a read-only property

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #16814

    Waeil

    hi agin, i need a help to solve this problem. i want combine Appdraw + Navigation ; to make a picture on the top of my drawer panel

     

    import Felgo 3.0
    import QtQuick 2.0
    import QtQuick.Layouts 1.3

    App
    {
    id: idMasterGUI

    AppDrawer
    {
    id: idAppDrawer
    width: parent.width * 0.4
    z: 10
    Rectangle
    {
    anchors.fill: parent
    color: Theme.tintColor
    }
    Column
    {
    spacing: dp(5)
    RoundedImage
    {
    id: id_img
    fillMode: AppImage.PreserveAspectFit
    source: “../assets/images/Menu.png”
    width: idAppDrawer.width
    height: idAppDrawer.width * 0.25
    }
    }
    }

    Navigation
    {
    id: navigation
    navigationMode: navigationModeDrawer
    drawer: idAppDrawer

    NavigationItem
    {
    title: “Welcome”
    icon: IconType.home

    NavigationStack
    {
    Page_Welcome{}
    }
    }

    NavigationItem
    {
    title: “Product”
    icon: IconType.dropbox

    NavigationStack
    {
    Page_ListProducts{}
    }
    }

    NavigationItem
    {
    title: “Billing”
    icon: IconType.shoppingcart

    NavigationStack
    {
    Page_ListBillings{}
    }
    }
    }
    }

    #16815

    Günther
    Felgo Team

    Hi Waeil!

    It is not required to add an additional AppDrawer item for showing a header-image in the navigation drawer. You can use the Navigation::headerView property to add an element on top of the list-items of your navigation.

    Please have a look at the Qt World Summit demo app for an example implementation of a navigation drawer that shows a header image.

    Cheers,
    Günther

    #16816

    Waeil

    it work Sir, thank’s.

    Can you please tell me how add Graduation inside NavigationItem .. or Tel me how customize my own component  for NavigationItem with Graduation

    gradient: Gradient

            {
                GradientStop { id: idGrad1; position: 0.0; color: "#EDEDED" }
                GradientStop { id: idGrad2; position: 0.95; color: "#E7E7E7" }
                GradientStop { id: idGrad3; position: 1.0; color: "#000000" }
            }

    Navigation

        {
            id: navigation
            navigationMode: navigationModeDrawer
            headerView: RoundedImage
                    {
                        id: id_img
                        fillMode: AppImage.PreserveAspectFit
                        source: "../assets/images/Menu.png"
                        width: navigation.drawer.width
                        height: navigation.drawer.width * 0.25
                    }
            NavigationItem
            {
                title: "Welcome"
                icon: IconType.home
    
    
                Page_Welcome{}
    
    
            }
    #16831

    Günther
    Felgo Team

    Hi Waeil!

    The NavigationItems (used as tabs / drawer list items) come with a default styling for iOS and Android. You can only modify their look by changing the ThemeNavigationAppDrawer or ThemeTabControl settings of your app Theme.

    Adding a completely custom styling for list-item and tabs of Navigation is not possible at the moment.

    However, you can build a new look, by using a custom AppDrawer and/or TabControl instead of the Navigation. These types give you full control over the styling of the content shown in the drawer or tab control.

    Best,
    Günther

Viewing 4 posts - 1 through 4 (of 4 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded