<div align=center>
<img width=64 src="doc/preview/fluent_design.svg">
</div>
<h1 align="center">
QML FluentUI
</h1>
<p align="center">
A fluent design component library for Qt QML。 <a href="https://zhuzichu520.github.io">official wasm app.</a>
</p>
![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
<p align="center">
English | <a href="README_zh_CN.md">简体中文</a>
</p>
<div align=center>
<img src="doc/preview/demo_large.png">
</div>
[win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows "WindowsAction"
[win-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Windows/badge.svg "Windows"
[ubuntu-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AUbuntu "UbuntuAction"
[ubuntu-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Ubuntu/badge.svg "Ubuntu"
[macos-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AMacOS "MacOSAction"
[macos-badge]: https://github.com/zhuzichu520/FluentUI/workflows/MacOS/badge.svg "MacOS"
[release-link]: https://github.com/zhuzichu520/FluentUI/releases "Release status"
[release-badge]: https://img.shields.io/github/release/zhuzichu520/FluentUI.svg?style=flat-square "Release status"
[download-link]: https://github.com/zhuzichu520/FluentUI/releases/latest "Download status"
[download-badge]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/total.svg "Download status"
[download-latest]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/latest/total.svg "latest status"
<p align=center>
This is a beautiful FluentUI component library based on Qt QML. Currently the main branch supports Qt 6. If you want to use it in Qt 5, checkout the Qt 5 branch.
</p>
## Requirements
+ Qt Core, Qt Quick, Qt QML, Qt ShaderTool, Qt 5 Compatibility Module. (**Essential**)
+ Qt LinguistTool (optional,for translations)
+ Qt Svg (optional, however essential for Qt 5)
Use [Qt Online Installers](https://download.qt.io/archive/online_installers/) to acquire the modules (**Recommended**) or compile them first before using the library.
## ⚽ Get started
+ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please pecify your platform and compilers.)
+ run `example` program.
or
+ Clone the repository.
```SHELL
git clone --recursive https://github.com/zhuzichu520/FluentUI.git
```
+ Build
```
git clone --recursive https://github.com/zhuzichu520/FluentUI.git
cd FluentUI
mkdir build
cd build
cmake -DCMAKE_PREFIX_PATH=<YOUR_QT_SDK_DIR_PATH> -DCMAKE_BUILD_TYPE=Release -GNinja <PATH_TO_THE_REPOSITORY>
cmake --build . --config Release --target all --parallel
```
+ Use your IDE (`Qt Creator` or `CLion`) to open the project. (only **CMake** supported).
<div align=center>
<img src="doc/preview/qt_creator_project.png">
</div>
+ Compile the project. Then try to execute the `example` demo program.
+ Great! Now you are ready to write your first QML FluentUI program! Check the documentations for more details.
## 📑 Documentations
(Work in progress...🚀)
## Supported components
|Catalog|Detail|Notes / Demos|
|:----:|:----:|:----:|
|FluApp|The initial entry of the program|Router supported(SPA)|
|FluWindow|Frameless Window|*This only works on windows|
|FluAppBar|Title bar on top of the window|Drag, minimize, maximize and close are supported.|
|FluText|Common text||
|FluButton|Common button|![btn](doc/preview/demo_standardbtn.png) |
|FluFilledButton|Filled button|![filledbtn](doc/preview/demo_filledbtn.png)|
|FluTextButton|Text button|![textbtn](doc/preview/demo_textbtn.png)|
|FluToggleButton|Toggle buttons|![togglebtn](doc/preview/demo_toggle_btn.png)|
|FluIcon|Common icon|![icons](doc/preview/demo_icon.png)|
|FluRadioButton|radio button|![radiobtn](doc/preview/demo_radiobtn.png)|
|FluTextBox|Single-line input box|![textbox](doc/preview/demo_textbox.png)|
|FluMultiLineTextBox|Multi-lines input area|![textarea](doc/preview/demo_multiline_textbox.png)|
|FluToggleSwitch|toggle switch|![toggleswitch](doc/preview/demo_toggle_switch.png)|
View more [`here`](doc/md/all_components.md)!
## Reference
+ [**Windows design**: Design guidelines and toolkits of Microsoft.](https://learn.microsoft.com/en-us/windows/apps/design/)
+ [**Microsoft/WinUI-Gallery**: Microsoft's demo](https://github.com/microsoft/WinUI-Gallery)
## License
This FluentUI library currently licensed under [MIT License](./License)
## Star History
[![Star History Chart](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)
## ⚡ Visitor count
![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
Raw data
{
"_id": null,
"home_page": "https://github.com/zhuzichu520/FluentUI",
"name": "PySide6-FluentUI-QML-Win",
"maintainer": "",
"docs_url": null,
"requires_python": "",
"maintainer_email": "",
"keywords": "pyside fluent qml",
"author": "zhuzichu",
"author_email": "zhuzichu520@outlook.com",
"download_url": "",
"platform": null,
"description": "<div align=center>\r\n <img width=64 src=\"doc/preview/fluent_design.svg\">\r\n</div>\r\n\r\n<h1 align=\"center\">\r\n QML FluentUI \r\n</h1>\r\n<p align=\"center\">\r\n A fluent design component library for Qt QML\u3002 <a href=\"https://zhuzichu520.github.io\">official wasm app.</a>\r\n</p>\r\n\r\n![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]\r\n\r\n<p align=\"center\">\r\nEnglish | <a href=\"README_zh_CN.md\">\u7b80\u4f53\u4e2d\u6587</a>\r\n</p>\r\n<div align=center>\r\n <img src=\"doc/preview/demo_large.png\">\r\n</div>\r\n\r\n\r\n[win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows \"WindowsAction\"\r\n[win-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Windows/badge.svg \"Windows\"\r\n[ubuntu-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AUbuntu \"UbuntuAction\"\r\n[ubuntu-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Ubuntu/badge.svg \"Ubuntu\"\r\n[macos-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AMacOS \"MacOSAction\"\r\n[macos-badge]: https://github.com/zhuzichu520/FluentUI/workflows/MacOS/badge.svg \"MacOS\"\r\n[release-link]: https://github.com/zhuzichu520/FluentUI/releases \"Release status\"\r\n[release-badge]: https://img.shields.io/github/release/zhuzichu520/FluentUI.svg?style=flat-square \"Release status\"\r\n[download-link]: https://github.com/zhuzichu520/FluentUI/releases/latest \"Download status\"\r\n[download-badge]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/total.svg \"Download status\"\r\n[download-latest]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/latest/total.svg \"latest status\"\r\n\r\n\r\n<p align=center>\r\nThis is a beautiful FluentUI component library based on Qt QML. Currently the main branch supports Qt 6. If you want to use it in Qt 5, checkout the Qt 5 branch.\r\n</p>\r\n\r\n## Requirements\r\n\r\n+ Qt Core, Qt Quick, Qt QML, Qt ShaderTool, Qt 5 Compatibility Module. (**Essential**)\r\n+ Qt LinguistTool (optional,for translations)\r\n+ Qt Svg (optional, however essential for Qt 5)\r\n\r\nUse [Qt Online Installers](https://download.qt.io/archive/online_installers/) to acquire the modules (**Recommended**) or compile them first before using the library.\r\n\r\n## \u26bd Get started\r\n\r\n+ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please pecify your platform and compilers.)\r\n\r\n+ run `example` program.\r\n\r\nor \r\n\r\n+ Clone the repository.\r\n\r\n```SHELL\r\ngit clone --recursive https://github.com/zhuzichu520/FluentUI.git\r\n```\r\n\r\n+ Build\r\n\r\n```\r\ngit clone --recursive https://github.com/zhuzichu520/FluentUI.git\r\ncd FluentUI\r\nmkdir build\r\ncd build\r\ncmake -DCMAKE_PREFIX_PATH=<YOUR_QT_SDK_DIR_PATH> -DCMAKE_BUILD_TYPE=Release -GNinja <PATH_TO_THE_REPOSITORY>\r\ncmake --build . --config Release --target all --parallel\r\n```\r\n\r\n+ Use your IDE (`Qt Creator` or `CLion`) to open the project. (only **CMake** supported).\r\n\r\n<div align=center>\r\n <img src=\"doc/preview/qt_creator_project.png\">\r\n</div>\r\n\r\n+ Compile the project. Then try to execute the `example` demo program.\r\n\r\n+ Great! Now you are ready to write your first QML FluentUI program! Check the documentations for more details.\r\n\r\n\r\n## \ud83d\udcd1 Documentations\r\n\r\n(Work in progress...\ud83d\ude80)\r\n\r\n## Supported components\r\n\r\n|Catalog|Detail|Notes / Demos|\r\n|:----:|:----:|:----:|\r\n|FluApp|The initial entry of the program|Router supported(SPA)|\r\n|FluWindow|Frameless Window|*This only works on windows|\r\n|FluAppBar|Title bar on top of the window|Drag, minimize, maximize and close are supported.|\r\n|FluText|Common text||\r\n|FluButton|Common button|![btn](doc/preview/demo_standardbtn.png) |\r\n|FluFilledButton|Filled button|![filledbtn](doc/preview/demo_filledbtn.png)|\r\n|FluTextButton|Text button|![textbtn](doc/preview/demo_textbtn.png)|\r\n|FluToggleButton|Toggle buttons|![togglebtn](doc/preview/demo_toggle_btn.png)|\r\n|FluIcon|Common icon|![icons](doc/preview/demo_icon.png)|\r\n|FluRadioButton|radio button|![radiobtn](doc/preview/demo_radiobtn.png)|\r\n|FluTextBox|Single-line input box|![textbox](doc/preview/demo_textbox.png)|\r\n|FluMultiLineTextBox|Multi-lines input area|![textarea](doc/preview/demo_multiline_textbox.png)|\r\n|FluToggleSwitch|toggle switch|![toggleswitch](doc/preview/demo_toggle_switch.png)|\r\n\r\n\r\nView more [`here`](doc/md/all_components.md)!\r\n\r\n\r\n## Reference\r\n+ [**Windows design**: Design guidelines and toolkits of Microsoft.](https://learn.microsoft.com/en-us/windows/apps/design/)\r\n+ [**Microsoft/WinUI-Gallery**: Microsoft's demo](https://github.com/microsoft/WinUI-Gallery)\r\n\r\n\r\n## License\r\n\r\nThis FluentUI library currently licensed under [MIT License](./License)\r\n\r\n## Star History\r\n\r\n[![Star History Chart](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)\r\n\r\n## \u26a1 Visitor count\r\n![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)\r\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A fluent design qml library based on PySide6",
"version": "1.0.0",
"project_urls": {
"Homepage": "https://github.com/zhuzichu520/FluentUI"
},
"split_keywords": [
"pyside",
"fluent",
"qml"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "a4e80652618abe12e25663b2dea3a00a4b233f8668b77c92ac16078faaeb2540",
"md5": "38735b0af24fbae6e8226114a7900d78",
"sha256": "42d8bc511a54710ca6f499ff057ebb2d9b3f0f1bf86c9670ea5f06b500de52c8"
},
"downloads": -1,
"filename": "PySide6_FluentUI_QML_Win-1.0.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "38735b0af24fbae6e8226114a7900d78",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": null,
"size": 2942200,
"upload_time": "2023-10-08T16:43:29",
"upload_time_iso_8601": "2023-10-08T16:43:29.442175Z",
"url": "https://files.pythonhosted.org/packages/a4/e8/0652618abe12e25663b2dea3a00a4b233f8668b77c92ac16078faaeb2540/PySide6_FluentUI_QML_Win-1.0.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-10-08 16:43:29",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "zhuzichu520",
"github_project": "FluentUI",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "pyside6-fluentui-qml-win"
}