RibbonUI

Qt RibbonUI

• RibbonUI
  • 1. Introduction
  • 2. Included Components
  • 3. Supported platforms
  • 4. How to use it?
  • 5. Acknowledgement
  • 6. Get in touch with me

1. Introduction

RibbonUI is a lightweight, minimalist and elegant Qt component library written in QML and designed with reference to the Microsoft Ribbon style.

点击查看中文文档

Click here to watch demo video(Bilibili)

Click here to read the API documents

Qt RibbonUI Demo

Home Light/Dark Theme (Classic Style)

Home Light/Dark Theme (Modern Style)

2. Included Components

Currently supports 43 components, more will be added later.

Components	Introduction	Demo Picture
RibbonWindow	A Window component that relies on framelesshelper to support exit confirmation popups and blur style backgrounds.
RibbonTabBar	A toolbar with support for page switching and retracting, and support for placing customized buttons in the upper right corner, just like Microsoft Word's.
RibbonTitleBar	A window title bar that supports custom colors and the free addition of secondary buttons, with different designs for Windows and macOS.
RibbonBottomBar	A bottom bar that supports adding custom tools.
RibbonBlur	Provides blurring effects for various components
RibbonButton	A button that supports plain text/plain icons/icons and text with/without backgrounds, with mouse overlay support for displaying alert messages
RibbonPushButton	A large icon button that supports pop-up menus, either using the built-in icon library or a user-selected image
RibbonSlider	Support for horizontally or vertically placed slider
RibbonIcon	Icon component, built-in hundreds of beautiful icons from Microsoft
RibbonText	Text component that allows/disallows selection of text or copying
RibbonCheckBox	Checkbox component, customizable whether to display text, where to display text (left/right)
RibbonSwitchButton	Switch button, support for customizing the background color, whether to display the prompt text or button text, free to adjust the text display position (left/right)
RibbonTheme	Theme support light color, dark color, follow system three modes
RibbonMenu	Menu component with binary selection and submenu support
RibbonPopup	Auto-centered pop-ups
RibbonPopDialog	Popups supporting binary or ternary selection
RibbonLineEdit	Single-line text input control with support for icons and one-click clearing
RibbonTextEdit	Multi-line text input control with support for icons and one-click clearing, automatic line feed/scrolling as text is entered
RibbonComboBox	Supports drop-down menu selection controls with icons, and menus can be added with user input.
RibbonSpinBox	SpinBox with support for setting icons
RibbonView	View container component for use with TabBar and BottomBar, from which the blurred backgrounds of both components are based.
RibbonPaperView	Components similar to paper in Word

The introduction of other components will be updated later.

3. Supported platforms

The current design is based on Qt 6, and it support for Qt 5 as well(ONLY support Qt 5.15.2).

• Windows: Windows 7+.(X86/AMD64)
• macOS: MacOS X 10.13 - 10.15, macOS 11+.(AMD64, aarch64)
• Linux: Ubuntu 18.04+ (X86/AMD64)

4. How to use it?

• Before Install

  To install Qt 6, it is recommended to install the Qt 6.6.3 version via the official online installer, installing via brew, etc. may cause problems. Qt Quick related modules and the qt5compat qtshadertools qtimageformats component are required

• Compile the example and library

  • Clone and enter the library folder

    git clone https://github.com/mentalfl0w/RibbonUI.git --recursive
    cd RibbonUI

  • Create and enter the build folder

    mkdir build
    cd build

  • Build

    # if you want to make a Debug build, just let -DCMAKE_BUILD_TYPE=Debug, --config Debug
    # if you want a static build, add -DRIBBONUI_BUILD_STATIC_LIB=ON into command
    cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/RibbonUI/Qt/6.6.3/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
    # -DCMAKE_PREFIX_PATH={YOUR QT INSTALL FOLDER}
    cmake --build . --target all --config Release --parallel

  • Run or Deploy

    On the other system, you could directly start the app after the build process, while you have to use windeployqt.exe in Qt's bin directory to deploy the required libs first on Windows if you want to click to run rather than through Qt Creator.

    #in the build folder
    cd app\release
    C:\Qt\6.6.3\mingw_64\bin\windeployqt.exe --qmldir C:\Qt\6.6.3\mingw_64\qml .\RibbonUI-APP.exe
    #"--qmldir" is essential.

• Use library with other project

  • Follow the same steps like clone and enter build folder as Compile the example and library
  • Add the following code to your CMakeLists.txt

    add_subdirectory(RibbonUI) # RibbonUI's path in your project file system
    

  • Build

    # if you want to make a Debug build, just let -DCMAKE_BUILD_TYPE=Debug, --config Debug
    # if you want a static build, add -DRIBBONUI_BUILD_STATIC_LIB=ON into command
    cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/RibbonUI/Qt/6.6.3/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -DRIBBONUI_BUILD_EXAMPLES=OFF -GNinja ..
    # -DCMAKE_PREFIX_PATH={YOUR QT INSTALL FOLDER}
    cmake --build . --target all --config Release --parallel

5. Acknowledgement

• @wangwenx190's framelesshelper for frameless window (aka RibbonWindow's base).
• @Microsoft's fluentui-system-icons for beautifully designed icons.
• @zhuzichu520's FluentUI for inspiration and reference.

6. Get in touch with me

• Email: [email protected]
• Blog: The Tossed History of a Rookie Technician.
• And PRs and Issues are welcome, I'll try to improve features or fix bugs as soon as I can in my spare time, let's make RibbonUI better together, enjoy!