Add TabWidet

components/components.pro

@@ -5,10 +5,16 @@ TEMPLATE    = lib
 include(link_components.pri)
 
 SOURCES += \
-    plugin/qtmaterialplugins.cpp
+    plugin/qtmaterialplugins.cpp \
+    plugin/qtmaterialtabwidgetcontainerextension.cpp \
+    plugin/qtmaterialtabwidgetextensionfactory.cpp \
+    plugin/qtmaterialtabwidgetplugin.cpp
 HEADERS += \
     plugin/plugintemplate.h \
-    plugin/qtmaterialplugins.h
+    plugin/qtmaterialplugins.h \
+    plugin/qtmaterialtabwidgetcontainerextension.h \
+    plugin/qtmaterialtabwidgetextensionfactory.h \
+    plugin/qtmaterialtabwidgetplugin.h
 
 TARGET = $$qtLibraryTarget(qt-material-widget)
 target.path = $$[QT_INSTALL_PLUGINS]/designer

components/link_components.pri

@@ -50,7 +50,8 @@ SOURCES += \
     $$COMP_PATH/qtmaterialmenu.cpp \
     $$COMP_PATH/qtmaterialmenu_internal.cpp \
     $$COMP_PATH/qtmateriallist.cpp \
-    $$COMP_PATH/qtmateriallistitem.cpp
+    $$COMP_PATH/qtmateriallistitem.cpp \
+    $$PWD/qtmaterialtabwidget.cpp
 HEADERS += \
     $$COMP_PATH/qtmaterialavatar_p.h \
     $$COMP_PATH/qtmaterialavatar.h \
@@ -129,7 +130,8 @@ HEADERS += \
     $$COMP_PATH/qtmateriallist_p.h \
     $$COMP_PATH/qtmateriallistitem.h \
     $$COMP_PATH/qtmateriallistitem_p.h \
-    $$PWD/lib/qtmaterialconst.h
+    $$PWD/lib/qtmaterialconst.h \
+    $$PWD/qtmaterialtabwidget.h
 
 RESOURCES += \
     $$COMP_PATH/material_res.qrc

components/plugin/qtmaterialplugins.cpp

@@ -1,5 +1,5 @@
 #include "qtmaterialplugins.h"
-
+#include "qtmaterialtabwidgetplugin.h"
 QtMaterialPlugins::QtMaterialPlugins(QObject *parent) : QObject(parent)
 {
     m_plugins << new MaterialAppBarPlugin(this)
@@ -27,6 +27,7 @@ QtMaterialPlugins::QtMaterialPlugins(QObject *parent) : QObject(parent)
               << new MaterialTabsPlugin(this)
               << new MaterialTextFieldPlugin(this)
               << new MaterialTogglePlugin(this)
+              << new QtMaterialTabWidgetPlugin(this)
                  ;
 }
 

components/plugin/qtmaterialtabwidgetcontainerextension.cpp

@@ -0,0 +1,44 @@
+#include "qtmaterialtabwidgetcontainerextension.h"
+#include "qtmaterialtabwidget.h"
+
+QtMaterialTabWidgetContainerExtension::QtMaterialTabWidgetContainerExtension(QtMaterialTabWidget *widget,
+                                                                     QObject *parent)
+    : QObject(parent)
+    , myWidget(widget)
+{
+}
+
+void QtMaterialTabWidgetContainerExtension::addWidget(QWidget *widget)
+{
+    myWidget->addPage(widget);
+}
+
+int QtMaterialTabWidgetContainerExtension::count() const
+{
+    return myWidget->count();
+}
+
+int QtMaterialTabWidgetContainerExtension::currentIndex() const
+{
+    return myWidget->currentIndex();
+}
+
+void QtMaterialTabWidgetContainerExtension::insertWidget(int index, QWidget *widget)
+{
+    myWidget->insertPage(index, widget);
+}
+
+void QtMaterialTabWidgetContainerExtension::remove(int index)
+{
+    myWidget->removePage(index);
+}
+
+void QtMaterialTabWidgetContainerExtension::setCurrentIndex(int index)
+{
+    myWidget->setCurrentIndex(index);
+}
+
+QWidget* QtMaterialTabWidgetContainerExtension::widget(int index) const
+{
+    return myWidget->widget(index);
+}

components/plugin/qtmaterialtabwidgetcontainerextension.h

@@ -0,0 +1,32 @@
+#ifndef QTMATERIALTABWIDGETCONTAINEREXTENSION_H
+#define QTMATERIALTABWIDGETCONTAINEREXTENSION_H
+
+#include <QtDesigner/QDesignerContainerExtension>
+
+QT_BEGIN_NAMESPACE
+class QExtensionManager;
+QT_END_NAMESPACE
+class QtMaterialTabWidget;
+
+class QtMaterialTabWidgetContainerExtension: public QObject,
+        public QDesignerContainerExtension
+{
+Q_OBJECT
+Q_INTERFACES(QDesignerContainerExtension)
+
+public:
+explicit QtMaterialTabWidgetContainerExtension(QtMaterialTabWidget *widget, QObject *parent);
+
+void addWidget(QWidget *widget) override;
+int count() const override;
+int currentIndex() const override;
+void insertWidget(int index, QWidget *widget) override;
+void remove(int index) override;
+void setCurrentIndex(int index) override;
+QWidget *widget(int index) const override;
+
+private:
+QtMaterialTabWidget *myWidget;
+};
+
+#endif // QTMATERIALTABWIDGETCONTAINEREXTENSION_H

components/plugin/qtmaterialtabwidgetextensionfactory.cpp

