按钮 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 组件。

参数 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()