QtShadcn
组件

ShadcnButton

按钮:6 variant × 5 size,支持 loading / 图标 / 键盘焦点环。

基于 QQC.Button(Basic style),只替换视觉与 API,保留键盘导航 / Focus / 无障碍。

用法

ShadcnButton {
    text: qsTr("Deploy")
    variant: ShadcnButton.Variant.Primary   // Primary / Secondary / Outline / Ghost / Destructive / Link
    size: ShadcnButton.Size.Medium          // ExtraSmall / Small / Medium / Large / Icon
    iconName: ""                            // 可选:lucide 图标(显示在文本左侧)
    loading: false
    onClicked: console.log("clicked")
}

属性

属性类型说明
variantenumVariant.Primary 实心主色 / Secondary 次色 / Outline 描边 / Ghost 幽灵 / Destructive 危险 / Link 链接(hover 下划线)
sizeenumExtraSmall(32) / Small(36) / Medium(40) / Large(44) / Icon(40),对齐 shadcn/ui
iconNamestringlucide 图标名(见 IconRegistry.names),16px 随文字色
loadingbool显示 Spinner 并禁用交互,文字半透明
enabledbool继承 QQC,禁用态整体 50% 透明度

状态

  • hover:primary 等实心变体按亮度混入背景色(等效 shadcn hover:bg-*/90);outline/ghost hover 用 accent 底 + accentForeground 字
  • pressed:混合比例加重
  • focus:Tab 可达,3px ring 焦点环
  • 组合:配合 ShadcnButtonGroup 自动合并边框

示例

Row {
    spacing: theme.spacingSm
    ShadcnButton { text: qsTr("新建"); iconName: "plus" }
    ShadcnButton { text: qsTr("导出"); variant: ShadcnButton.Variant.Outline; iconName: "download" }
    ShadcnButton { text: qsTr("删除"); variant: ShadcnButton.Variant.Destructive; iconName: "trash-2" }
    ShadcnButton { text: qsTr("保存中"); loading: true }
}
Copyright © 2026