@@ -0,0 +1,20 @@
+#include "qtmaterialtabwidgetextensionfactory.h"
+#include "qtmaterialtabwidgetcontainerextension.h"
+#include "qtmaterialtabwidget.h"
+
+QtMaterialTabWidgetExtensionFactory::QtMaterialTabWidgetExtensionFactory(QExtensionManager *parent)
+    : QExtensionFactory(parent)
+{}
+//! [0]
+
+//! [1]
+QObject *QtMaterialTabWidgetExtensionFactory::createExtension(QObject *object,
+                                                          const QString &iid,
+                                                          QObject *parent) const
+{
+    QtMaterialTabWidget *widget = qobject_cast<QtMaterialTabWidget*>(object);
+
+    if (widget && (iid == Q_TYPEID(QDesignerContainerExtension)))
+        return new QtMaterialTabWidgetContainerExtension(widget, parent);
+    return nullptr;
+}

components/plugin/qtmaterialtabwidgetextensionfactory.h

@@ -0,0 +1,21 @@
+#ifndef QTMATERIALTABWIDGETEXTENSIONFACTORY_H
+#define QTMATERIALTABWIDGETEXTENSIONFACTORY_H
+
+#include <QtDesigner/QExtensionFactory>
+
+QT_BEGIN_NAMESPACE
+class QExtensionManager;
+QT_END_NAMESPACE
+
+class QtMaterialTabWidgetExtensionFactory: public QExtensionFactory
+{
+    Q_OBJECT
+
+public:
+    explicit QtMaterialTabWidgetExtensionFactory(QExtensionManager *parent = nullptr);
+
+protected:
+    QObject *createExtension(QObject *object, const QString &iid, QObject *parent) const override;
+};
+
+#endif // QTMATERIALTABWIDGETEXTENSIONFACTORY_H

components/plugin/qtmaterialtabwidgetplugin.cpp

@@ -0,0 +1,145 @@
+#include <QtDesigner/QExtensionFactory>
+#include <QtDesigner/QExtensionManager>
+#include <QtDesigner/QDesignerFormEditorInterface>
+#include <QtDesigner/QDesignerFormWindowInterface>
+#include <QtDesigner/QDesignerContainerExtension>
+#include <QtDesigner/QDesignerPropertySheetExtension>
+
+#include "qtmaterialtabwidgetplugin.h"
+#include "qtmaterialtabwidget.h"
+#include "qtmaterialtabwidgetextensionfactory.h"
+
+QtMaterialTabWidgetPlugin::QtMaterialTabWidgetPlugin(QObject *parent)
+    : QObject(parent)
+{
+}
+
+QString QtMaterialTabWidgetPlugin::name() const
+{
+    return QLatin1String("QtMaterialTabWidget");
+}
+
+QString QtMaterialTabWidgetPlugin::group() const
+{
+    return QLatin1String("Qt Material Widgets");
+}
+
+QString QtMaterialTabWidgetPlugin::toolTip() const
+{
+    return QString();
+}
+
+QString QtMaterialTabWidgetPlugin::whatsThis() const
+{
+    return QString();
+}
+
+QString QtMaterialTabWidgetPlugin::includeFile() const
+{
+    return QLatin1String("qtmaterialtabwidget.h");
+}
+
+QIcon QtMaterialTabWidgetPlugin::icon() const
+{
+    return QIcon();
+}
+
+//! [0] //! [1]
+bool QtMaterialTabWidgetPlugin::isContainer() const
+{
+    return true;
+}
+
+//! [1] //! [2]
+QWidget *QtMaterialTabWidgetPlugin::createWidget(QWidget *parent)
+{
+    QtMaterialTabWidget *widget = new QtMaterialTabWidget(parent);
+    connect(widget, &QtMaterialTabWidget::currentIndexChanged,
+            this, &QtMaterialTabWidgetPlugin::currentIndexChanged);
+    connect(widget, &QtMaterialTabWidget::pageTitleChanged,
+            this, &QtMaterialTabWidgetPlugin::pageTitleChanged);
+    return widget;
+}
+
+//! [2] //! [3]
+bool QtMaterialTabWidgetPlugin::isInitialized() const
+{
+    return initialized;
+}
+//! [3]
+
+//! [4]
+void QtMaterialTabWidgetPlugin::initialize(QDesignerFormEditorInterface *formEditor)
+{
+    if (initialized)
+        return;
+//! [4]
+
+//! [5]
+    QExtensionManager *manager = formEditor->extensionManager();
+//! [5] //! [6]
+    QExtensionFactory *factory = new QtMaterialTabWidgetExtensionFactory(manager);
+
+    Q_ASSERT(manager != 0);
+    manager->registerExtensions(factory, Q_TYPEID(QDesignerContainerExtension));
+
+    initialized = true;
+}
+//! [6]
+
+//! [7]
+QString QtMaterialTabWidgetPlugin::domXml() const
+{
+    return QLatin1String("\
+<ui language=\"c++\">\
+    <widget class=\"QtMaterialTabWidget\" name=\"tabwidget\">\
+        <widget class=\"QWidget\" name=\"page\" />\
+    </widget>\
+    <customwidgets>\
+        <customwidget>\
+            <class>QtMaterialTabWidget</class>\
+            <extends>QWidget</extends>\
+            <addpagemethod>addPage</addpagemethod>\
+        </customwidget>\
+    </customwidgets>\
+</ui>");
+}
+//! [7]
+
+//! [8]
+void QtMaterialTabWidgetPlugin::currentIndexChanged(int index)
+{
+    Q_UNUSED(index);
+    QtMaterialTabWidget *widget = qobject_cast<QtMaterialTabWidget*>(sender());
+//! [8] //! [9]
+    if (widget) {
+        QDesignerFormWindowInterface *form = QDesignerFormWindowInterface::findFormWindow(widget);
+        if (form)
+            form->emitSelectionChanged();
+    }
+}
+//! [9]
+
+//! [10]
+void QtMaterialTabWidgetPlugin::pageTitleChanged(const QString &title)
+{
+    Q_UNUSED(title);
+    QtMaterialTabWidget *widget = qobject_cast<QtMaterialTabWidget*>(sender());
+//! [10] //! [11]
+    if (widget) {
+        QWidget *page = widget->widget(widget->currentIndex());
+        QDesignerFormWindowInterface *form;
+        form = QDesignerFormWindowInterface::findFormWindow(widget);
+//! [11]
+        if (form) {
+//! [12]
+            QDesignerFormEditorInterface *editor = form->core();
+            QExtensionManager *manager = editor->extensionManager();
+//! [12] //! [13]
+            QDesignerPropertySheetExtension *sheet;
+            sheet = qt_extension<QDesignerPropertySheetExtension*>(manager, page);
+            const int propertyIndex = sheet->indexOf(QLatin1String("windowTitle"));
+            sheet->setChanged(propertyIndex, true);
+        }
+    }
+}

