按钮 Button
此元素基于 Quasar 的 QBtn 组件。
color 参数接受 Quasar 颜色、 Tailwind 颜色或 CSS 颜色。如果使用 Quasar 颜色,按钮将根据 Quasar 主题(包括文本颜色)设置样式。在“red”这样既是 Quasar 又是CSS的颜色,这种情况下,NiceGUI 将使用 Quasar 颜色。
参数 Param | 说明 Description |
---|---|
text | 按钮上显示的文字 |
on_click | 当按下按钮时调用的回调函数 |
color | 按钮的颜色(背景色,译者注) 支持的类型:Quasar、Tailwind、CSS颜色或None 默认值:'primary' |
icon | 显示在按钮上的图标的名称 默认值:None |
from nicegui import ui
ui.button('Click me!', on_click=lambda: ui.notify('You clicked me!'))
ui.run()
按钮组 Button Group
此元素基于 Quasar 的 QBtnGroup 组件。
您必须在父按钮组和子按钮上使用相同的设计属性。
from nicegui import ui
with ui.button_group():
ui.button('One', on_click=lambda: ui.notify('You clicked Button 1!'))
ui.button('Two', on_click=lambda: ui.notify('You clicked Button 2!'))
ui.button('Three', on_click=lambda: ui.notify('You clicked Button 3!'))
ui.run()
下拉按钮 Dropdown Button
此元素基于 Quasar 的 QBtnDropDown 组件。
color 参数接受 Quasar 颜色、 Tailwind 颜色或 CSS 颜色。如果使用 Quasar 颜色,按钮将根据 Quasar 主题(包括文本颜色)设置样式。在“red”这样既是 Quasar 又是CSS的颜色,这种情况下,NiceGUI 将使用 Quasar 颜色。
参数 Param | 说明 Description |
---|---|
text | 按钮上的文字 |
value | 下拉菜单是否打开 默认值:False |
on_value_change | 当值改变时调用的回调函数 |
on_click | 当按下按钮时调用的回调函数 |
color | 按钮的颜色(背景色,译者注) 支持的类型:Quasar、Tailwind、CSS颜色或None 默认值:'primary' |
icon | 显示在按钮上的图标的名称 默认值:None |
auto_close | 当下拉菜单中的内容被点击时是否自动关闭 默认值:False |
split | 是否将下拉图标拆分为一个单独的按钮 默认值:False |
from nicegui import ui
with ui.dropdown_button('Open me!', auto_close=True):
ui.item('Item 1', on_click=lambda: ui.notify('You clicked item 1'))
ui.item('Item 2', on_click=lambda: ui.notify('You clicked item 2'))
ui.run()
徽标数 Bagde
此元素基于 Quasar 的 QBadge 徽标组件。
参数 Param | 说明 Description |
---|---|
text | 徽标上显示的文本 |
color | 背景色 支持的类型:Quasar、Tailwind、CSS颜色或None 默认值:'primary' |
text_color | 文本色 支持的类型:Quasar、Tailwind、CSS颜色或None 默认值:None |
outline | 使用轮廓线样式(只有彩色边框和文本) 默认值:False |
from nicegui import ui
with ui.button('Click me!', on_click=lambda: badge.set_text(int(badge.text) + 1)):
badge = ui.badge('0', color='red').props('floating')
ui.run()
标签 Chip
此元素基于 Quasar 的 QChip 组件。它可以被点击、被选择和被移除。
参数 Param | 说明 Description |
---|---|
text | 标签上需要显示的文字 默认值:"" |
icon | 标签上需要现实的图标的名字 默认值:None |
color | 背景色 支持的类型:Quasar、Tailwind、CSS颜色或None 默认值:'primary' |
text_color | 文本色 支持的类型:Quasar、Tailwind、CSS颜色或None 默认值:None |
on_click | 当按下按钮时调用的回调函数 |
selectable | 设置此标签是否为可选择标签 默认值:False |
selected | 设置此标签是否被选中 默认值:False |
on_selection_change | 当标签选中状态改变时调用的回调函数 |
removable | 设置此标签是否可被删除 如果是,将会显示一个小小的“x”按钮 默认值:False |
on_value_change | 当标签被移除或未移除时调用的回调函数 |
from nicegui import ui
with ui.row().classes('gap-1'):
ui.chip('Click me', icon='ads_click', on_click=lambda: ui.notify('Clicked'))
ui.chip('Selectable', selectable=True, icon='bookmark', color='orange')
ui.chip('Removable', removable=True, icon='label', color='indigo-3')
ui.chip('Styled', icon='star', color='green').props('outline square')
ui.chip('Disabled', icon='block', color='red').set_enabled(False)
ui.run()
选择器 Toggle
此元素基于 Quasar 的 QBtnToggle 组件。
选项可以指定为值的列表,也可以指定为值到标签的映射字典。操作选项后,调用update()
来更新UI中的选项。
参数 Param | 说明 Description |
---|---|
options | 选择器的所有选项 可以传入一个列表 ['值1', ...] 或者一个字典{'值1', '标签1', ...} |
value | 默认选中的值 |
on_change | 当选中值改变时调用的回调函数 |
clearable | 是否可以通过单击选中的选项来清除选中 |
from nicegui import ui
toggle1 = ui.toggle([1, 2, 3], value=1)
toggle2 = ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(toggle1, 'value')
ui.run()
广播按钮 Radio Selection
此元素基于 Quasar 的 QRadio 组件。
选项可以指定为值的列表,也可以指定为值到标签的映射字典。操作选项后,调用 update() 来更新UI中的选项。
参数 Param | 说明 Description |
---|---|
options | 选择器的所有选项 可以传入一个列表 ['值1', ...] 或者一个字典{'值1', '标签1', ...} |
value | 默认选中的值 |
on_change | 当选中值改变时调用的回调函数 |
clearable | 是否可以通过单击选中的选项来清除选中 |
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()
下拉选择器 Dropdown Selection
此元素基于 Quasar 的 QSelect 组件。
选项可以指定为值的列表,也可以指定为值到标签的映射字典。操作选项后,调用 update() 来更新UI中的选项。
如果 with_input
为True,则显示一个输入字段来过滤选项。
如果 new_value_mode
不为 None ,则意味着with_input=True
,用户可以在输入框中输入新值。详情请参阅类星体的文档。注意,当以编程方式设置 value 属性时,这种模式是无效的。
你可以使用validation参数来定义一个验证规则字典,例如{'Too long!': lambda value: len(value) < 3}
。第一个规则失败的键将显示为错误消息。或者,你可以传递一个返回可选错误消息的callable对象。要禁用每次值更改时的自动验证,可以使用without_auto_validation
方法。
参数 Param | 说明 Description |
---|---|
options | 选择器的所有选项 可以传入一个列表 ['值1', ...] 或者一个字典{'值1', '标签1', ...} |
label | 显示在选择器上方的内容 |
value | 选择器的默认值 |
on_change | 当选择器的值改变时调用的回调函数 |
with_input | 是否显示一个输入字段来过滤选项 默认值:否(译者注) |
new_value_mode | 处理用户输入的新值 默认值:None,即没有新值 |
multiple | 是否允许多选 默认值:不允许(译者注) |
clearable | 是否添加一个按钮来清除选中值 默认值:否(译者注) |
validation | 验证规则字典或返回可选错误消息的可调用对象 默认值:None,表示没有验证 |
key_generator | 用于为新值生成字典键的回调或迭代器 |
from nicegui import ui
select1 = ui.select([1, 2, 3], value=1)
select2 = ui.select({1: 'One', 2: 'Two', 3: 'Three'}).bind_value(select1, 'value')
ui.run()