2023-05-15 16:06:43 +08:00
< div align = center >
< img width = 64 src = "doc/preview/fluent_design.svg" >
< / div >
2023-03-08 00:24:35 +08:00
2023-05-15 16:06:43 +08:00
< h1 align = "center" >
QML FluentUI
< / h1 >
< p align = "center" >
2023-10-10 23:05:04 +08:00
A fluent design component library for Qt QML， < a href = "https://github.com/zhuzichu520/PySide6-FluentUI-QML" > PySide6-FluentUI-QML< / a > 。
2023-05-15 16:06:43 +08:00
< / p >
2023-03-08 00:24:35 +08:00
2023-05-15 16:06:43 +08:00
![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
< p align = "center" >
2023-05-15 16:38:52 +08:00
English | < a href = "README_zh_CN.md" > 简体中文< / a >
2023-05-15 16:06:43 +08:00
< / p >
< div align = center >
< img src = "doc/preview/demo_large.png" >
< / div >
2023-03-08 00:24:35 +08:00
[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"
2023-03-08 13:41:43 +08:00
[macos-badge]: https://github.com/zhuzichu520/FluentUI/workflows/MacOS/badge.svg "MacOS"
2023-03-08 14:53:28 +08:00
[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"
2023-05-15 16:06:43 +08:00
< 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)
2023-05-27 23:34:17 +03:00
Use [Qt Online Installers ](https://download.qt.io/archive/online_installers/ ) to acquire the modules (**Recommended**) or compile them first before using the library.
2023-05-15 16:06:43 +08:00
## ⚽ 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
2023-05-17 12:58:13 +08:00
git clone --recursive https://github.com/zhuzichu520/FluentUI.git
2023-05-15 16:06:43 +08:00
```
2023-05-16 09:47:12 +08:00
+ 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
```
2023-05-15 16:06:43 +08:00
+ 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| |
|FluFilledButton|Filled button||
|FluTextButton|Text button||
|FluToggleButton|Toggle buttons||
|FluIcon|Common icon||
|FluRadioButton|radio button||
|FluTextBox|Single-line input box||
|FluMultiLineTextBox|Multi-lines input area||
|FluToggleSwitch|toggle switch||
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 )
2023-06-15 15:58:56 +08:00
## Star History
[](https://star-history.com/#zhuzichu520/FluentUI & Date)
2023-05-15 16:06:43 +08:00
## ⚡ Visitor count
2023-05-16 09:47:12 +08:00