components/plugin/qtmaterialtabwidgetplugin.h

@@ -0,0 +1,33 @@
+#ifndef QTMATERIALTABWIDGETPLUGIN_H
+#define QTMATERIALTABWIDGETPLUGIN_H
+
+#include <QObject>
+#include <QtUiPlugin/QDesignerCustomWidgetInterface>
+
+class QtMaterialTabWidgetPlugin: public QObject, public QDesignerCustomWidgetInterface
+{
+    Q_OBJECT
+public:
+    explicit QtMaterialTabWidgetPlugin(QObject *parent = nullptr);
+
+    QString name() const override;
+    QString group() const override;
+    QString toolTip() const override;
+    QString whatsThis() const override;
+    QString includeFile() const override;
+    QIcon icon() const override;
+    bool isContainer() const override;
+    QWidget *createWidget(QWidget *parent) override;
+    bool isInitialized() const override;
+    void initialize(QDesignerFormEditorInterface *formEditor) override;
+    QString domXml() const override;
+
+private slots:
+    void currentIndexChanged(int index);
+    void pageTitleChanged(const QString &title);
+
+private:
+    bool initialized = false;
+};
+
+#endif // QTMATERIALTABWIDGETPLUGIN_H

components/qtmaterialslider.cpp

@@ -29,7 +29,7 @@ void QtMaterialSliderPrivate::init()
     stateMachine   = new QtMaterialSliderStateMachine(q, thumb, track);
     stepTo         = 0;
     oldValue       = q->value();
-    trackWidth     = 2;
+    trackWidth     = 4;
     hoverTrack     = false;
     hoverThumb     = false;
     hover          = false;

components/qtmaterialslider.h

@@ -5,7 +5,7 @@
 #include <QScopedPointer>
 #include <QtUiPlugin/QDesignerExportWidget>
 
-#define QT_MATERIAL_SLIDER_MARGIN 30
+#define QT_MATERIAL_SLIDER_MARGIN 10
 
 class QtMaterialSliderPrivate;
 

components/qtmaterialslider_internal.cpp

@@ -45,9 +45,9 @@ QtMaterialSliderStateMachine::QtMaterialSliderStateMachine(
     m_pulseOutState->assignProperty(thumb, "haloSize", 35);
     m_pulseInState->assignProperty(thumb, "haloSize", 28);
 
-    m_inactiveState->assignProperty(thumb, "diameter", 11);
-    m_focusState->assignProperty(thumb, "diameter", 11);
-    m_slidingState->assignProperty(thumb, "diameter", 17);
+    m_inactiveState->assignProperty(thumb, "diameter", 15);
+    m_focusState->assignProperty(thumb, "diameter", 15);
+    m_slidingState->assignProperty(thumb, "diameter", 20);
 
     QAbstractTransition *transition;
     QtMaterialStateTransition *customTransition;

components/qtmaterialtabs.cpp

@@ -180,6 +180,42 @@ void QtMaterialTabs::setCurrentTab(int index)
     emit currentChanged(index);
 }
 
+void QtMaterialTabs::setTabText(int index, const QString &text)
+{
+    Q_D(QtMaterialTabs);
+
+    if (index > -1) {
+        QtMaterialTab *tab = static_cast<QtMaterialTab *>(d->tabLayout->itemAt(index)->widget());
+        if (tab) {
+            tab->setText(text);
+        }
+    }
+}
+
+void QtMaterialTabs::insertTab(int index, const QString &text, const QIcon &icon)
+{
+    Q_D(QtMaterialTabs);
+
+    QtMaterialTab *tab = new QtMaterialTab(this);
+    tab->setText(text);
+    tab->setHaloVisible(isHaloVisible());
+    tab->setRippleStyle(rippleStyle());
+
+    if (!icon.isNull()) {
+        tab->setIcon(icon);
+        tab->setIconSize(QSize(22, 22));
+    }
+
+    d->tabLayout->insertWidget(index, tab);
+
+    if (-1 == d->tab) {
+        d->tab = 0;
+        d->inkBar->refreshGeometry();
+        d->inkBar->raise();
+        tab->setActive(true);
+    };
+}
+
 void QtMaterialTabs::addTab(const QString &text, const QIcon &icon)
 {
     Q_D(QtMaterialTabs);
@@ -204,6 +240,27 @@ void QtMaterialTabs::addTab(const QString &text, const QIcon &icon)
     }
 }
 
