Pyodide HTML

的 HTML 元素pyodide，实现为 Python 函数。

快速开始

import micropip

micropip.install('pyodide-html')

import pyodide_html as html

ele = html.h1('Hello, world!')

js.document.body.appendChild(ele)

动机

在pyodide中，您可以使用 来创建 HTML 元素js.document，但它非常冗长。例如，范围输入如下所示：

import js

ele = js.document.createElement('input')
ele.type = 'range'
ele.min = 0
ele.max = 50
ele.value = 25
ele.step = 1

使用pyodide_html，您可以通过一个函数调用完成所有这些操作：

import pyodide_html as html

ele = html.input(type="range", min=0, max=50, value=25, step=1)

用法

所有的HTML 标签都是作为 Python 函数实现的。例如，html.h1创建一个<h1>元素，html.input创建一个<input>元素，等等。

该函数的签名是：

html.element(*children, **props)

这相当于调用<element **props>*children</element>.

每个元素都有一个add方法可以让您添加新的或更新现有的子元素或道具。它具有以下签名：

html.element(*children, **props).add(*children, **props)

如果您想使用某些 初始化元素props，然后添加/更新children或props稍后使用，这很方便add。例如：

import pyodide_html as html

# initialize your element
ele = html.div(className="container")

# Add children
ele.add(
    html.h1("My header"),
    html.p("Some paragraph here"),
    # ...
)

# You can add new props:
ele.add(style="background-color: lightgray")

# You can also update existing props:
ele.add(style="background-color: lightblue")

您还可以链接add调用：

ele.add(style="...").add(className="...").add(html.div("a child"))

请注意，add就地修改元素。

文档

有关 API 参考，请参阅REFERENCE.txt（GitHub 链接）。

贡献/发展

克隆此 repo 后，从以下内容开始：

pip install -r dev-requirements.txt

然后，您可以进行所需的更改