<p align="center">
  <img src="https://github.com/rio-labs/rio/blob/main/assets/readme_logo.svg?raw=true" alt="Rio Logo" style="width: 100%; height: 9rem"/>
</p>

<p align="center">
  <strong>Rio</strong> 是创建网页以及Apps且容易使用的框架 <strong>且完成建立于Python上</strong>. 🐍
  <br>
您 <strong>不需要任何HTML, CSS或JavaScript</strong> 去创建精美的Apps<br><br>
  <a href="https://rio.dev/get-started?s=pl1">Tutorial</a> - <a href="https://rio.dev/examples?s=g8r">Examples</a> - <a href="https://discord.gg/7ejXaPwhyH">Discord</a> - <a href="https://rio.dev/docs?s=o1z">Docs</a> - <a href="https://github.com/rio-labs/rio">Source Code</a><br><br>
  Rio将React-style components带进Python。取得丰富的内建元件并组合他们以创建自己客制化的元件。之后，将组合元件带入Apps中。更强大的是Rio可以在本地以及网页上运行。
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Rio-outline.svg?color=%2311e8e3e&link=https%3A%2F%2Frio.dev&style=flat-square&logo=data:image/svg%2bxml;base64, " alt="Rio"/>
  <img src="https://img.shields.io/pypi/v/rio-ui?color=%2311e8e3e&style=flat-square" alt="Version"/>
  <!--
  <img src="https://img.shields.io/discord/1213589765484576818?color=%2311e8e3e&label=discord&style=flat-square" alt="Discord"/>
  -->
  <img src="https://img.shields.io/pypi/pyversions/rio-ui?style=flat-square" alt="Python Version"/>
  <img src="https://img.shields.io/pypi/l/rio-ui?color=%2311e8e3e&style=flat-square" alt="License"/>
  <img src="https://img.shields.io/github/stars/rio-labs/rio?style=flat-square" alt="GitHub Stars"/>
  <img src="https://img.shields.io/pypi/dm/rio-ui?color=%2311e8e3e&style=flat-square" alt="Downloads"/>
</p>

![Image Generation Example](https://github.com/rio-labs/rio/assets/41641225/44279406-0c2d-47e2-98b5-4582722054b2)

## Features 🧩

-   现代, **宣告式 UI** 框架
-   **100% Python** - 不需要 HTML, CSS, or JavaScript 
-   超过 **50种内建元件** 提供常用UI元素, 比如 `rio.Switch`, `rio.Button`, 和 `rio.Text`, 以及更多
-   结合 **现代Python工具**: 由于 **entirely Type Safe** 编辑器给予立即反馈及立即指出错误
-   Apps可以运行在 **本地与网页上**
-   包含**开发工具** 
-   **开源 & 永久免费**

## Example ⌨️

```python
# Define a component that counts button clicks
class ButtonClicker(rio.Component):
    # Define the attributes of the component. Rio will watch these
    # for changes and automatically update the GUI.
    clicks: int = 0

    # Define a method that increments the click count. We'll later
    # make a button that calls this method whenever it is pressed.
    def _on_press(self) -> None:
        self.clicks += 1

    # Define the `build` method. This method essentially tells rio
    # what a ButtonClicker component looks like. Whenever the state
    # of the ButtonClicker component changes, rio will call its
    # `build` method and update the GUI according to the output.
    def build(self) -> rio.Component:
        return rio.Column(
            rio.Button('Click me', on_press=self._on_press),
            rio.Text(f'You clicked the button {self.clicks} time(s)'),
        )

# Create an App and tell it to display a ButtonClicker when it starts
app = rio.App(build=ButtonClicker)
app.run_in_browser()  # Or `app.run_in_window()` to run as local app!
```

## 安装 🛠️

Rio可在PyPI取得, 所以可以使用pip安装:

```bash
pip install rio-ui
```

## 开始 🎓

Rio有着非常强大的指令帮助您。使用简短指令创建新专案:

```bash
rio new
```

您可以选择多种内建模板帮助您开始。以下是简单的tic-tac-toe范例专案:

```bash
rio new my-project --type website --template "Tic-Tac-Toe"
cd my-project
rio run
```

你将会得到第一个app且只花费您几秒钟!

## 状态: 开发中 🚧

Rio持续更新中。我们致力于提供您最好的使用经验。如果您有任何建议，请在Discord与我们联系 [our Discord server](https://discord.gg/7ejXaPwhyH).

## 贡献 🤝

**任何专案成长于社群的帮助**, 在Rio更是如此. **依然有许多地方可以精进**, 像是增加新feature, 解决bugs, 或是分享您的想法。 请先阅读我们的 [贡献指引](https://github.com/rio-labs/rio/blob/main/CONTRIBUTING.md) 当您新增Pull Request到专案中。 当每周更新feature，Rio持续完善。 **点星 ⭐ 以及 👀 关注 这个 repo 以获取最新消息!**

任何Rio贡献应建立于Apache-2.0证书上，没有额外的规定或情况。

## 社群支持 🫶

**加入Rio并成为我们的一分子！以下是如何联系我们:**

-   [Discord](https://discord.gg/7ejXaPwhyH) (Level up your Rio skills! **加入Discord服务器** to chat with other developers and discuss how to contribute.)
-   [GitHub](https://github.com/rio-labs/rio) (**发现bug?** Issues are the perfect place to let us know. Feeling super-helpful? Try fixing an existing issue and submit a PR!)
-   [Community Forum](https://github.com/rio-labs/rio/discussions) (**加入Github社群论坛** for asking questions and discussions)
-   [Feature Requests](https://github.com/rio-labs/rio/discussions/categories/feature-requests) (Cleanest way to **请求一个feature** on GitHub)

使用Rio, 请标示引用来源为[official Rio documentation](https://rio.dev/docs?s=t9s).