+void QtMaterialTabs::removeTab(int index)
+{
+    Q_D(QtMaterialTabs);
+
+    if (index > -1) {
+        QtMaterialTab *tab = static_cast<QtMaterialTab *>(d->tabLayout->itemAt(index)->widget());
+        if (tab) {
+            d->tabLayout->removeWidget(tab);
+            delete tab;
+        }
+
+        setCurrentTab(index - 1);
+    }
+}
+
+int QtMaterialTabs::count() const
+{
+    Q_D(const QtMaterialTabs);
+    return d->tabLayout->count();
+}
+
 int QtMaterialTabs::currentIndex() const
 {
     Q_D(const QtMaterialTabs);

components/qtmaterialtabs.h

@@ -35,14 +35,18 @@ public:
     void setTextColor(const QColor &color);
     QColor textColor() const;
 
+    void insertTab(int index, const QString &text, const QIcon &icon = QIcon());
     void addTab(const QString &text, const QIcon &icon = QIcon());
+    void removeTab(int index);
+    int count() const;
 
     void setCurrentTab(QtMaterialTab *tab);
     void setCurrentTab(int index);
+    void setTabText(int index, const QString &text);
 
     int currentIndex() const;
 
-signals:
+Q_SIGNALS:
     void currentChanged(int);
 
 protected:

components/qtmaterialtabs_internal.cpp

@@ -45,11 +45,11 @@ void QtMaterialTabsInkBar::refreshGeometry()
         const qreal s = 1-m_tween;
 
         if (QAbstractAnimation::Running != m_animation->state()) {
-            m_geometry = QRect(r.left(), r.bottom()-1, r.width(), 2);
+            m_geometry = QRect(r.left(), r.bottom()-1, r.width(), 4);
         } else {
             const qreal left = m_previousGeometry.left()*s + r.left()*m_tween;
             const qreal width = m_previousGeometry.width()*s + r.width()*m_tween;
-            m_geometry = QRect(left, r.bottom()-1, width, 2);
+            m_geometry = QRect(left, r.bottom()-1, width, 4);
         }
         m_tabs->update();
     }

components/qtmaterialtabwidget.cpp

@@ -0,0 +1,98 @@
+#include "qtmaterialtabwidget.h"
+#include <QStackedWidget>
+#include <QVBoxLayout>
+#include <qtmaterialtabs.h>
+
+QtMaterialTabWidget::QtMaterialTabWidget(QWidget *parent)
+    : QWidget(parent)
+    , tabBar(new QtMaterialTabs)
+    , stackWidget(new QStackedWidget)
+{
+    tabBar->setObjectName(QStringLiteral("__qt__passive_tabBar"));
+
+    connect(tabBar, QOverload<int>::of(&QtMaterialTabs::currentChanged),
+            this, &QtMaterialTabWidget::setCurrentIndex);
+
+    QVBoxLayout *layout = new QVBoxLayout(this);
+    layout->addWidget(tabBar);
+    layout->addWidget(stackWidget);
+}
+
+QSize QtMaterialTabWidget::sizeHint() const
+{
+    return QSize(300, 200);
+}
+
+void QtMaterialTabWidget::addPage(QWidget *page)
+{
+    insertPage(count(), page);
+}
+
+void QtMaterialTabWidget::removePage(int index)
+{
+    QWidget *widget = stackWidget->widget(index);
+    stackWidget->removeWidget(widget);
+
+    tabBar->removeTab(index);
+}
+
+int QtMaterialTabWidget::count() const
+{
+    return stackWidget->count();
+}
+
+int QtMaterialTabWidget::currentIndex() const
+{
+    return stackWidget->currentIndex();
+}
+
+void QtMaterialTabWidget::insertPage(int index, QWidget *page)
+{
+    page->setParent(stackWidget);
+
+    stackWidget->insertWidget(index, page);
+
+    QString title = page->windowTitle();
+    if (title.isEmpty()) {
+        title = tr("Tab %1").arg(tabBar->count() + 1);
+        page->setWindowTitle(title);
+    }
+    connect(page, &QWidget::windowTitleChanged,
+            this, &QtMaterialTabWidget::pageWindowTitleChanged);
+    tabBar->insertTab(index, title);
+}
+
+void QtMaterialTabWidget::setCurrentIndex(int index)
+{
+    if (index != currentIndex()) {
+        stackWidget->setCurrentIndex(index);
+        tabBar->setCurrentTab(index);
+        emit currentIndexChanged(index);
+    }
+}
+
+void QtMaterialTabWidget::pageWindowTitleChanged()
+{
+    QWidget *page = qobject_cast<QWidget *>(sender());
+    const int index = stackWidget->indexOf(page);
+    tabBar->setTabText(index, page->windowTitle());
+}
+
+QWidget* QtMaterialTabWidget::widget(int index)
+{
+    return stackWidget->widget(index);
+}
+
+QString QtMaterialTabWidget::pageTitle() const
+{
+    if (const QWidget *currentWidget = stackWidget->currentWidget())
+        return currentWidget->windowTitle();
+    return QString();
+}
+
+void QtMaterialTabWidget::setPageTitle(QString const &newTitle)
+{
+    if (QWidget *currentWidget = stackWidget->currentWidget())
+        currentWidget->setWindowTitle(newTitle);
+    emit pageTitleChanged(newTitle);
+}

components/qtmaterialtabwidget.h

