Merge pull request #103 from parker-int64/test_branch
Test branch: Add Eng to README.md
145
README.md
@ -1,99 +1,108 @@
|
|||||||
# FluentUI
|
<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
|
||||||
|
</p>
|
||||||
|
|
||||||
这是一个漂亮的Fluent组件库,使用QML插件开发的。main分支是Qt6.4.3,<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8" target="_blank">如何使用?</a>。如果需要qt5的请切换至qt5分支,<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8%EF%BC%881.2.7%E4%BB%A5%E5%8F%8A%E4%B9%8B%E5%89%8D%E7%89%88%E6%9C%AC%EF%BC%89" target="_blank">如何使用?</a>
|
![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
English | <a href="README_zh.md">简体中文</a>
|
||||||
|
</p>
|
||||||
|
<div align=center>
|
||||||
|
<img src="doc/preview/demo_large.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
## 编译状态
|
|
||||||
| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
|
|
||||||
|---------------|---------------|-----------------|
|
|
||||||
| ![win-badge] | ![ubuntu-badge] | ![macos-badge] |
|
|
||||||
|
|
||||||
[win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows "WindowsAction"
|
[win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows "WindowsAction"
|
||||||
[win-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Windows/badge.svg "Windows"
|
[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-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AUbuntu "UbuntuAction"
|
||||||
[ubuntu-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Ubuntu/badge.svg "Ubuntu"
|
[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-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AMacOS "MacOSAction"
|
||||||
[macos-badge]: https://github.com/zhuzichu520/FluentUI/workflows/MacOS/badge.svg "MacOS"
|
[macos-badge]: https://github.com/zhuzichu520/FluentUI/workflows/MacOS/badge.svg "MacOS"
|
||||||
|
|
||||||
## 发布
|
|
||||||
|
|
||||||
|[已发布][release-link]|[下载][download-link]|下载次数|
|
|
||||||
|:--:|:--:|:--:|
|
|
||||||
|![release-badge] |![download-badge]|![download-latest]|
|
|
||||||
|
|
||||||
[release-link]: https://github.com/zhuzichu520/FluentUI/releases "Release status"
|
[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"
|
[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-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-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"
|
[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.
|
||||||
|FluApp|初始化入口|支持路由跳转|
|
</p>
|
||||||
|FluWindow|无边框窗口|解决windows拖动闪烁问题|
|
|
||||||
|FluAppBar|窗口顶部标题栏|支持拖动窗口,最小化、最大化、关闭窗口|
|
|
||||||
|FluText|Text文本||
|
|
||||||
|FluButton|按钮||
|
|
||||||
|FluFilledButton|实心按钮||
|
|
||||||
|FluIconButton|图标按钮||
|
|
||||||
|FluTextButton|文本按钮||
|
|
||||||
|FluIcon|图标||
|
|
||||||
|FluRadioButton|单选按钮||
|
|
||||||
|FluTextBox|单行输入框||
|
|
||||||
|FluMultiLineTextBox|多行输入框||
|
|
||||||
|FluToggleSwitch|开关按钮||
|
|
||||||
|FluSlider|拖动条||
|
|
||||||
|FluInfoBar|提示Toast||
|
|
||||||
|FluContentDialog|对话框||
|
|
||||||
|FluProgressBar|条形进度条||
|
|
||||||
|FluProgressRing|圆形进度条||
|
|
||||||
|FluRectangle|矩形|支持部分圆角、clip|
|
|
||||||
|FluMenu|菜单框||
|
|
||||||
|FluTooltip|tooltip提示框||
|
|
||||||
|FluTreeView|树控件||
|
|
||||||
|FluTheme|主题设置|支持主题颜色切换,夜间模式|
|
|
||||||
|FluCarousel|轮播图组件|支持无限轮播|
|
|
||||||
|FluTimePicker|时间选择器||
|
|
||||||
|FluDatePicker|日期选择器||
|
|
||||||
|FluMenu|菜单Popup||
|
|
||||||
|FluNavigationView|响应式导航布局||
|
|
||||||
|FluScrollbar|滚动条||
|
|
||||||
|FluToggleButton|开关按钮||
|
|
||||||
|FluPagination|分页组件||
|
|
||||||
|FluTableView|表格组件||
|
|
||||||
|FluMediaPlayer|播放器||
|
|
||||||
|FluFlipView|FlipView||
|
|
||||||
|
|
||||||
# 部分效果预览
|
## 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)
|
||||||
|
|
||||||
![](doc/preview/home.png)
|
Use [Qt Online Installers](https://download.qt.io/archive/online_installers/) to aquire the moudules (**Recommanded**) or compile them first before using the library.
|
||||||
|
|
||||||
## 各种Button按钮
|
## ⚽ Get started
|
||||||
|
|
||||||
![](doc/preview/buttons.png)
|
+ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please pecify your platform and compilers.)
|
||||||
|
|
||||||
## 主题颜色切换、夜间模式
|
+ run `example` program.
|
||||||
|
|
||||||
![](doc/preview/theme.png)
|
or
|
||||||
|
|
||||||
## TableView表格组件
|
+ Clone the repository.
|
||||||
|
|
||||||
![](doc/preview/tableview.png)
|
```SHELL
|
||||||
|
git clone https://github.com/zhuzichu520/FluentUI.git
|
||||||
|
```
|
||||||
|
|
||||||
## FluTreeView树组件
|
+ Use your IDE (`Qt Creator` or `CLion`) to open the project. (only **CMake** supported).
|
||||||
|
|
||||||
![](doc/preview/treeview.png)
|
<div align=center>
|
||||||
|
<img src="doc/preview/qt_creator_project.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
## 轮播图组件
|
+ Compile the project. Then try to execute the `example` demo program.
|
||||||
|
|
||||||
![](doc/preview/carousel.png)
|
+ Great! Now you are ready to write your first QML FluentUI program! Check the documentations for more details.
|
||||||
|
|
||||||
### ⚡ Visitor count
|
|
||||||
![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
|
## 📑 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)
|
||||||
|
|
||||||
|
## ⚡ Visitor count
|
||||||
|
![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
|
99
README_zh_CN.md
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
# FluentUI
|
||||||
|
|
||||||
|
## 简介
|
||||||
|
|
||||||
|
这是一个漂亮的Fluent组件库,使用QML插件开发的。main分支是Qt6.4.3,<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8" target="_blank">如何使用?</a>。如果需要qt5的请切换至qt5分支,<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8%EF%BC%881.2.7%E4%BB%A5%E5%8F%8A%E4%B9%8B%E5%89%8D%E7%89%88%E6%9C%AC%EF%BC%89" target="_blank">如何使用?</a>
|
||||||
|
|
||||||
|
## 编译状态
|
||||||
|
| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
|
||||||
|
|---------------|---------------|-----------------|
|
||||||
|
| ![win-badge] | ![ubuntu-badge] | ![macos-badge] |
|
||||||
|
|
||||||
|
[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]|[下载][download-link]|下载次数|
|
||||||
|
|:--:|:--:|:--:|
|
||||||
|
|![release-badge] |![download-badge]|![download-latest]|
|
||||||
|
|
||||||
|
[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"
|
||||||
|
|
||||||
|
## 支持的组件
|
||||||
|
|
||||||
|
|目录|说明|备注|
|
||||||
|
|----|----|----|
|
||||||
|
|FluApp|初始化入口|支持路由跳转|
|
||||||
|
|FluWindow|无边框窗口|解决windows拖动闪烁问题|
|
||||||
|
|FluAppBar|窗口顶部标题栏|支持拖动窗口,最小化、最大化、关闭窗口|
|
||||||
|
|FluText|Text文本||
|
||||||
|
|FluButton|按钮||
|
||||||
|
|FluFilledButton|实心按钮||
|
||||||
|
|FluIconButton|图标按钮||
|
||||||
|
|FluTextButton|文本按钮||
|
||||||
|
|FluIcon|图标||
|
||||||
|
|FluRadioButton|单选按钮||
|
||||||
|
|FluTextBox|单行输入框||
|
||||||
|
|FluMultiLineTextBox|多行输入框||
|
||||||
|
|FluToggleSwitch|开关按钮||
|
||||||
|
|FluSlider|拖动条||
|
||||||
|
|FluInfoBar|提示Toast||
|
||||||
|
|FluContentDialog|对话框||
|
||||||
|
|FluProgressBar|条形进度条||
|
||||||
|
|FluProgressRing|圆形进度条||
|
||||||
|
|FluRectangle|矩形|支持部分圆角、clip|
|
||||||
|
|FluMenu|菜单框||
|
||||||
|
|FluTooltip|tooltip提示框||
|
||||||
|
|FluTreeView|树控件||
|
||||||
|
|FluTheme|主题设置|支持主题颜色切换,夜间模式|
|
||||||
|
|FluCarousel|轮播图组件|支持无限轮播|
|
||||||
|
|FluTimePicker|时间选择器||
|
||||||
|
|FluDatePicker|日期选择器||
|
||||||
|
|FluMenu|菜单Popup||
|
||||||
|
|FluNavigationView|响应式导航布局||
|
||||||
|
|FluScrollbar|滚动条||
|
||||||
|
|FluToggleButton|开关按钮||
|
||||||
|
|FluPagination|分页组件||
|
||||||
|
|FluTableView|表格组件||
|
||||||
|
|FluMediaPlayer|播放器||
|
||||||
|
|FluFlipView|FlipView||
|
||||||
|
|
||||||
|
# 部分效果预览
|
||||||
|
|
||||||
|
## 首页
|
||||||
|
|
||||||
|
![](doc/preview/home.png)
|
||||||
|
|
||||||
|
## 各种Button按钮
|
||||||
|
|
||||||
|
![](doc/preview/buttons.png)
|
||||||
|
|
||||||
|
## 主题颜色切换、夜间模式
|
||||||
|
|
||||||
|
![](doc/preview/theme.png)
|
||||||
|
|
||||||
|
## TableView表格组件
|
||||||
|
|
||||||
|
![](doc/preview/tableview.png)
|
||||||
|
|
||||||
|
## FluTreeView树组件
|
||||||
|
|
||||||
|
![](doc/preview/treeview.png)
|
||||||
|
|
||||||
|
## 轮播图组件
|
||||||
|
|
||||||
|
![](doc/preview/carousel.png)
|
||||||
|
|
||||||
|
### ⚡ Visitor count
|
||||||
|
![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
|
38
doc/md/all_components.md
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
# 支持的组件
|
||||||
|
|
||||||
|
|目录|说明|备注|
|
||||||
|
|----|----|----|
|
||||||
|
|FluApp|初始化入口|支持路由跳转|
|
||||||
|
|FluWindow|无边框窗口|解决windows拖动闪烁问题|
|
||||||
|
|FluAppBar|窗口顶部标题栏|支持拖动窗口,最小化、最大化、关闭窗口|
|
||||||
|
|FluText|Text文本||
|
||||||
|
|FluButton|按钮||
|
||||||
|
|FluFilledButton|实心按钮||
|
||||||
|
|FluIconButton|图标按钮||
|
||||||
|
|FluTextButton|文本按钮||
|
||||||
|
|FluIcon|图标||
|
||||||
|
|FluRadioButton|单选按钮||
|
||||||
|
|FluTextBox|单行输入框||
|
||||||
|
|FluMultiLineTextBox|多行输入框||
|
||||||
|
|FluToggleSwitch|开关按钮||
|
||||||
|
|FluSlider|拖动条||
|
||||||
|
|FluInfoBar|提示Toast||
|
||||||
|
|FluContentDialog|对话框||
|
||||||
|
|FluProgressBar|条形进度条||
|
||||||
|
|FluProgressRing|圆形进度条||
|
||||||
|
|FluRectangle|矩形|支持部分圆角、clip|
|
||||||
|
|FluMenu|菜单框||
|
||||||
|
|FluTooltip|tooltip提示框||
|
||||||
|
|FluTreeView|树控件||
|
||||||
|
|FluTheme|主题设置|支持主题颜色切换,夜间模式|
|
||||||
|
|FluCarousel|轮播图组件|支持无限轮播|
|
||||||
|
|FluTimePicker|时间选择器||
|
||||||
|
|FluDatePicker|日期选择器||
|
||||||
|
|FluMenu|菜单Popup||
|
||||||
|
|FluNavigationView|响应式导航布局||
|
||||||
|
|FluScrollbar|滚动条||
|
||||||
|
|FluToggleButton|开关按钮||
|
||||||
|
|FluPagination|分页组件||
|
||||||
|
|FluTableView|表格组件||
|
||||||
|
|FluMediaPlayer|播放器||
|
||||||
|
|FluFlipView|FlipView||
|
BIN
doc/preview/demo_filledbtn.png
Executable file
After Width: | Height: | Size: 1.8 KiB |
BIN
doc/preview/demo_icon.png
Executable file
After Width: | Height: | Size: 3.8 KiB |
BIN
doc/preview/demo_large.png
Executable file
After Width: | Height: | Size: 192 KiB |
BIN
doc/preview/demo_multiline_textbox.png
Executable file
After Width: | Height: | Size: 4.7 KiB |
BIN
doc/preview/demo_radiobtn.png
Executable file
After Width: | Height: | Size: 2.5 KiB |
BIN
doc/preview/demo_standardbtn.png
Executable file
After Width: | Height: | Size: 2.2 KiB |
BIN
doc/preview/demo_textbox.png
Executable file
After Width: | Height: | Size: 2.9 KiB |
BIN
doc/preview/demo_textbtn.png
Executable file
After Width: | Height: | Size: 1.3 KiB |
BIN
doc/preview/demo_toggle_btn.png
Normal file
After Width: | Height: | Size: 4.9 KiB |
BIN
doc/preview/demo_toggle_switch.png
Executable file
After Width: | Height: | Size: 1.1 KiB |
7
doc/preview/fluent_design.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000">
|
||||||
|
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||||
|
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<g id="SVGRepo_iconCarrier"> <title>design-and-ux/fluent-design</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="design-and-ux/fluent-design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#0078D7" stroke-width="2"> <rect id="mask" x="-1" y="-1" width="71" height="71" rx="14"> </rect> </g> <g id="fluent" transform="translate(22.000000, 11.000000)" fill="#0078D7" fill-rule="nonzero"> <polygon id="fluent_01" points="14.7809081 0 0 8.45050462 0 42.2525249 14.7809081 50.7030295 14.7809081 33.8020194 29.561837 25.3515148 14.7809081 16.9010101 29.561837 8.45050462"> </polygon> </g> </g> </g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
BIN
doc/preview/qt_creator_project.png
Executable file
After Width: | Height: | Size: 61 KiB |