Skip to content

单项选择器 Radio Selection

基于 Quasar 的 QRadio 组件。

选项可以指定为值列表,或作为将值映射到标签的字典。操作选项后,调用 update() 以更新用户界面中的选项。

参数 Param说明 Description
options一个列表 ['value1', ...] 或一个字典(值) {'value1':'label1', ...}
value初始选中的的值
on_change当选中项改变时的回调函数
python
from nicegui import ui

radio1 = ui.radio([1, 2, 3], value=1).props('inline')
radio2 = ui.radio({1: 'A', 2: 'B', 3: 'C'}).props('inline').bind_value(radio1, 'value')

ui.run()

注入任意内容

借助 ui.teleport 元素,您可以为单选按钮选项使用任意内容。

python
from nicegui import ui

options = ['star', 'good', 'love']
radio = ui.radio({x: '' for x in options}, value='star').props('inline')
with ui.teleport(f'#{radio.html_id} > div:nth-child(1) .q-radio__label'):
    ui.icon('star', size='md')
with ui.teleport(f'#{radio.html_id} > div:nth-child(2) .q-radio__label'):
    ui.icon('thumb_up', size='md')
with ui.teleport(f'#{radio.html_id} > div:nth-child(3) .q-radio__label'):
    ui.icon('favorite', size='md')
ui.label().bind_text_from(radio, 'value')

ui.run()
最近更新

更新日期: 2025 年 12 月 17 日