Skip to content

docs: add installation guide and Chinese localization #5905

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.

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
72 changes: 36 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,37 @@

# Textual

<img align="right" width="250" alt="clock" src="https://github.com/user-attachments/assets/63e839c3-5b8e-478d-b78e-cf7647eb85e8" />
Build cross-platform user interfaces with a simple Python API. Textual combines modern Python features with web development best practices, delivering an efficient cross-platform application development experience.

Build cross-platform user interfaces with a simple Python API. Run your apps in the terminal *or* a web browser.

Textual's API combines modern Python with the best of developments from the web world, for a lean app development experience.
De-coupled components and an advanced [testing](https://textual.textualize.io/guide/testing/) framework ensure you can maintain your app for the long-term.
## Key Features
- 🖥️ Dual Rendering Engine - Write once, deploy to both terminal and web browsers
- 🧩 50+ Built-in Widgets - Buttons, tables, tree views and more out-of-the-box
- 🎨 Theme System - Multiple built-in UI themes with custom styling support
- 🛠️ Developer Tools - Real-time terminal app debugging
- ⚡ Async Core - Native async/await support

Want some more examples? See the [examples](https://github.com/Textualize/textual/tree/main/examples) directory.

## Installing

### Prerequisites:
- Python 3.10+
Copy link
Contributor

Choose a reason for hiding this comment

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

Textual is currently marked as supporting Python 3.8 and above.

- Terminal requirements: TrueColor-supported terminal (e.g. Windows Terminal, iTerm2)

Install Textual via pip:

```
pip install textual textual-dev
```
For development tools:

```
pip install "textual[dev]"
```


## Quick Start

```python
"""
An App to show the current time.
Expand Down Expand Up @@ -54,14 +76,13 @@ if __name__ == "__main__":
app.run()
```

![UI Screenshots](images/screenshot1.png)

> [!TIP]
> Textual is an asynchronous framework under the hood. Which means you can integrate your apps with async libraries &mdash; if you want to.
> If you don't want or need to use async, Textual won't force it on you.



<img src="https://img.spacergif.org/spacer.gif" width="1" height="64"/>

## Widgets

Textual's library of [widgets](https://textual.textualize.io/widget_gallery/) covers everything from buttons, tree controls, data tables, inputs, text areas, and more…
Expand All @@ -76,13 +97,13 @@ Predefined themes ensure your apps will look good out of the box.

<td>

![buttons](https://github.com/user-attachments/assets/2ac26387-aaa3-41ed-bc00-7d488600343c)
![buttons](images/screenshot2.gif)
Copy link
Contributor

Choose a reason for hiding this comment

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

When you do this you break the README in all places other than on GitHub; for example it would break the look of the README on PyPI for example.


</td>

<td>

![tree](https://github.com/user-attachments/assets/61ccd6e9-97ea-4918-8eda-3ee0f0d3770e)
![tree](images/screenshot3.gif)

</td>

Expand All @@ -93,13 +114,13 @@ Predefined themes ensure your apps will look good out of the box.

<td>

![datatables](https://github.com/user-attachments/assets/3e1f9f7a-f965-4901-a114-3c188bd17695)
![datatables](images/screenshot4.gif)

</td>

<td>

![inputs](https://github.com/user-attachments/assets/b02aa203-7c37-42da-a1bb-2cb244b7d0d3)
![inputs](images/screenshot5.gif)

</td>

Expand All @@ -108,13 +129,13 @@ Predefined themes ensure your apps will look good out of the box.

<td>

![listview](https://github.com/user-attachments/assets/963603bc-aa07-4688-bd24-379962ece871)
![listview](images/screenshot6.gif)

</td>

<td>

![textarea](https://github.com/user-attachments/assets/cd4ba787-5519-40e2-8d86-8224e1b7e506)
![textarea](images/screenshot7.gif)

</td>

Expand All @@ -124,21 +145,6 @@ Predefined themes ensure your apps will look good out of the box.
</table>


<img src="https://img.spacergif.org/spacer.gif" width="1" height="32"/>

## Installing

Install Textual via pip:

```
pip install textual textual-dev
```

See [getting started](https://textual.textualize.io/getting_started/) for details.


<img src="https://img.spacergif.org/spacer.gif" width="1" height="32"/>

## Demo


Expand All @@ -154,8 +160,6 @@ Or try the [textual demo](https://github.com/textualize/textual-demo) *without*
uvx --python 3.12 textual-demo
```

<img src="https://img.spacergif.org/spacer.gif" width="1" height="32"/>

## Dev Console

<img align="right" width="40%" alt="devtools" src="https://github.com/user-attachments/assets/12c60d65-e342-4b2f-9372-bae0459a7552" />
Expand All @@ -168,7 +172,6 @@ In addition to system messages and events, your logged messages and print statem

See [the guide](https://textual.textualize.io/guide/devtools/) for other helpful tools provided by the `textual-dev` package.

<img src="https://img.spacergif.org/spacer.gif" width="1" height="32"/>

## Command Palette

Expand All @@ -181,7 +184,6 @@ It is easy to extend the command palette with [custom commands](https://textual.

![Command Palette](https://github.com/user-attachments/assets/94d8ec5d-b668-4033-a5cb-bf820e1b8d60)

<img src="https://img.spacergif.org/spacer.gif" width="1" height="32"/>

# Textual ❤️ Web

Expand All @@ -203,9 +205,7 @@ Since Textual apps have low system requirements, you can install them anywhere P
No desktop required!


<img src="https://img.spacergif.org/spacer.gif" width="1" height="32"/>


## Join us on Discord

Join the Textual developers and community on our [Discord Server](https://discord.gg/Enf6Z3qhVr).

207 changes: 207 additions & 0 deletions README.zh.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@


[![Discord](https://img.shields.io/discord/1026214085173461072)](https://discord.gg/Enf6Z3qhVr)
[![支持的Python版本](https://img.shields.io/pypi/pyversions/textual/1.0.0)](https://pypi.org/project/textual/)
[![PyPI版本](https://badge.fury.io/py/textual.svg?)](https://badge.fury.io/py/textual)
![操作系统支持](https://img.shields.io/badge/OS-macOS%20Linux%20Windows-red)

![textual-splash](https://github.com/user-attachments/assets/4caeb77e-48c0-4cf7-b14d-c53ded855ffd)

# Textual

使用简单的Python API构建终端和Web双平台用户界面。Textual结合了现代Python特性和Web开发的最佳实践,提供高效的跨平台应用开发体验。

## 项目特点
- 🖥️ 终端+浏览器双渲染引擎 - 一次开发,多端部署
- 🧩 50+内置组件 - 按钮/表格/树形控件等开箱即用
- 🎨 主题系统 - 内置多套UI主题,支持自定义样式
- 🛠️ 开发者工具 - 实时调试终端应用
- ⚡ 异步核心 - 原生支持async/await语法

需要更多示例?请查看[示例目录](https://github.com/Textualize/textual/tree/main/examples)。

## 安装指南

### 前置条件:
- Python 3.10+
- 终端要求:支持TrueColor的终端(如Windows Terminal/iTerm2)

通过pip安装Textual:

```
pip install textual
```

开发工具包:

```
pip install textual textual-dev
```

```python


## 快速入门

"""
显示当前时间的应用
"""

from datetime import datetime
from textual.app import App, ComposeResult
from textual.widgets import Digits


class ClockApp(App):
CSS = """
Screen { align: center middle; }
Digits { width: auto; }
"""

def compose(self) -> ComposeResult:
yield Digits("")

def on_ready(self) -> None:
self.update_clock()
self.set_interval(1, self.update_clock)

def update_clock(self) -> None:
clock = datetime.now().time()
self.query_one(Digits).update(f"{clock:%T}")


if __name__ == "__main__":
app = ClockApp()
app.run()

![项目界面截图](images/screenshot1.png)

>[!TIP]
>Textual底层是异步框架。这意味着您可以将应用与异步库集成——如果您需要的话。
>如果您不想或不需要使用异步,Textual不会强制您使用。


## 组件库

Textual的组件库包含按钮、树形控件、数据表格、输入框、文本区域等等...
结合灵活的布局系统,您可以实现任何需要的用户界面。

预定义的主题确保您的应用开箱即用,简便美观。


<table>

<tr>

<td>

![按钮](images/screenshot2.gif)

</td>

<td>

![树形控件](images/screenshot3.gif)

</td>

</tr>


<tr>

<td>!

[数据表格](images/screenshot4.gif)

</td>

<td>

![输入框](images/screenshot5.gif)

</td>

</tr>
<tr>

<td>

![列表视图](images/screenshot6.gif)

</td>

<td>

![文本区域](images/screenshot7.gif)

</td>


</tr>

</table>


## 演示程序


运行以下命令查看Textual的部分功能:

```
python -m textual
```

或者尝试[textual演示](https://github.com/textualize/textual-demo)无需安装(需要uv):

```bash
uvx --python 3.12 textual-demo
```

## 开发者控制台

<img align="right" width="40%" alt="开发者工具" src="https://github.com/user-attachments/assets/12c60d65-e342-4b2f-9372-bae0459a7552" />


如何调试一个也在终端中运行的终端应用?

textual-dev包提供了一个开发者控制台,可以从另一个终端连接到您的应用程序。
除了系统消息和事件外,您记录的日志消息和print语句也会显示在开发者控制台中。

请[参阅指南](https://textual.textualize.io/guide/devtools/)了解textual-dev包提供的其他有帮助的工具。


## 命令面板


Textual应用具有模糊搜索命令面板。
按`ctrl+p`打开命令面板。

您可以通过自定义命令轻松扩展命令面板。

[自定义命令](https://github.com/user-attachments/assets/94d8ec5d-b668-4033-a5cb-bf820e1b8d60)


## Textual ❤️ Web

<img align="right" width="40%" alt="textual-serve" src="https://github.com/user-attachments/assets/a25820fb-87ae-433a-858b-ac3940169242">


Textual应用在浏览器中和终端中同样适用。任何Textual应用都可以用Web部署启动——这样您就可以在Web上分享您的创作。
以下是启动演示应用的方法:

```
Web部署 "python -m textual"
```

除了本地服务应用外,您还可以使用Textual Web服务应用。[Textual Web](https://github.com/Textualize/textual-web).

Textual Web的穿透防火墙技术可以服务无限数量的应用程序。

由于Textual应用的系统要求低,您可以在任何能运行Python的设备上安装它们。将任何设备变成联网设备。
这无需桌面环境!


## 加入我们的Discord

加入Textual开发者和社区,访问我们的Discord服务器。[Discord Server](https://discord.gg/Enf6Z3qhVr).
6 changes: 3 additions & 3 deletions docs.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# Documentation Workflow
# Documentation Workflow <!-- by oddune7 -->
Copy link
Contributor

Choose a reason for hiding this comment

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

?!?!


* Ensure you're inside a *Python 3.10+* virtual environment
* Run the live-reload server using `mkdocs serve` from the project root
* Create new pages by adding new directories and Markdown files inside `docs/*`

## Commands
## Commands <!-- by oddune7 -->

- `mkdocs serve` - Start the live-reloading docs server.
- `mkdocs build` - Build the documentation site.
- `mkdocs -h` - Print help message and exit.

## Project layout
## Project layout <!-- by oddune7 -->

mkdocs.yml # The configuration file.
docs/
Expand Down
Binary file added images/screenshot1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/screenshot2.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/screenshot3.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/screenshot4.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/screenshot5.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/screenshot6.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/screenshot7.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.