直接跳到内容

Button 按钮 ​

用于触发操作的交互式按钮组件,支持多种样式变体、扁平样式与禁用状态。

底层:Textual Button

基本用法 ​

下面依次展示标准按钮、禁用按钮、扁平(flat)按钮与禁用的扁平按钮:

事件与动态标签 ​

@click 监听点击,:label 动态绑定按钮文字:

Props ​

属性类型默认值说明
labelstr""按钮显示文字;也可通过默认 slot 内容设置
variantstr"default"样式变体:"default" | "primary" | "success" | "warning" | "error"
disabledboolFalse是否禁用按钮(无需传值,存在即为 True)
flatboolFalse是否使用扁平样式,去掉按钮的立体边框(无需传值,存在即为 True)
compactboolFalse是否使用紧凑样式(无需传值,存在即为 True)

v-model ​

v-model 默认绑定属性:label

vue
<Button v-model="btn_label.value" />

Slot ​

Button 支持 default slot,slot 内容会作为按钮的 label:

vue
<Button @click="on_click()">确认提交</Button>

事件 ​

事件说明
click按钮被点击时触发(对应 Textual Button.Pressed)

通用属性 ​

所有 Textual-vuepy 组件均支持以下属性:

属性类型说明
idstr组件 CSS ID
stylestrTCSS 内联样式
classstrTCSS 类名(空格分隔)
border_titlestr边框标题
border_subtitlestr边框副标题
Button 按钮已经加载完毕