@@ -0,0 +1,48 @@
+#ifndef QTMATERIALTABWIDGET_H
+#define QTMATERIALTABWIDGET_H
+
+#include <QWidget>
+#include <QtUiPlugin/QDesignerExportWidget>
+
+QT_BEGIN_NAMESPACE
+class QStackedWidget;
+QT_END_NAMESPACE
+class QtMaterialTabs;
+
+class QDESIGNER_WIDGET_EXPORT QtMaterialTabWidget : public QWidget
+{
+    Q_OBJECT
+    Q_PROPERTY(int currentIndex READ currentIndex WRITE setCurrentIndex)
+    Q_PROPERTY(QString pageTitle READ pageTitle WRITE setPageTitle STORED false)
+
+public:
+    explicit QtMaterialTabWidget(QWidget *parent = nullptr);
+
+    QSize sizeHint() const override;
+
+
+    int count() const;
+    int currentIndex() const;
+    QWidget *widget(int index);
+    QString pageTitle() const;
+
+public slots:
+    void addPage(QWidget *page);
+    void insertPage(int index, QWidget *page);
+    void removePage(int index);
+    void setPageTitle(QString const &newTitle);
+    void setCurrentIndex(int index);
+
+private slots:
+    void pageWindowTitleChanged();
+
+signals:
+    void currentIndexChanged(int index);
+    void pageTitleChanged(const QString &title);
+
+private:
+    QtMaterialTabs *tabBar;
+    QStackedWidget *stackWidget;
+};
+
+#endif // QTMATERIALTABWIDGET_H

examples/examples.pro

@@ -67,11 +67,11 @@ FORMS += \
     radiobuttonsettingsform.ui \
     togglesettingsform.ui \
     textfieldsettingsform.ui \ 
-    tabssettingsform.ui \
     dialogsettingsform.ui \
     drawersettingsform.ui \
     scrollbarsettingsform.ui \
-    appbarsettingsform.ui
+    appbarsettingsform.ui \
+    tabssettingsform.ui
 
 RESOURCES += \
     ../components/material_res.qrc \

examples/plugindemoform.cpp

@@ -32,6 +32,8 @@ PluginDemoForm::PluginDemoForm(QWidget *parent) :
     dialogLayout->addWidget(dialogWidget);
 
     connect(closeButton, SIGNAL(pressed()), m_dialog, SLOT(hideDialog()));
+
+
 }
 
 PluginDemoForm::~PluginDemoForm()
@@ -43,3 +45,7 @@ void PluginDemoForm::on_qtmaterialflatbutton_3_clicked()
 {
     m_dialog->showDialog();
 }
+
+void PluginDemoForm::tabIndexChanged(int index)
+{
+}

examples/plugindemoform.h

@@ -19,6 +19,7 @@ public:
 
 private slots:
     void on_qtmaterialflatbutton_3_clicked();
+    void tabIndexChanged(int index);
 
 private:
     Ui::PluginDemoForm *ui;

examples/plugindemoform.ui

@@ -7,81 +7,44 @@
     <x>0</x>
     <y>0</y>
     <width>907</width>
-    <height>849</height>
+    <height>908</height>
    </rect>
   </property>
   <property name="windowTitle">
    <string>Form</string>
   </property>
   <layout class="QGridLayout" name="gridLayout">
-   <item row="2" column="0">
-    <widget class="QLabel" name="label_3">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
-     </property>
-     <property name="font">
-      <font>
-       <family>Roboto</family>
-      </font>
-     </property>
-     <property name="text">
-      <string>CheckBox</string>
-     </property>
-    </widget>
+   <item row="15" column="1">
+    <widget class="QtMaterialToggle" name="qtmaterialtoggle"/>
    </item>
-   <item row="2" column="1" colspan="3">
-    <widget class="QtMaterialCheckBox" name="qtmaterialcheckbox">
+   <item row="7" column="1" colspan="4">
+    <widget class="QtMaterialFlatButton" name="qtmaterialflatbutton">
      <property name="maximumSize">
       <size>
-       <width>200</width>
+       <width>150</width>
        <height>16777215</height>
       </size>
      </property>
      <property name="text">
-      <string>CheckBox</string>
+      <string>FlatButton</string>
      </property>
-    </widget>
-   </item>
-   <item row="5" column="0">
-    <widget class="QLabel" name="label_5">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
+     <property name="icon">
+      <iconset resource="../components/material_res.qrc">
+       <normaloff>:/icons/icons/maps/svg/production/ic_local_see_24px.svg</normaloff>:/icons/icons/maps/svg/production/ic_local_see_24px.svg</iconset>
      </property>
-     <property name="font">
-      <font>
-       <family>Roboto</family>
-      </font>
-     </property>
-     <property name="text">
-      <string>FloatActionButton</string>
-     </property>
-    </widget>
-   </item>
-   <item row="0" column="1" colspan="3">
-    <widget class="QtMaterialAutoComplete" name="qtmaterialautocomplete">
-     <property name="maximumSize">
+     <property name="iconSize">
       <size>
-       <width>200</width>
-       <height>16777215</height>
+       <width>20</width>
+       <height>20</height>
       </size>
      </property>
-     <property name="dataSource">
-      <stringlist>
-       <string>HELLO</string>
-       <string>WORLD</string>
-       <string>MATERIAL</string>
-      </stringlist>
+     <property name="overlayStyle">
+      <enum>MaterialConst::TintedOverlay</enum>
      </property>
     </widget>
    </item>
-   <item row="7" column="0">
-    <widget class="QLabel" name="label_7">
+   <item row="12" column="0">
+    <widget class="QLabel" name="label_10">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
        <horstretch>0</horstretch>
