{"id":14982636,"url":"https://github.com/mentalfl0w/ribbonui","last_synced_at":"2025-04-06T00:06:56.001Z","repository":{"id":189354824,"uuid":"679567421","full_name":"mentalfl0w/RibbonUI","owner":"mentalfl0w","description":"🌈 A UI library of components written in QML and designed with reference to the Microsoft Ribbon style.","archived":false,"fork":false,"pushed_at":"2025-02-15T07:41:34.000Z","size":15290,"stargazers_count":108,"open_issues_count":5,"forks_count":17,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T00:06:47.688Z","etag":null,"topics":["linux","macos","qml","qt","qt5","qt6","qtquick","ribbon","ribbonui","ui","windows"],"latest_commit_sha":null,"homepage":"","language":"QML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mentalfl0w.png","metadata":{"files":{"readme":"README(zh-cn).md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-17T06:14:44.000Z","updated_at":"2025-04-02T10:48:03.000Z","dependencies_parsed_at":"2024-01-03T16:40:20.003Z","dependency_job_id":"6545f1e4-a65f-4d8a-acad-dd723f28fcc7","html_url":"https://github.com/mentalfl0w/RibbonUI","commit_stats":{"total_commits":176,"total_committers":4,"mean_commits":44.0,"dds":"0.017045454545454586","last_synced_commit":"34d3a3b2db97d320a4aaf55a6fae761b335cfab6"},"previous_names":["mentalfl0w/ribbonui"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mentalfl0w%2FRibbonUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mentalfl0w%2FRibbonUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mentalfl0w%2FRibbonUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mentalfl0w%2FRibbonUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mentalfl0w","download_url":"https://codeload.github.com/mentalfl0w/RibbonUI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247415967,"owners_count":20935388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["linux","macos","qml","qt","qt5","qt6","qtquick","ribbon","ribbonui","ui","windows"],"created_at":"2024-09-24T14:05:47.264Z","updated_at":"2025-04-06T00:06:55.982Z","avatar_url":"https://github.com/mentalfl0w.png","language":"QML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RibbonUI\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"lib_source/resources/imgs/icon.png\" alt=\"Logo\" style=\"width:40%; height:auto;\"\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eQt RibbonUI \u003c/h1\u003e\n\n- [RibbonUI](#ribbonui)\n  - [1. 介绍](#1-介绍)\n  - [2. 组件列表](#2-组件列表)\n  - [3. 支持平台](#3-支持平台)\n  - [4. 如何使用?](#4-如何使用)\n  - [5. 鸣谢](#5-鸣谢)\n  - [6. 与我联系](#6-与我联系)\n\n## 1. 介绍\nRibbonUI是一个参考微软Ribbon风格（即Office 2016后的风格）设计的轻量级、简约且优雅的Qt组件库，用QML写就。\n\n***[Click to view English README](README.md)***\n\n***[点击这里观看示例程序演示视频(哔哩哔哩)](https://www.bilibili.com/video/BV1ES411P78Q/)***\n\n***[点击阅读API参考文档](documents/menu(zh-cn).md)***\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"documents/pictures/demo/demo.gif\" alt=\"Demo\" style=\"width:100%; height:auto;\"\u003e\n\u003c/div\u003e\n\u003cp align=\"center\"\u003eQt RibbonUI Demo\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003cdiv align=\"center\"\u003e\n        \u003cimg src=\"documents/pictures/demo/home-light-classic.png\" alt=\"Home Light Classic\" style=\"width:45%; height:auto;\"\u003e\n        \u003cimg src=\"documents/pictures/demo/home-dark-classic.png\" alt=\"Home Light Classic\" style=\"width:45%; height:auto;\"\u003e\n    \u003c/div\u003e\n    \u003cp align=\"center\"\u003e主界面浅色/深色主题 (经典风格) \u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003cdiv align=\"center\"\u003e\n        \u003cimg src=\"documents/pictures/demo/home-light-modern.png\" alt=\"Home Light Modern\" style=\"width:45%; height:auto;\"\u003e\n        \u003cimg src=\"documents/pictures/demo/home-dark-modern.png\" alt=\"Home Light Modern\" style=\"width:45%; height:auto;\"\u003e\n    \u003c/div\u003e\n    \u003cp align=\"center\"\u003e主界面浅色/深色主题 (现代风格) \u003c/p\u003e\n\u003c/div\u003e\n\n## 2. 组件列表\n目前支持***43***种组件，后续会添加更多。\n| 名称 | 介绍 | 展示图片|\n|:----:|:----:|:----:|\n| RibbonWindow | 基于framelesshelper实现的无边框窗口，支持退出确认弹窗及模糊/亚克力化背景。|![RibbonWindow](documents/pictures/demo/home-light-modern.png)|\n| RibbonTabBar | 支持多分组页面切换、自定义右上角工具栏、自由收放的工具栏，如同Word的。| ![RibbonTabBar](documents/pictures/demo/RibbonTabBar.png) |\n| RibbonTitleBar | 支持自定义背景色、自由添加工具按钮的窗口标题栏，针对Windows和macOS有不同的窗口按钮设计。| ![RibbonTitleBar](documents/pictures/demo/RibbonTitleBar.png) |\n| RibbonBottomBar | 支持添加自定义工具的底栏。 |![RibbonBottomBar](documents/pictures/demo/RibbonBottomBar.png) |\n| RibbonBlur | 为各种组件提供模糊化效果 | ![RibbonBlur](documents/pictures/demo/RibbonBlur.png) |\n| RibbonButton | 支持有/无背景的纯文字/纯图标/图标加文字的按钮，支持鼠标覆盖显示提示信息 | ![RibbonButton](documents/pictures/demo/RibbonButton.png) |\n| RibbonPushButton | 支持弹出菜单的大图标按钮，可以使用内置图标库或用户自选图片 | ![RibbonPushButton](documents/pictures/demo/RibbonPushButton.png) |\n| RibbonSlider | 支持水平或垂直放置的滑动控制条 | ![RibbonSlider](documents/pictures/demo/RibbonSlider.png) |\n| RibbonIcon | 图标组件，内置图标数百个来自微软的精美图标 | ![RibbonIcon](documents/pictures/demo/RibbonIcon.png) |\n| RibbonText | 文字组件，可以允许/禁止选中文字或复制 | ![RibbonText](documents/pictures/demo/RibbonText.png) |\n| RibbonCheckBox | 选择框组件，可自定义是否显示文字、文字显示位置（左/右） | ![RibbonCheckBox](documents/pictures/demo/RibbonCheckBox.png) |\n| RibbonSwitchButton | 开关按钮，支持自定义背景颜色、是否显示提示文字或按钮文字，可自由调整文字显示位置（左/右） | ![RibbonSwitchButton](documents/pictures/demo/RibbonSwitchButton.png) |\n| RibbonTheme | 主题支持浅色、深色、跟随系统三种模式 | ![RibbonTheme](documents/pictures/demo/RibbonTheme.png) |\n| RibbonMenu | 菜单组件，支持二元选择及子菜单 | ![RibbonMenu](documents/pictures/demo/RibbonMenu.png) |\n| RibbonPopup | 自动居中的弹出式窗口 | ![RibbonPopup](documents/pictures/demo/RibbonPopup.png) |\n| RibbonPopDialog | 支持二元或三元选择的弹出式窗口 | ![RibbonPopDialog](documents/pictures/demo/RibbonPopDialog.png) |\n| RibbonLineEdit | 支持设置图标和一键清除的单行文本输入控件 | ![RibbonLineEdit](documents/pictures/demo/RibbonLineEdit.png) |\n| RibbonTextEdit | 支持设置图标和一键清除的多行文本输入控件，可随文本输入自动换行/滚动 | ![RibbonTextEdit](documents/pictures/demo/RibbonTextEdit.png) |\n| RibbonTextEdit | 支持设置图标和一键清除的多行文本输入控件，可随文本输入自动换行/滚动 | ![RibbonTextEdit](documents/pictures/demo/RibbonTextEdit.png) |\n| RibbonComboBox | 支持设置图标的下拉菜单选择控件，菜单支持用户输入添加 | ![RibbonComboBox](documents/pictures/demo/RibbonComboBox.png) |\n| RibbonSpinBox | 支持设置图标的旋钮控件 | ![RibbonSpinBox](documents/pictures/demo/RibbonSpinBox.png) |\n| RibbonSpinBox | 支持设置图标的旋钮控件 | ![RibbonSpinBox](documents/pictures/demo/RibbonSpinBox.png) |\n| RibbonView | 与TabBar和BottomBar搭配使用的界面容器组件，两组件模糊化的背景依赖它 | ![RibbonView](documents/pictures/demo/RibbonView.png) |\n| RibbonPaperView | 类似Word中纸张的组件 | ![RibbonPaperView](documents/pictures/demo/RibbonPaperView.png) |\n\n其他组件的介绍会陆续更新。\n\n## 3. 支持平台\n目前是基于Qt 6 设计的，但同样兼容Qt 5(***只支持 Qt 5.15.2***)。\n+ Windows: Windows 7+.(X86/AMD64)\n+ macOS: MacOS X 10.13 - 10.15, macOS 11+.(AMD64, aarch64)\n+ Linux: Ubuntu 18.04+ (X86/AMD64)\n\n## 4. 如何使用?\n+ 安装前准备\n  \n  安装Qt 6，推荐通过官方在线安装器安装**Qt 6.8.2版本**，**通过brew等方式安装可能会出现问题**。**Qt Quick相关模块**和**qt5compat qtshadertools qtimageformats**组件是必要的。\n\n+ 编译例程和库\n  - 下载仓库并进入\n    ```shell\n    git clone https://github.com/mentalfl0w/RibbonUI.git --recursive\n    cd RibbonUI\n    ```\n  - 创建并进入build文件夹\n    ```shell\n    mkdir build\n    cd build\n    ```\n  - 编译\n    ```shell\n    # 如果想进行Debug编译, 请配置 -DCMAKE_BUILD_TYPE=Debug和--config Debug参数\n    # 如果想编译静态库, 请在cmake参数中加入-DRIBBONUI_BUILD_STATIC_LIB=ON\n    cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/RibbonUI/Qt/6.8.2/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..\n    # -DCMAKE_PREFIX_PATH={你的Qt安装目录}\n    cmake --build . --target all --config Release --parallel\n    ```\n  - 运行或部署\n\n    ***在其它系统中，编译过后生成的应用可以直接运行，但在Windows上需要先使用Qt的`bin`目录下的`windeployqt.exe`部署相关必需库后才可以不通过`Qt Creator`而直接在编译目录下双击可执行文件运行。***\n    \n    ```powershell\n    #build文件夹下\n    cd app\\release\n    C:\\Qt\\6.8.2\\mingw_64\\bin\\windeployqt.exe --qmldir C:\\Qt\\6.8.2\\mingw_64\\qml .\\RibbonUI-APP.exe\n    #指定\"--qmldir\"参数是必须的\n    ```\n+ 在其他项目中使用RibbonUI\n  - 遵循***编译例程和库***的下载仓库和进入build目录步骤\n  - 在CMakeLists.txt中加入以下语句\n    ```camke\n    add_subdirectory(RibbonUI) # RibbonUI在你文件系统中的相对路径\n    ```\n  - 编译\n    ```shell\n    # 如果想进行Debug编译, 请配置 -DCMAKE_BUILD_TYPE=Debug和--config Debug参数\n    # 如果想编译静态库, 请在cmake参数中加入-DRIBBONUI_BUILD_STATIC_LIB=ON\n    cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/RibbonUI/Qt/6.8.2/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -DRIBBONUI_BUILD_EXAMPLES=OFF -GNinja ..\n    # -DCMAKE_PREFIX_PATH={你的Qt安装目录}\n    cmake --build . --target all --config Release --parallel\n    ```\n\n## 5. 鸣谢\n+ 感谢[@wangwenx190](https://github.com/wangwenx190)的[framelesshelper](https://github.com/wangwenx190/framelesshelper)让RibbonWindow能实现无边框。\n+ [@Microsoft](https://github.com/microsoft)的[fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons)提供的漂亮图标库.\n+ 感谢[@zhuzichu520](https://github.com/zhuzichu520)的[FluentUI](https://github.com/zhuzichu520/FluentUI) 为我提供的灵感和参考。\n\n## 6. 与我联系\n+ Email: mentalflow@ourdocs.cn\n+ Blog: [菜鸟技术猿的折腾史.](https://blog.ourdocs.cn)\n+ ***欢迎发起PR或Issues，我会在空余时间尽快完善功能或修复bug，希望能一起让RibbonUI变得更好，尽情享受吧🎉！***\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmentalfl0w%2Fribbonui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmentalfl0w%2Fribbonui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmentalfl0w%2Fribbonui/lists"}