TabBar QML Type

Permet à l'utilisateur de basculer entre différentes vues ou sous-tâches. En savoir plus…

• Liste de tous les membres, y compris les membres hérités

Propriétés

• contentHeight : real (since QtQuick.Controls 2.2 (Qt 5.9))
• contentWidth : real (since QtQuick.Controls 2.2 (Qt 5.9))
• position : enumeration

Propriétés associées

• index : int (since QtQuick.Controls 2.3 (Qt 5.10))
• position : enumeration (since QtQuick.Controls 2.3 (Qt 5.10))
• tabBar : TabBar (since QtQuick.Controls 2.3 (Qt 5.10))

Description détaillée

TabBar propose un modèle de navigation par onglets.

TabBar est renseignée avec des contrôles « TabButton » et peut être utilisée avec n’importe quel contrôle de mise en page ou conteneur disposant d’une propriété « currentIndex », tel que StackLayout ou SwipeView

TabBar {
    id: bar
    width: parent.width
    TabButton {
        text: qsTr("Home")
    }
    TabButton {
        text: qsTr("Discover")
    }
    TabButton {
        text: qsTr("Activity")
    }
}

StackLayout {
    width: parent.width
    currentIndex: bar.currentIndex
    Item {
        id: homeTab
    }
    Item {
        id: discoverTab
    }
    Item {
        id: activityTab
    }
}

Comme illustré ci-dessus, TabBar est généralement rempli d’un ensemble statique de boutons d’onglets définis en ligne en tant qu’enfants de la barre d’onglets. Il est également possible d’ add, d’ insert, d’ move et d’ remove des éléments de manière dynamique lors de l’exécution. Les éléments sont accessibles via itemAt() ou contentChildren.

Lorsque TabBar est associé à un autre conteneur tel que SwipeView, il est nécessaire d’établir une liaison bidirectionnelle entre les propriétés currentIndex de chaque contrôle. Pour ce faire sans rompre les liaisons, évitez de définir directement currentIndex et utilisez plutôt setCurrentIndex(), par exemple. Voir Managing the Current Index pour plus d’informations.

Pour exécuter une action lorsque la valeur de « currentIndex » change, utilisez le gestionnaire de signal de changement de la propriété « onCurrentIndexChanged » :

onCurrentIndexChanged: {
    print("currentIndex changed to", currentIndex)
    // ...
}

Redimensionnement des onglets

Par défaut, TabBar redimensionne ses boutons pour les adapter à la largeur du contrôle. L'espace disponible est réparti de manière égale entre chaque bouton. Le comportement de redimensionnement par défaut peut être remplacé en définissant une largeur explicite pour les boutons.

L’exemple suivant illustre comment conserver la taille implicite de chaque bouton d’onglet au lieu de les redimensionner pour les adapter à la barre d’onglets :

TabBar {
    width: parent.width
    TabButton {
        text: "First"
        width: implicitWidth
    }
    TabButton {
        text: "Second"
        width: implicitWidth
    }
    TabButton {
        text: "Third"
        width: implicitWidth
    }
}

Onglets défilables

Si la largeur totale des boutons dépasse la largeur disponible de la barre d’onglets, celle-ci devient automatiquement défilable.

TabBar {
    id: bar
    width: parent.width

    Repeater {
        model: ["First", "Second", "Third", "Fourth", "Fifth"]

        TabButton {
            text: modelData
            width: Math.max(100, bar.width / 5)
        }
    }
}

Voir également « TabButton» , «Customizing TabBar», «Navigation Controls», «Container Controls» et «Focus Management» dans « Qt Quick Controls ».

Documentation sur les propriétés

contentHeight : real [since QtQuick.Controls 2.2 (Qt 5.9)]

Cette propriété stocke la hauteur du contenu. Elle sert à calculer la hauteur implicite totale de la barre d'onglets.

Cette propriété a été introduite dans QtQuick.Controls 2.2 (Qt 5.9).

Voir également Container::contentHeight.

contentWidth : real [since QtQuick.Controls 2.2 (Qt 5.9)]

Cette propriété contient la largeur du contenu. Elle sert à calculer la largeur implicite totale de la barre d'onglets.

Cette propriété a été introduite dans QtQuick.Controls 2.2 (Qt 5.9).

Voir également Container::contentWidth.

position : enumeration

Cette propriété définit la position de la barre d'onglets.

Valeurs possibles :

La valeur par défaut dépend du style.

Voir également ApplicationWindow::header, ApplicationWindow::footer, Page::header et Page::footer.

Documentation sur les propriétés associées

TabBar.index : int [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

Cette propriété associée contient l'index de chaque bouton d'onglet de l'TabBar.

Elle est associée à chaque bouton d'onglet de l'TabBar.

Cette propriété a été introduite dans QtQuick.Controls 2.3 (Qt 5.10).

TabBar.position : enumeration [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

Cette propriété associée détermine la position de la barre d'onglets.

Elle est associée à chaque bouton d'onglet de l'TabBar.

Valeurs possibles :

Cette propriété a été introduite dans QtQuick.Controls 2.3 (Qt 5.10).

TabBar.tabBar : TabBar [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

Cette propriété associée contient la barre d'onglets qui gère ce bouton d'onglet.

Elle est associée à chaque bouton d'onglet de l'TabBar.

Cette propriété a été introduite dans QtQuick.Controls 2.3 (Qt 5.10).