@@ -94,11 +57,11 @@
       </font>
      </property>
      <property name="text">
-      <string>IconButton</string>
+      <string>RaiseButton</string>
      </property>
     </widget>
    </item>
-   <item row="5" column="1">
+   <item row="6" column="1">
     <widget class="QtMaterialFloatingActionButton" name="qtmaterialfloatingactionbutton">
      <property name="icon">
       <iconset resource="../components/material_res.qrc">
@@ -109,71 +72,32 @@
      </property>
     </widget>
    </item>
-   <item row="9" column="1" colspan="3">
-    <widget class="QtMaterialRadioButton" name="qtmaterialradiobutton">
+   <item row="4" column="0">
+    <widget class="QLabel" name="label_4">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="font">
+      <font>
+       <family>Roboto</family>
+      </font>
+     </property>
+     <property name="text">
+      <string>CirculaProgress</string>
+     </property>
+    </widget>
+   </item>
+   <item row="9" column="1" colspan="4">
+    <widget class="QtMaterialProgress" name="qtmaterialprogress">
      <property name="maximumSize">
       <size>
        <width>200</width>
        <height>16777215</height>
       </size>
      </property>
-     <property name="text">
-      <string>RadioButton 1</string>
-     </property>
-    </widget>
-   </item>
-   <item row="12" column="0">
-    <widget class="QLabel" name="label_11">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
-     </property>
-     <property name="font">
-      <font>
-       <family>Roboto</family>
-      </font>
-     </property>
-     <property name="text">
-      <string>Slider</string>
-     </property>
-    </widget>
-   </item>
-   <item row="8" column="0">
-    <widget class="QLabel" name="label_8">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
-     </property>
-     <property name="font">
-      <font>
-       <family>Roboto</family>
-      </font>
-     </property>
-     <property name="text">
-      <string>Progress</string>
-     </property>
-    </widget>
-   </item>
-   <item row="1" column="0">
-    <widget class="QLabel" name="label_2">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
-     </property>
-     <property name="font">
-      <font>
-       <family>Roboto</family>
-      </font>
-     </property>
-     <property name="text">
-      <string>Avatar &amp; Badge</string>
-     </property>
     </widget>
    </item>
    <item row="1" column="2">
@@ -218,57 +142,34 @@
      </widget>
     </widget>
    </item>
-   <item row="8" column="1" colspan="3">
-    <widget class="QtMaterialProgress" name="qtmaterialprogress">
+   <item row="2" column="1" colspan="4">
+    <widget class="QtMaterialCheckBox" name="qtmaterialcheckbox">
      <property name="maximumSize">
       <size>
        <width>200</width>
        <height>16777215</height>
       </size>
      </property>
-    </widget>
-   </item>
-   <item row="13" column="1" colspan="3">
-    <widget class="QtMaterialTextField" name="qtmaterialtextfield">
-     <property name="maximumSize">
-      <size>
-       <width>200</width>
-       <height>16777215</height>
-      </size>
-     </property>
-     <property name="label">
-      <string>Input Text</string>
-     </property>
-    </widget>
-   </item>
-   <item row="6" column="1" colspan="3">
-    <widget class="QtMaterialFlatButton" name="qtmaterialflatbutton">
-     <property name="maximumSize">
-      <size>
-       <width>150</width>
-       <height>16777215</height>
-      </size>
-     </property>
      <property name="text">
-      <string>FlatButton</string>
-     </property>
-     <property name="icon">
-      <iconset resource="../components/material_res.qrc">
-       <normaloff>:/icons/icons/maps/svg/production/ic_local_see_24px.svg</normaloff>:/icons/icons/maps/svg/production/ic_local_see_24px.svg</iconset>
-     </property>
-     <property name="iconSize">
-      <size>
-       <width>20</width>
-       <height>20</height>
-      </size>
-     </property>
-     <property name="overlayStyle">
-      <enum>MaterialConst::TintedOverlay</enum>
+      <string>CheckBox</string>
      </property>
     </widget>
    </item>
-   <item row="11" column="0">
-    <widget class="QLabel" name="label_10">
+   <item row="4" column="1">
+    <widget class="QtMaterialCircularProgress" name="qtmaterialcircularprogress">
+     <property name="maximumSize">
+      <size>
+       <width>60</width>
+       <height>60</height>
+      </size>
+     </property>
+     <property name="size">
+      <double>40.000000000000000</double>
+     </property>
+    </widget>
+   </item>
+   <item row="6" column="0">
+    <widget class="QLabel" name="label_5">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
        <horstretch>0</horstretch>
@@ -281,11 +182,61 @@
       </font>
      </property>
      <property name="text">
-      <string>RaiseButton</string>
+      <string>FloatActionButton</string>
      </property>
     </widget>
    </item>
-   <item row="6" column="0">
+   <item row="0" column="0">
+    <widget class="QLabel" name="label">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="font">
+      <font>
+       <family>Roboto</family>
+      </font>
+     </property>
+     <property name="text">
+      <string>AutoComplete</string>
+     </property>
+    </widget>
+   </item>
+   <item row="8" column="1">
+    <widget class="QtMaterialIconButton" name="qtmaterialiconbutton">
+     <property name="icon">
+      <iconset resource="../components/material_res.qrc">
+       <normaloff>:/icons/icons/content/svg/production/ic_mail_24px.svg</normaloff>:/icons/icons/content/svg/production/ic_mail_24px.svg</iconset>
+     </property>
+     <property name="iconSize">
+      <size>
+       <width>40</width>
+       <height>40</height>
+      </size>
+     </property>
+    </widget>
+   </item>
+   <item row="5" column="0">
+    <widget class="QLabel" name="label_14">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="font">
+      <font>
+       <family>Roboto</family>
+      </font>
+     </property>
+     <property name="text">
+      <string>Dialog</string>
+     </property>
+    </widget>
+   </item>
+   <item row="7" column="0">
     <widget class="QLabel" name="label_6">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
