Pyodide HTML

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

快速入门

import micropip

micropip.install('pyodide-html')

import pyodide_html as html

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

js.document.body.appendChild(ele)

动机

在pyodide中，您可以使用js.document创建HTML元素，但这非常冗长。例如，范围输入将看起来像

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初始化元素，然后稍后使用add添加或更新children或props很有用。例如

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会就地修改元素。

文档

参阅 REFERENCE.txt (GitHub链接) 以获取API参考。

贡献/开发

克隆此存储库后，请从以下步骤开始

pip install -r dev-requirements.txt

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