Skip to content

🌈 A UI library of components written in QML and designed with reference to the Microsoft Ribbon style.

License

Notifications You must be signed in to change notification settings

mentalfl0w/RibbonUI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

RibbonUI

Logo

Qt RibbonUI

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

Demo

Qt RibbonUI Demo

Home Light Classic Home Light Classic

Home Light/Dark Theme (Classic Style)

Home Light Modern Home Light Modern

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

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

6. Get in touch with me