@@ -303,10 +254,42 @@
      </property>
     </widget>
    </item>
-   <item row="14" column="1">
-    <widget class="QtMaterialToggle" name="qtmaterialtoggle"/>
+   <item row="0" column="1" colspan="4">
+    <widget class="QtMaterialAutoComplete" name="qtmaterialautocomplete">
+     <property name="maximumSize">
+      <size>
+       <width>200</width>
+       <height>16777215</height>
+      </size>
+     </property>
+     <property name="dataSource">
+      <stringlist>
+       <string>HELLO</string>
+       <string>WORLD</string>
+       <string>MATERIAL</string>
+      </stringlist>
+     </property>
+    </widget>
    </item>
-   <item row="13" column="0">
+   <item row="10" column="0">
+    <widget class="QLabel" name="label_9">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="font">
+      <font>
+       <family>Roboto</family>
+      </font>
+     </property>
+     <property name="text">
+      <string>RadioButton</string>
+     </property>
+    </widget>
+   </item>
+   <item row="14" column="0">
     <widget class="QLabel" name="label_12">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
@@ -324,6 +307,31 @@
      </property>
     </widget>
    </item>
+   <item row="2" column="0">
+    <widget class="QLabel" name="label_3">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="font">
+      <font>
+       <family>Roboto</family>
+      </font>
+     </property>
+     <property name="text">
+      <string>CheckBox</string>
+     </property>
+    </widget>
+   </item>
+   <item row="15" column="2">
+    <widget class="QtMaterialToggle" name="qtmaterialtoggle_2">
+     <property name="orientation">
+      <enum>Qt::Vertical</enum>
+     </property>
+    </widget>
+   </item>
    <item row="1" column="1">
     <widget class="QtMaterialAvatar" name="qtmaterialavatar">
      <property name="maximumSize">
@@ -362,40 +370,43 @@
      </widget>
     </widget>
    </item>
-   <item row="12" column="1" colspan="3">
-    <widget class="QtMaterialSlider" name="qtmaterialslider">
-     <property name="maximumSize">
-      <size>
-       <width>200</width>
-       <height>16777215</height>
-      </size>
+   <item row="9" column="0">
+    <widget class="QLabel" name="label_8">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
      </property>
-     <property name="value">
-      <number>50</number>
+     <property name="font">
+      <font>
+       <family>Roboto</family>
+      </font>
+     </property>
+     <property name="text">
+      <string>Progress</string>
      </property>
     </widget>
    </item>
-   <item row="3" column="1">
-    <widget class="QtMaterialCircularProgress" name="qtmaterialcircularprogress">
-     <property name="maximumSize">
-      <size>
-       <width>60</width>
-       <height>60</height>
-      </size>
+   <item row="1" column="0">
+    <widget class="QLabel" name="label_2">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
      </property>
-     <property name="size">
-      <double>40.000000000000000</double>
+     <property name="font">
+      <font>
+       <family>Roboto</family>
+      </font>
+     </property>
+     <property name="text">
+      <string>Avatar &amp; Badge</string>
      </property>
     </widget>
    </item>
-   <item row="14" column="2">
-    <widget class="QtMaterialToggle" name="qtmaterialtoggle_2">
-     <property name="orientation">
-      <enum>Qt::Vertical</enum>
-     </property>
-    </widget>
-   </item>
-   <item row="11" column="1" colspan="3">
+   <item row="12" column="1" colspan="4">
     <widget class="QtMaterialRaisedButton" name="qtmaterialraisedbutton">
      <property name="maximumSize">
       <size>
@@ -411,22 +422,34 @@
      </property>
     </widget>
    </item>
-   <item row="7" column="1">
-    <widget class="QtMaterialIconButton" name="qtmaterialiconbutton">
-     <property name="icon">
-      <iconset resource="../components/material_res.qrc">
-       <normaloff>:/icons/icons/content/svg/production/ic_mail_24px.svg</normaloff>:/icons/icons/content/svg/production/ic_mail_24px.svg</iconset>
-     </property>
-     <property name="iconSize">
+   <item row="11" column="1">
+    <widget class="QtMaterialRadioButton" name="qtmaterialradiobutton_2">
+     <property name="maximumSize">
       <size>
-       <width>40</width>
-       <height>40</height>
+       <width>200</width>
+       <height>16777215</height>
       </size>
      </property>
+     <property name="text">
+      <string>RadioButton 2</string>
+     </property>
     </widget>
    </item>
-   <item row="4" column="0">
-    <widget class="QLabel" name="label_14">
+   <item row="13" column="1" colspan="4">
+    <widget class="QtMaterialSlider" name="qtmaterialslider">
+     <property name="maximumSize">
+      <size>
+       <width>200</width>
+       <height>16777215</height>
+      </size>
+     </property>
+     <property name="value">
+      <number>50</number>
+     </property>
+    </widget>
+   </item>
+   <item row="8" column="0">
+    <widget class="QLabel" name="label_7">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
        <horstretch>0</horstretch>
@@ -439,12 +462,12 @@
       </font>
      </property>
      <property name="text">
-      <string>Dialog</string>
+      <string>IconButton</string>
      </property>
     </widget>
    </item>
