Rozloženia

Kirigami.Page zobrazuje akcie na pravej strane hornej hlavičky v režime pre počítač a v päte v mobilnom režime.

Kirigami.GlobalDrawer je bočný panel podobný menu, ktorý poskytuje navigáciu založenú na akciách pre vašu aplikáciu. Tu sú vnorené akcie užitočné, pretože je možné vytvoriť vnorenú navigáciu:

Viac o globálnych vysúvacích paneloch si môžete prečítať na stránke dokumentácie pre panely.

Jednoduchý formulár

Kirigami.ContextDrawer pozostáva z dodatočnej sady akcií, ktoré sú skryté za menu s tromi bodkami vpravo hore v režime pre počítač alebo vpravo dole v mobilnom režime, ak nie je dostatok miesta. Používa sa na zobrazenie akcií, ktoré sú relevantné iba pre konkrétnu stránku. Viac o nich si môžete prečítať v našom tutoriáli Vysúvacie panely Kirigami.

Kirigami.ActionTextField sa používa na pridávanie kontextových akcií k textovému poľu, napríklad na vymazanie textu alebo vyhľadávanie textu.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    pageStack.initialPage: Kirigami.Page {

        Kirigami.FormLayout {
            anchors.fill: parent

            Controls.TextField {
                Kirigami.FormData.label: "TextField 1:"
            }
            Controls.TextField {
                Kirigami.FormData.label: "TextField 2:"
            }
            Controls.TextField {
                Kirigami.FormData.label: "TextField 3:"
            }
        }
    }
}

Jednoduché rozloženie formulára v desktopovom režime

Sekcie a oddeľovače

V tomto príklade vytvárame tlačidlo "vymazať" pre vyhľadávacie pole, ktoré je viditeľné iba keď je zadaný text.

ActionTextField by ste mali používať priamo len zriedka. SearchField a PasswordField oba dedia z ActionTextField a pravdepodobne pokryjú váš požadovaný prípad použitia.

Kirigami.SwipeListItem je delegát určený na podporu extra akcií. Pri použití myši sa jeho akcie vždy zobrazujú. Na dotykovom zariadení ich možno zobraziť potiahnutím položky pomocou úchytu. Na nasledujúcich obrázkoch sú to ikony vpravo.

Upozornenie

Kirigami.ActionToolBar je panel nástrojov zostavený zo zoznamu akcií. Štandardne bude každá akcia, ktorá sa zmestí do panela nástrojov, reprezentovaná ako ToolButton, pričom tie, ktoré sa nezmestia, budú presunuté do menu na konci panela nástrojov.

Rovnako ako ActionTextField, nemusíte používať ActionToolBar priamo, pretože sa používa hlavičkami stránok a kartami na zobrazenie ich akcií.

Kirigami.FormLayout {
    anchors.fill: parent

    Controls.TextField {
        Kirigami.FormData.label: "TextField 1:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 2:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 3:"
    }
    Kirigami.Separator {
        Kirigami.FormData.isSection: true
        Kirigami.FormData.label: "New Section!"
    }
    ColumnLayout {
        Kirigami.FormData.label: "Radio buttons"
        Controls.RadioButton {
            text: "Radio 1"
            checked: true
        }
        Controls.RadioButton {
            text: "Radio 2"
        }
        Controls.RadioButton {
            text: "Radio 3"
        }
    }
    Item {
        Kirigami.FormData.isSection: true
        Kirigami.FormData.label: "Another Section! (lineless though)"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 4:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 5:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 5:"
    }
}

Vynútenie desktopového alebo mobilného rozloženia

Horizontálny panel nástrojov zobrazený v hornej časti aplikácie

Viac o komponentoch ActionToolBar si môžete prečítať na ich venovanej stránke dokumentácie.
Kirigami.Card sa používa na zobrazenie zbierky informácií alebo akcií spolu. Tieto akcie možno pridať do skupiny actions, podobne ako pri predchádzajúcich komponentoch.

Kirigami.FormLayout {
    anchors.fill: parent
    wideMode: false

    Controls.TextField {
        Kirigami.FormData.label: "TextField 1:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 2:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 3:"
    }
}

Rozloženie formulára s vynúteným mobilným rozložením

Zarovnanie vašich štítkov

Viac informácií nájdete na stránke komponentu pre karty.

Kirigami.FormLayout {
    anchors.fill: parent

    ColumnLayout {
        Kirigami.FormData.label: "This is a label:"
        Kirigami.FormData.labelAlignment: Qt.AlignTop

        Controls.Label {
            text: "This is some rather long text \nthat should elide to multiple lines \nto show how the label gets aligned."
            elide: Text.elideLeft
        }
    }
}

Rozloženie formulára s hore zarovnaným štítkom

Vytvorte si vlastné prispôsobiteľné panely nástrojov s komponentom ActionToolBar

Hoci stránky Kirigami vám umožňujú jednoducho umiestniť sadu akcií do hlavičky stránky, sú chvíle, kedy by ste mohli uprednostniť niečo flexibilnejšie.

Kirigami poskytuje komponent Kirigami.ActionToolBar. Zobrazuje zoznam objektov Kirigami.Action a zobrazí ich čo najviac, pričom pre tie, ktoré sa nezmestia, poskytuje prepĺňacie menu. ActionToolBar je dynamický a bude presúvať akcie do a z prepĺňacieho menu v závislosti od dostupnej veľkosti.

Kirigami.FormLayout {
    anchors.fill: parent

    ColumnLayout {
        Kirigami.FormData.label: "This is a label:"
        Kirigami.FormData.labelAlignment: labelText.text.lineCount > 1 ? Qt.AlignTop : Qt.AlignVCenter

        Controls.Label {
            id: labelText
            text: "This is some rather long text \nthat should elide to a new line \nso it appears below the Form Label."
            elide: Text.elideLeft
        }
    }
}

Ovládacie prvky a interaktívne elementy

Vnorené správy