TabBar QML Type

Permite al usuario cambiar entre diferentes vistas o subtareas. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

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

Propiedades anexas

• 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))

Descripción detallada

TabBar proporciona un modelo de navegación basado en pestañas.

TabBar se rellena con controles TabButton, y puede utilizarse junto con cualquier control de diseño o contenedor que proporcione la propiedad currentIndex, como StackLayout o 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
    }
}

Como se muestra más arriba, TabBar se rellena normalmente con un conjunto estático de botones de pestaña que se definen en línea como hijos de la barra de pestañas. También es posible add, insert, move, y remove elementos dinámicamente en tiempo de ejecución. Se puede acceder a los elementos mediante itemAt() o contentChildren.

Cuando TabBar se empareja con otro contenedor, como SwipeView, es necesario realizar una vinculación bidireccional entre la propiedad currentIndex de cada control. Para hacer esto sin romper los enlaces, evite establecer currentIndex directamente, y en su lugar utilice setCurrentIndex(), por ejemplo. Consulte Managing the Current Index para obtener más información.

Para realizar una acción cuando cambia currentIndex, utilice el manejador de señales de cambio de propiedad onCurrentIndexChanged:

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

Cambiar el tamaño de las pestañas

Por defecto, TabBar redimensiona sus botones para ajustarse a la anchura del control. El espacio disponible se distribuye equitativamente entre cada botón. El comportamiento de redimensionamiento por defecto puede ser anulado estableciendo una anchura explícita para los botones.

El siguiente ejemplo ilustra cómo mantener cada botón de pestaña en su tamaño implícito en lugar de ser redimensionado para ajustarse a la barra de pestañas:

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

Flickable Tabs

Si la anchura total de los botones supera la anchura disponible de la barra de pestañas, ésta se vuelve automáticamente desplazable.

TabBar {
    id: bar
    width: parent.width

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

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

Véase también TabButton, Personalización de la TabBar, Controles de Navegación, Controles Contenedores y Gestión del Enfoque en Qt Quick Controls.

Documentación de propiedades

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

Esta propiedad contiene la altura del contenido. Se utiliza para calcular la altura total implícita de la barra de pestañas.

Esta propiedad se introdujo en QtQuick.Controls 2.2 (Qt 5.9).

Véase también Container::contentHeight.

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

Esta propiedad contiene el ancho del contenido. Se utiliza para calcular el ancho total implícito de la barra de pestañas.

Esta propiedad se introdujo en QtQuick.Controls 2.2 (Qt 5.9).

Véase también Container::contentWidth.

position : enumeration

Esta propiedad contiene la posición de la barra de pestañas.

Valores posibles:

El valor por defecto es específico del estilo.

Véase también ApplicationWindow::header, ApplicationWindow::footer, Page::header, y Page::footer.

Documentación de propiedades adjuntas

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

Esta propiedad adjunta contiene el índice de cada botón de pestaña en TabBar.

Se adjunta a cada botón de pestaña del TabBar.

Esta propiedad se introdujo en QtQuick.Controls 2.3 (Qt 5.10).

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

Esta propiedad adjunta mantiene la posición de la barra de pestañas.

Se adjunta a cada botón de pestaña de TabBar.

Valores posibles:

Esta propiedad se introdujo en QtQuick.Controls 2.3 (Qt 5.10).

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

Esta propiedad adjunta contiene la barra de pestañas que gestiona este botón de pestaña.

Se adjunta a cada botón de pestaña de TabBar.

Esta propiedad fue introducida en QtQuick.Controls 2.3 (Qt 5.10).