-   <item row="3" column="0">
-    <widget class="QLabel" name="label_4">
+   <item row="13" column="0">
+    <widget class="QLabel" name="label_11">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
        <horstretch>0</horstretch>
@@ -457,11 +480,55 @@
       </font>
      </property>
      <property name="text">
-      <string>CirculaProgress</string>
+      <string>Slider</string>
      </property>
     </widget>
    </item>
-   <item row="4" column="1">
+   <item row="15" column="0">
+    <widget class="QLabel" name="label_13">
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="font">
+      <font>
+       <family>Roboto</family>
+      </font>
+     </property>
+     <property name="text">
+      <string>Toggle</string>
+     </property>
+    </widget>
+   </item>
+   <item row="10" column="1" colspan="4">
+    <widget class="QtMaterialRadioButton" name="qtmaterialradiobutton">
+     <property name="maximumSize">
+      <size>
+       <width>200</width>
+       <height>16777215</height>
+      </size>
+     </property>
+     <property name="text">
+      <string>RadioButton 1</string>
+     </property>
+    </widget>
+   </item>
+   <item row="14" column="1" colspan="4">
+    <widget class="QtMaterialTextField" name="qtmaterialtextfield">
+     <property name="maximumSize">
+      <size>
+       <width>200</width>
+       <height>16777215</height>
+      </size>
+     </property>
+     <property name="label">
+      <string>Input Text</string>
+     </property>
+    </widget>
+   </item>
+   <item row="5" column="1">
     <widget class="QtMaterialFlatButton" name="qtmaterialflatbutton_3">
      <property name="maximumSize">
       <size>
@@ -493,71 +560,80 @@
      </property>
     </widget>
    </item>
-   <item row="9" column="0">
-    <widget class="QLabel" name="label_9">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
-     </property>
-     <property name="font">
-      <font>
-       <family>Roboto</family>
-      </font>
-     </property>
-     <property name="text">
-      <string>RadioButton</string>
-     </property>
-    </widget>
-   </item>
-   <item row="14" column="0">
-    <widget class="QLabel" name="label_13">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
-     </property>
-     <property name="font">
-      <font>
-       <family>Roboto</family>
-      </font>
-     </property>
-     <property name="text">
-      <string>Toggle</string>
-     </property>
-    </widget>
-   </item>
-   <item row="0" column="0">
-    <widget class="QLabel" name="label">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
-     </property>
-     <property name="font">
-      <font>
-       <family>Roboto</family>
-      </font>
-     </property>
-     <property name="text">
-      <string>AutoComplete</string>
-     </property>
-    </widget>
-   </item>
-   <item row="10" column="1">
-    <widget class="QtMaterialRadioButton" name="qtmaterialradiobutton_2">
-     <property name="maximumSize">
-      <size>
-       <width>200</width>
-       <height>16777215</height>
-      </size>
-     </property>
-     <property name="text">
-      <string>RadioButton 2</string>
-     </property>
+   <item row="1" column="3">
+    <widget class="QtMaterialTabWidget" name="tabwidget">
+     <widget class="QWidget" name="page">
+      <widget class="QtMaterialCircularProgress" name="qtmaterialcircularprogress_2">
+       <property name="geometry">
+        <rect>
+         <x>130</x>
+         <y>0</y>
+         <width>78</width>
+         <height>78</height>
+        </rect>
+       </property>
+      </widget>
+      <widget class="QLabel" name="label_15">
+       <property name="geometry">
+        <rect>
+         <x>30</x>
+         <y>10</y>
+         <width>86</width>
+         <height>61</height>
+        </rect>
+       </property>
+       <property name="sizePolicy">
+        <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
+         <horstretch>0</horstretch>
+         <verstretch>0</verstretch>
+        </sizepolicy>
+       </property>
+       <property name="font">
+        <font>
+         <family>Roboto</family>
+        </font>
+       </property>
+       <property name="text">
+        <string>Tab 1 content</string>
+       </property>
+      </widget>
+     </widget>
+     <widget class="QWidget" name="page_2">
+      <widget class="QLabel" name="label_16">
+       <property name="geometry">
+        <rect>
+         <x>40</x>
+         <y>20</y>
+         <width>86</width>
+         <height>41</height>
+        </rect>
+       </property>
+       <property name="sizePolicy">
+        <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
+         <horstretch>0</horstretch>
+         <verstretch>0</verstretch>
+        </sizepolicy>
+       </property>
+       <property name="font">
+        <font>
+         <family>Roboto</family>
+        </font>
+       </property>
+       <property name="text">
+        <string>Tab 2 content</string>
+       </property>
+      </widget>
+      <widget class="QtMaterialProgress" name="qtmaterialprogress_2">
+       <property name="geometry">
+        <rect>
+         <x>210</x>
+         <y>30</y>
+         <width>112</width>
+         <height>24</height>
+        </rect>
+       </property>
+      </widget>
+     </widget>
     </widget>
    </item>
   </layout>
@@ -647,9 +723,17 @@
    <header>qtmaterialtoggle.h</header>
    <container>1</container>
   </customwidget>
+  <customwidget>
+   <class>QtMaterialTabWidget</class>
+   <extends>QWidget</extends>
+   <header>qtmaterialtabwidget.h</header>
+   <addpagemethod>addPage</addpagemethod>
+   <container>1</container>
+  </customwidget>
  </customwidgets>
  <resources>
   <include location="../components/material_res.qrc"/>
+  <include location="../components/material_res.qrc"/>
  </resources>
  <connections/>
 </ui>