Skip to content

VML imports #16

Description

@squidink7

Implementing imports in VML would allow large projects to split up their UI into multiple files and reuse components.
The regular V syntax could be re-used for consistency, e.g. below:
main.vml

import PrimaryScreen

Screen {
    id: root
    background: #F1F5F9

    Label { text: "Screen manager" x: 20 y: 14 width: root.width - 40 height: 30 color: #0F172A font_size: 20 bold: true }

    ScreenManager {
        id: navigation
        x: 20
        y: 56
        width: root.width - 40
        height: 240
        current: app.current
        background: #FFFFFF
        corner_radius: 10

        PrimaryScreen {}
    }
}

primary_screen.vml

module PrimaryScreen

Screen {
        id: home
        Label { text: "Home" x: 24 y: 26 width: 240 height: 34 color: #0F172A font_size: 24 bold: true }
        Label { text: "Only this screen is mounted." x: 24 y: 68 width: 300 height: 24 color: #64748B }
        Button { text: "Open details" on_tap: app.show("details") x: 24 y: 116 width: 140 height: 38 background: #2563EB color: #FFFFFF corner_radius: 8 }
}

Though module may not be the most appropriate name for UI elements, input welcome.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions