简体中文 | English

README VERSION 0.9.4

Material3-QWidget

A Material 3 component library for Qt Widget.
Explore the docs »

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. License
6. Contact
7. Acknowledgments

About The Project

Welcome to Material3-QWidget, this is my side project attempting to make a UI component library for QWidget that mimics Google's Material Design 3 Style.

Here are the feature of this library:

• Custom palette
• Auto dark/light mode switching

(back to top)

Built With

• 
• 
• 

(back to top)

Getting Started

You may either complie or install this library or include this project as a sub project of your CMake project as the license is compactiable.

• If you are only introducing the .so/.a/.dll, etc file: Then you may want to check out the includes directory as all the headers are there.
• If you are introducing the project as a sub project of your CMake project: Please first make sure the license is compactiable, and you may refer the code in the examples folder for examples of introducing this library.

Prerequisites

To use this library, you will need these avaliable in your system:

• Qt: Minimum version of 6 as we depends on QGuiApplication::styleHints().

• CMake: Minimum version of 3.16.

Installation

The complier may run slow as we integrated the material symbols into the resource.qrc file.

(Documentation working in progress)

(back to top)

Usage

You could integrate the library using the way showed in the examples folder.

In the future, there will be a documentation site set up in the docs folder.

The docs site is not up yet...

To read those docs, you will need to have Node.JS environment and pnpm ready in the system.

Then, at the root directory of the project, run the following command:

cd docs
pnpm i
pnpm approve-builds
pnpm dev

This will pull a local server up. The default address should be at http://localhost:5173.

The port could change if there is another program occupying the port, the way to get the port number is to check your terminal output:

➜  docs git:(main) ✗ pnpm dev

> m3qw.docs@ dev /home/marcus/Desktop/Repositories/Public/material3-qwidget/docs
> react-router dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Hence, in the example above, the port is 5173.

(back to top)

Roadmap

• Infras
  • Theme loader
  • Font loader
  • Icon loader
  • Default palette (will be updated while introducing new components...)
• Components
  • App bar
  • App bar Icon buttons
  • Navigation drawer (Work in progress)
  • Icon buttons (Sorry, it's delayed)
  • ...
• Docs
  • README
  • Document site (Planned)
  • Example program (Work in progress)
• I18N
  • EN-US
  • ZH-CN

(back to top)

License

• This project is licensed under GNU GENERAL PUBLIC LICENSE Version 3, for the license content, please see COPYING for details.
• We also vendored the material symbols font, they are licensed under Apache License Version 2.0, see res/fonts/material-symbols/COPYING for details.

(back to top)

Contact

Please fire up an issue if you need to find me.

(back to top)

Acknowledgments

Thanks othneildrew/Best-README-Template for the README template!!

(back to top)