Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add progress bar to gallery #2399

Merged
merged 2 commits into from
Apr 27, 2023
Merged

Add progress bar to gallery #2399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
352c9eb
Add progress bar to gallery
willmcgugan Apr 27, 2023
fbcfb8a
table fix
willmcgugan Apr 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).

## Unrelased
## Unreleased

### Added

Expand Down
11 changes: 11 additions & 0 deletions docs/widget_gallery.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,17 @@ Display placeholder content while you are designing a UI.
```{.textual path="docs/examples/widgets/placeholder.py"}
```

## ProgressBar

A configurable progress bar with ETA and percentage complete.

[ProgressBar reference](./widgets/progress_bar.md){ .md-button .md-button--primary }


```{.textual path="docs/examples/widgets/progress_bar.py" press="tab,5,0,tab,enter"}
```


## RadioButton

A simple radio button.
Expand Down
25 changes: 10 additions & 15 deletions docs/widgets/progress_bar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,27 +106,22 @@ Refer to the [section below](#styling-the-progress-bar) for more information.

## Reactive Attributes

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `percentage` | `float | None` | `None` | The read-only percentage of progress that has been made. This is `None` if the `total` hasn't been set. |
| `progress` | `float` | `0` | The number of steps of progress already made. |
| `total` | `float | None` | `None` | The total number of steps that we are keeping track of. |

## Messages

- [ProgressBar.Completed][textual.widgets.ProgressBar.Completed]
- [ProgressBar.Started][textual.widgets.ProgressBar.Started]
| Name | Type | Default | Description |
| ------------ | ------- | ------- | ------------------------------------------------------------------------------------------------------- |
| `percentage` | `float | None` | The read-only percentage of progress that has been made. This is `None` if the `total` hasn't been set. |
| `progress` | `float` | `0` | The number of steps of progress already made. |
| `total` | `float | None` | The total number of steps that we are keeping track of. |
Comment on lines +109 to +113
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you have a tool/plugin to format tables like this automatically?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, a vscode extension



## Styling the Progress Bar

The progress bar is composed of three sub-widgets that can be styled independently:

| Widget name | ID | Description |
|-------------|----|-------------|
| `Bar` | `#bar` | The bar that visually represents the progress made. |
| `PercentageStatus` | `#percentage` | [Label](./label.md) that shows the percentage of completion. |
| `ETAStatus` | `#eta` | [Label](./label.md) that shows the estimated time to completion. |
| Widget name | ID | Description |
| ------------------ | ------------- | ---------------------------------------------------------------- |
| `Bar` | `#bar` | The bar that visually represents the progress made. |
| `PercentageStatus` | `#percentage` | [Label](./label.md) that shows the percentage of completion. |
| `ETAStatus` | `#eta` | [Label](./label.md) that shows the estimated time to completion. |

### Bar Component Classes

Expand Down