mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-09 21:00:24 +08:00
update docs and readmes
This commit is contained in:
popaprozac
parent
40117e6565
commit
af3c6afb3b
@ -29,6 +29,34 @@ app := application.New(application.Options{
|
||||
})
|
||||
```
|
||||
|
||||
### Creating the Service with Custom Options (Windows Only)
|
||||
|
||||
On Windows, you can customize the badge appearance with various options:
|
||||
|
||||
```go
|
||||
import "github.com/wailsapp/wails/v3/pkg/application"
|
||||
import "github.com/wailsapp/wails/v3/pkg/services/badge"
|
||||
import "image/color"
|
||||
|
||||
// Create a badge service with custom options
|
||||
options := badge.Options{
|
||||
TextColour: color.RGBA{255, 255, 255, 255}, // White text
|
||||
BackgroundColour: color.RGBA{0, 0, 255, 255}, // Green background
|
||||
FontName: "consolab.ttf", // Bold Consolas font
|
||||
FontSize: 20, // Font size for single character
|
||||
SmallFontSize: 14, // Font size for multiple characters
|
||||
}
|
||||
|
||||
badgeService := badge.NewWithOptions(options)
|
||||
|
||||
// Register the service with the application
|
||||
app := application.New(application.Options{
|
||||
Services: []application.Service{
|
||||
application.NewService(badgeService),
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## Badge Operations
|
||||
|
||||
### Setting a Badge
|
||||
@ -66,6 +94,8 @@ badgeService.RemoveBadge()
|
||||
- Automatically handle dark/light mode appearance
|
||||
- Use the standard macOS dock badge styling
|
||||
- Automatically handle label overflow
|
||||
- Do not support customization options (any options passed to NewWithOptions will be ignored)
|
||||
- Will display "●" as the default badge if an empty label is provided
|
||||
|
||||
</TabItem>
|
||||
|
||||
@ -75,9 +105,17 @@ badgeService.RemoveBadge()
|
||||
|
||||
- Are displayed as an overlay icon in the taskbar
|
||||
- Support text values
|
||||
- Allow customization of colors, font, and font sizes
|
||||
- Adapt to Windows theme settings
|
||||
- Require the application to have a window
|
||||
- Does not handle label overflow
|
||||
- Use smaller font size automatically for badges with multiple characters
|
||||
- Do not handle label overflow
|
||||
- Support the following customization options:
|
||||
- TextColour: Text color (default: white)
|
||||
- BackgroundColour: Badge background color (default: red)
|
||||
- FontName: Font file name (default: "segoeuib.ttf")
|
||||
- FontSize: Font size for single character (default: 18)
|
||||
- SmallFontSize: Font size for multiple characters (default: 14)
|
||||
|
||||
</TabItem>
|
||||
|
||||
@ -100,12 +138,18 @@ badgeService.RemoveBadge()
|
||||
- Numeric badges are most effective
|
||||
- On macOS, text badges should be brief
|
||||
|
||||
3. For Windows customization:
|
||||
- Ensure high contrast between text and background colors
|
||||
- Test with different text lengths as font size decreases with length
|
||||
- Use common system fonts to ensure availability
|
||||
|
||||
## API Reference
|
||||
|
||||
### Service Management
|
||||
| Method | Description |
|
||||
|--------------------------------------------|-------------------------------------------------------|
|
||||
| `New()` | Creates a new badge service |
|
||||
| `New()` | Creates a new badge service with default options |
|
||||
| `NewWithOptions(options Options)` | Creates a new badge service with custom option (Windows only, options are ignored on macOS) |
|
||||
|
||||
### Badge Operations
|
||||
| Method | Description |
|
||||
@ -115,4 +159,13 @@ badgeService.RemoveBadge()
|
||||
|
||||
### Structs and Types
|
||||
|
||||
This service doesn't define any specific structs or types beyond the standard error return types.
|
||||
```go
|
||||
// Options for customizing badge appearance (Windows only)
|
||||
type Options struct {
|
||||
TextColour color.RGBA // Color of the badge text
|
||||
BackgroundColour color.RGBA // Color of the badge background
|
||||
FontName string // Font file name (e.g., "segoeuib.ttf")
|
||||
FontSize int // Font size for single character
|
||||
SmallFontSize int // Font size for multiple characters
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,59 +1,80 @@
|
||||
# Welcome to Your New Wails3 Project!
|
||||
Now that you have your project set up, it's time to explore the custom badge features that Wails3 offers on **Windows**.
|
||||
|
||||
Congratulations on generating your Wails3 application! This README will guide you through the next steps to get your project up and running.
|
||||
## Exploring Custom Badge Features
|
||||
|
||||
## Getting Started
|
||||
### Creating the Service with Custom Options (Windows Only)
|
||||
|
||||
1. Navigate to your project directory in the terminal.
|
||||
On Windows, you can customize the badge appearance with various options:
|
||||
|
||||
2. To run your application in development mode, use the following command:
|
||||
```go
|
||||
import "github.com/wailsapp/wails/v3/pkg/application"
|
||||
import "github.com/wailsapp/wails/v3/pkg/services/badge"
|
||||
import "image/color"
|
||||
|
||||
```
|
||||
wails3 dev
|
||||
```
|
||||
// Create a badge service with custom options
|
||||
options := badge.Options{
|
||||
TextColour: color.RGBA{255, 255, 255, 255}, // White text
|
||||
BackgroundColour: color.RGBA{0, 0, 255, 255}, // Green background
|
||||
FontName: "consolab.ttf", // Bold Consolas font
|
||||
FontSize: 20, // Font size for single character
|
||||
SmallFontSize: 14, // Font size for multiple characters
|
||||
}
|
||||
|
||||
This will start your application and enable hot-reloading for both frontend and backend changes.
|
||||
badgeService := badge.NewWithOptions(options)
|
||||
|
||||
3. To build your application for production, use:
|
||||
// Register the service with the application
|
||||
app := application.New(application.Options{
|
||||
Services: []application.Service{
|
||||
application.NewService(badgeService),
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
```
|
||||
wails3 build
|
||||
```
|
||||
## Badge Operations
|
||||
|
||||
This will create a production-ready executable in the `build` directory.
|
||||
### Setting a Badge
|
||||
|
||||
## Exploring Wails3 Features
|
||||
Set a badge on the application tile/dock icon:
|
||||
|
||||
Now that you have your project set up, it's time to explore the features that Wails3 offers:
|
||||
**Go**
|
||||
```go
|
||||
// Set a default badge
|
||||
badgeService.SetBadge("")
|
||||
|
||||
1. **Check out the examples**: The best way to learn is by example. Visit the `examples` directory in the `v3/examples` directory to see various sample applications.
|
||||
// Set a numeric badge
|
||||
badgeService.SetBadge("3")
|
||||
|
||||
2. **Run an example**: To run any of the examples, navigate to the example's directory and use:
|
||||
// Set a text badge
|
||||
badgeService.SetBadge("New")
|
||||
```
|
||||
|
||||
```
|
||||
go run .
|
||||
```
|
||||
**JS**
|
||||
```js
|
||||
import {SetBadge} from "../bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service";
|
||||
|
||||
Note: Some examples may be under development during the alpha phase.
|
||||
// Set a default badge
|
||||
SetBadge("")
|
||||
|
||||
3. **Explore the documentation**: Visit the [Wails3 documentation](https://v3.wails.io/) for in-depth guides and API references.
|
||||
// Set a numeric badge
|
||||
SetBadge("3")
|
||||
|
||||
4. **Join the community**: Have questions or want to share your progress? Join the [Wails Discord](https://discord.gg/JDdSxwjhGf) or visit the [Wails discussions on GitHub](https://github.com/wailsapp/wails/discussions).
|
||||
// Set a text badge
|
||||
SetBadge("New")
|
||||
```
|
||||
|
||||
## Project Structure
|
||||
### Removing a Badge
|
||||
|
||||
Take a moment to familiarize yourself with your project structure:
|
||||
Remove the badge from the application icon:
|
||||
|
||||
- `frontend/`: Contains your frontend code (HTML, CSS, JavaScript/TypeScript)
|
||||
- `main.go`: The entry point of your Go backend
|
||||
- `app.go`: Define your application structure and methods here
|
||||
- `wails.json`: Configuration file for your Wails project
|
||||
**Go**
|
||||
```go
|
||||
badgeService.RemoveBadge()
|
||||
```
|
||||
|
||||
## Next Steps
|
||||
**JS**
|
||||
```js
|
||||
import {RemoveBadge} from "../bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service";
|
||||
|
||||
1. Modify the frontend in the `frontend/` directory to create your desired UI.
|
||||
2. Add backend functionality in `main.go`.
|
||||
3. Use `wails3 dev` to see your changes in real-time.
|
||||
4. When ready, build your application with `wails3 build`.
|
||||
|
||||
Happy coding with Wails3! If you encounter any issues or have questions, don't hesitate to consult the documentation or reach out to the Wails community.
|
||||
RemoveBadge()
|
||||
```
|
||||
@ -8,14 +8,18 @@
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore: Unused imports
|
||||
import {Call as $Call, Create as $Create} from "@wailsio/runtime";
|
||||
import { Call as $Call, CancellablePromise as $CancellablePromise, Create as $Create } from "@wailsio/runtime";
|
||||
|
||||
export function RemoveBadge(): Promise<void> & { cancel(): void } {
|
||||
let $resultPromise = $Call.ByID(2633565570) as any;
|
||||
return $resultPromise;
|
||||
/**
|
||||
* RemoveBadge removes the badge label from the application icon.
|
||||
*/
|
||||
export function RemoveBadge(): $CancellablePromise<void> {
|
||||
return $Call.ByID(2633565570);
|
||||
}
|
||||
|
||||
export function SetBadge(label: string): Promise<void> & { cancel(): void } {
|
||||
let $resultPromise = $Call.ByID(3052354152, label) as any;
|
||||
return $resultPromise;
|
||||
/**
|
||||
* SetBadge sets the badge label on the application icon.
|
||||
*/
|
||||
export function SetBadge(label: string): $CancellablePromise<void> {
|
||||
return $Call.ByID(3052354152, label);
|
||||
}
|
||||
|
||||
@ -1324,12 +1324,10 @@ window._wails = window._wails || {};
|
||||
window._wails.invoke = invoke;
|
||||
invoke("wails:runtime:ready");
|
||||
function RemoveBadge() {
|
||||
let $resultPromise = ByID(2633565570);
|
||||
return $resultPromise;
|
||||
return ByID(2633565570);
|
||||
}
|
||||
function SetBadge(label) {
|
||||
let $resultPromise = ByID(3052354152, label);
|
||||
return $resultPromise;
|
||||
return ByID(3052354152, label);
|
||||
}
|
||||
const setButton = document.getElementById("set");
|
||||
const removeButton = document.getElementById("remove");
|
||||
@ -1,38 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/wails.png"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="stylesheet" href="/style.css"/>
|
||||
<title>Wails App</title>
|
||||
<script type="module" crossorigin src="/assets/index-sXwpgKSV.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div>
|
||||
<a data-wml-openURL="https://wails.io">
|
||||
<img src="/wails.png" class="logo" alt="Wails logo"/>
|
||||
</a>
|
||||
<a data-wml-openURL="https://www.typescriptlang.org/">
|
||||
<img src="/typescript.svg" class="logo vanilla" alt="Typescript logo"/>
|
||||
</a>
|
||||
</div>
|
||||
<h1>Wails + Typescript</h1>
|
||||
<div class="result">Set a badge label below 👇</div>
|
||||
<div class="card">
|
||||
<div class="input-box" id="input">
|
||||
<input class="input" id="label" type="text" autocomplete="off"/>
|
||||
<button class="btn" id="set">Set</button>
|
||||
<button class="btn" id="remove">Remove</button>
|
||||
<button class="btn" id="set-go">Set using Go</button>
|
||||
<button class="btn" id="remove-go">Remove using Go</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div><p>Click on the Wails logo to learn more</p></div>
|
||||
<div><p id="time">Listening for Time event...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/wails.png"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="stylesheet" href="/style.css"/>
|
||||
<title>Wails App</title>
|
||||
<script type="module" crossorigin src="/assets/index-edhLCYCH.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div>
|
||||
<a data-wml-openURL="https://wails.io">
|
||||
<img src="/wails.png" class="logo" alt="Wails logo"/>
|
||||
</a>
|
||||
<a data-wml-openURL="https://www.typescriptlang.org/">
|
||||
<img src="/typescript.svg" class="logo vanilla" alt="Typescript logo"/>
|
||||
</a>
|
||||
</div>
|
||||
<h1>Wails + Typescript</h1>
|
||||
<div class="result">Set a badge label below 👇</div>
|
||||
<div class="card">
|
||||
<div class="input-box" id="input">
|
||||
<input class="input" id="label" type="text" autocomplete="off"/>
|
||||
<button class="btn" id="set">Set</button>
|
||||
<button class="btn" id="remove">Remove</button>
|
||||
<button class="btn" id="set-go">Set using Go</button>
|
||||
<button class="btn" id="remove-go">Remove using Go</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div><p>Click on the Wails logo to learn more</p></div>
|
||||
<div><p id="time">Listening for Time event...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,59 +1,71 @@
|
||||
# Welcome to Your New Wails3 Project!
|
||||
Now that you have your project set up, it's time to explore the basic badge features that Wails3 offers on **macOS** and **Windows**.
|
||||
|
||||
Congratulations on generating your Wails3 application! This README will guide you through the next steps to get your project up and running.
|
||||
## Exploring Badge Features
|
||||
|
||||
## Getting Started
|
||||
### Creating the Service
|
||||
|
||||
1. Navigate to your project directory in the terminal.
|
||||
First, initialize the badge service:
|
||||
|
||||
2. To run your application in development mode, use the following command:
|
||||
```go
|
||||
import "github.com/wailsapp/wails/v3/pkg/application"
|
||||
import "github.com/wailsapp/wails/v3/pkg/services/badge"
|
||||
|
||||
```
|
||||
wails3 dev
|
||||
```
|
||||
// Create a new badge service
|
||||
badgeService := badge.New()
|
||||
|
||||
This will start your application and enable hot-reloading for both frontend and backend changes.
|
||||
// Register the service with the application
|
||||
app := application.New(application.Options{
|
||||
Services: []application.Service{
|
||||
application.NewService(badgeService),
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
3. To build your application for production, use:
|
||||
## Badge Operations
|
||||
|
||||
```
|
||||
wails3 build
|
||||
```
|
||||
### Setting a Badge
|
||||
|
||||
This will create a production-ready executable in the `build` directory.
|
||||
Set a badge on the application tile/dock icon:
|
||||
|
||||
## Exploring Wails3 Features
|
||||
**Go**
|
||||
```go
|
||||
// Set a default badge
|
||||
badgeService.SetBadge("")
|
||||
|
||||
Now that you have your project set up, it's time to explore the features that Wails3 offers:
|
||||
// Set a numeric badge
|
||||
badgeService.SetBadge("3")
|
||||
|
||||
1. **Check out the examples**: The best way to learn is by example. Visit the `examples` directory in the `v3/examples` directory to see various sample applications.
|
||||
// Set a text badge
|
||||
badgeService.SetBadge("New")
|
||||
```
|
||||
|
||||
2. **Run an example**: To run any of the examples, navigate to the example's directory and use:
|
||||
**JS**
|
||||
```js
|
||||
import {SetBadge} from "../bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service";
|
||||
|
||||
```
|
||||
go run .
|
||||
```
|
||||
// Set a default badge
|
||||
SetBadge("")
|
||||
|
||||
Note: Some examples may be under development during the alpha phase.
|
||||
// Set a numeric badge
|
||||
SetBadge("3")
|
||||
|
||||
3. **Explore the documentation**: Visit the [Wails3 documentation](https://v3.wails.io/) for in-depth guides and API references.
|
||||
// Set a text badge
|
||||
SetBadge("New")
|
||||
```
|
||||
|
||||
4. **Join the community**: Have questions or want to share your progress? Join the [Wails Discord](https://discord.gg/JDdSxwjhGf) or visit the [Wails discussions on GitHub](https://github.com/wailsapp/wails/discussions).
|
||||
### Removing a Badge
|
||||
|
||||
## Project Structure
|
||||
Remove the badge from the application icon:
|
||||
|
||||
Take a moment to familiarize yourself with your project structure:
|
||||
**Go**
|
||||
```go
|
||||
badgeService.RemoveBadge()
|
||||
```
|
||||
|
||||
- `frontend/`: Contains your frontend code (HTML, CSS, JavaScript/TypeScript)
|
||||
- `main.go`: The entry point of your Go backend
|
||||
- `app.go`: Define your application structure and methods here
|
||||
- `wails.json`: Configuration file for your Wails project
|
||||
**JS**
|
||||
```js
|
||||
import {RemoveBadge} from "../bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service";
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. Modify the frontend in the `frontend/` directory to create your desired UI.
|
||||
2. Add backend functionality in `main.go`.
|
||||
3. Use `wails3 dev` to see your changes in real-time.
|
||||
4. When ready, build your application with `wails3 build`.
|
||||
|
||||
Happy coding with Wails3! If you encounter any issues or have questions, don't hesitate to consult the documentation or reach out to the Wails community.
|
||||
RemoveBadge()
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user