[{"data":1,"prerenderedAt":749},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-usage":56,"-getting-started-usage-surround":744},[4,36,46],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":35},"快速开始","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25,30],{"title":11,"path":12,"stem":13,"icon":14},"简介","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"安装与构建","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"如何使用","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-play",{"title":26,"path":27,"stem":28,"icon":29},"项目结构","\u002Fgetting-started\u002Fproject-structure","1.getting-started\u002F4.project-structure","i-lucide-folder-tree",{"title":31,"path":32,"stem":33,"icon":34},"里程碑","\u002Fgetting-started\u002Fmilestones","1.getting-started\u002F5.milestones","i-lucide-map",false,{"title":37,"icon":38,"path":39,"stem":40,"children":41,"page":35},"设计","i-lucide-drafting-compass","\u002Fdesign","2.design",[42],{"title":43,"path":44,"stem":45,"icon":38},"技术方案","\u002Fdesign\u002Ftechnical-design","2.design\u002F1.technical-design",{"title":47,"icon":48,"path":49,"stem":50,"children":51,"page":35},"开发","i-lucide-puzzle","\u002Fdevelopment","3.development",[52],{"title":53,"path":54,"stem":55,"icon":48},"组件开发流程","\u002Fdevelopment\u002Fcomponent-workflow","3.development\u002F1.component-workflow",{"id":57,"title":21,"body":58,"description":737,"extension":738,"links":739,"meta":740,"navigation":741,"path":22,"seo":742,"stem":23,"__hash__":743},"docs\u002F1.getting-started\u002F3.usage.md",{"type":59,"value":60,"toc":728},"minimark",[61,64,69,73,90,94,105,226,233,351,361,365,404,442,446,475,478,482,567,571,580,590,594,724],[62,63,21],"h1",{"id":21},[65,66,68],"h2",{"id":67},"_1-引入模块","1. 引入模块",[70,71,72],"p",{},"QML 侧只需一行 import，组件与主题即可使用：",[74,75,80],"pre",{"className":76,"code":77,"language":78,"meta":79,"style":79},"language-qml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import QtShadcn\n","qml","",[81,82,83],"code",{"__ignoreMap":79},[84,85,88],"span",{"class":86,"line":87},"line",1,[84,89,77],{},[65,91,93],{"id":92},"_2-主题接入必做","2. 主题接入（必做）",[70,95,96,97,100,101,104],{},"任何使用组件的页面\u002F窗口先放一个 ",[81,98,99],{},"QtShadcnTheme","（声明式入口，绑定 C++ ",[81,102,103],{},"ThemeManager"," 的 token 字典）：",[74,106,108],{"className":76,"code":107,"language":78,"meta":79,"style":79},"import QtQuick\nimport QtQuick.Controls as QQC\nimport QtShadcn\n\nWindow {\n    id: root\n    width: 640\n    height: 480\n    visible: true\n\n    QtShadcnTheme { id: theme }\n\n    color: theme.background   \u002F\u002F 窗口底色跟主题走\n\n    QQC.Button {\n        anchors.centerIn: parent\n        text: qsTr(\"点击\")\n        onClicked: theme.mode = theme.mode === \"dark\" ? \"light\" : \"dark\"\n    }\n}\n",[81,109,110,115,121,126,133,139,145,151,157,163,168,174,179,185,190,196,202,208,214,220],{"__ignoreMap":79},[84,111,112],{"class":86,"line":87},[84,113,114],{},"import QtQuick\n",[84,116,118],{"class":86,"line":117},2,[84,119,120],{},"import QtQuick.Controls as QQC\n",[84,122,124],{"class":86,"line":123},3,[84,125,77],{},[84,127,129],{"class":86,"line":128},4,[84,130,132],{"emptyLinePlaceholder":131},true,"\n",[84,134,136],{"class":86,"line":135},5,[84,137,138],{},"Window {\n",[84,140,142],{"class":86,"line":141},6,[84,143,144],{},"    id: root\n",[84,146,148],{"class":86,"line":147},7,[84,149,150],{},"    width: 640\n",[84,152,154],{"class":86,"line":153},8,[84,155,156],{},"    height: 480\n",[84,158,160],{"class":86,"line":159},9,[84,161,162],{},"    visible: true\n",[84,164,166],{"class":86,"line":165},10,[84,167,132],{"emptyLinePlaceholder":131},[84,169,171],{"class":86,"line":170},11,[84,172,173],{},"    QtShadcnTheme { id: theme }\n",[84,175,177],{"class":86,"line":176},12,[84,178,132],{"emptyLinePlaceholder":131},[84,180,182],{"class":86,"line":181},13,[84,183,184],{},"    color: theme.background   \u002F\u002F 窗口底色跟主题走\n",[84,186,188],{"class":86,"line":187},14,[84,189,132],{"emptyLinePlaceholder":131},[84,191,193],{"class":86,"line":192},15,[84,194,195],{},"    QQC.Button {\n",[84,197,199],{"class":86,"line":198},16,[84,200,201],{},"        anchors.centerIn: parent\n",[84,203,205],{"class":86,"line":204},17,[84,206,207],{},"        text: qsTr(\"点击\")\n",[84,209,211],{"class":86,"line":210},18,[84,212,213],{},"        onClicked: theme.mode = theme.mode === \"dark\" ? \"light\" : \"dark\"\n",[84,215,217],{"class":86,"line":216},19,[84,218,219],{},"    }\n",[84,221,223],{"class":86,"line":222},20,[84,224,225],{},"}\n",[70,227,228,232],{},[229,230,231],"strong",{},"Theme 属性一览","（全部只读，组件直接绑定）：",[234,235,236,249],"table",{},[237,238,239],"thead",{},[240,241,242,246],"tr",{},[243,244,245],"th",{},"类别",[243,247,248],{},"属性",[250,251,252,303,314,336],"tbody",{},[240,253,254,258],{},[255,256,257],"td",{},"颜色",[255,259,260,263,264,263,267,263,270,263,273,263,276,263,279,263,282,263,285,263,288,263,291,263,294,263,297,263,300],{},[81,261,262],{},"background"," ",[81,265,266],{},"foreground",[81,268,269],{},"primary",[81,271,272],{},"primaryForeground",[81,274,275],{},"secondary",[81,277,278],{},"secondaryForeground",[81,280,281],{},"muted",[81,283,284],{},"mutedForeground",[81,286,287],{},"accent",[81,289,290],{},"accentForeground",[81,292,293],{},"destructive",[81,295,296],{},"destructiveForeground",[81,298,299],{},"border",[81,301,302],{},"ring",[240,304,305,308],{},[255,306,307],{},"形状",[255,309,310,313],{},[81,311,312],{},"radius","（全局圆角）",[240,315,316,319],{},[255,317,318],{},"间距",[255,320,321,263,324,263,327,263,330,263,333],{},[81,322,323],{},"spacingXs",[81,325,326],{},"spacingSm",[81,328,329],{},"spacingMd",[81,331,332],{},"spacingLg",[81,334,335],{},"spacingXl",[240,337,338,341],{},[255,339,340],{},"原始字典",[255,342,343,346,347,350],{},[81,344,345],{},"tokens","（动态索引，如 ",[81,348,349],{},"theme.tokens[\"primary\"]","）",[70,352,353,356,357,360],{},[229,354,355],{},"切换明暗","：",[81,358,359],{},"theme.mode = \"dark\""," → 全局随动，所有绑定自动刷新。",[65,362,364],{"id":363},"_3-shadcnbutton","3. ShadcnButton",[74,366,368],{"className":76,"code":367,"language":78,"meta":79,"style":79},"ShadcnButton {\n    text: qsTr(\"Deploy\")\n    variant: ShadcnButton.Variant.Primary  \u002F\u002F Primary \u002F Secondary \u002F Outline \u002F Ghost \u002F Destructive \u002F Link\n    size: ShadcnButton.Size.Medium         \u002F\u002F ExtraSmall \u002F Small \u002F Medium \u002F Large \u002F Icon\n    loading: false\n    onClicked: console.log(\"clicked\")\n}\n",[81,369,370,375,380,385,390,395,400],{"__ignoreMap":79},[84,371,372],{"class":86,"line":87},[84,373,374],{},"ShadcnButton {\n",[84,376,377],{"class":86,"line":117},[84,378,379],{},"    text: qsTr(\"Deploy\")\n",[84,381,382],{"class":86,"line":123},[84,383,384],{},"    variant: ShadcnButton.Variant.Primary  \u002F\u002F Primary \u002F Secondary \u002F Outline \u002F Ghost \u002F Destructive \u002F Link\n",[84,386,387],{"class":86,"line":128},[84,388,389],{},"    size: ShadcnButton.Size.Medium         \u002F\u002F ExtraSmall \u002F Small \u002F Medium \u002F Large \u002F Icon\n",[84,391,392],{"class":86,"line":135},[84,393,394],{},"    loading: false\n",[84,396,397],{"class":86,"line":141},[84,398,399],{},"    onClicked: console.log(\"clicked\")\n",[84,401,402],{"class":86,"line":147},[84,403,225],{},[405,406,407,414,420,426,436],"ul",{},[408,409,410,413],"li",{},[229,411,412],{},"variant × size 对照","：Primary 实心主色、Secondary 次色、Outline 描边、Ghost 幽灵、Destructive 危险、Link 链接（hover 下划线）",[408,415,416,419],{},[229,417,418],{},"尺寸","：XS=32 \u002F Small=36 \u002F Medium=40 \u002F Large=44 \u002F Icon=40（对齐 shadcn\u002Fui）",[408,421,422,425],{},[229,423,424],{},"loading","：显示 Spinner 且禁用交互，文字半透明",[408,427,428,431,432,435],{},[229,429,430],{},"disabled","：继承 QQC ",[81,433,434],{},"enabled"," 属性，禁用态整体 50% 透明度",[408,437,438,441],{},[229,439,440],{},"键盘焦点","：Tab 可达，聚焦显示 ring 焦点环（继承 QQC Button 行为）",[65,443,445],{"id":444},"_4-shadcnbuttongroup按钮组","4. ShadcnButtonGroup（按钮组）",[74,447,449],{"className":76,"code":448,"language":78,"meta":79,"style":79},"ShadcnButtonGroup {\n    ShadcnButton { text: qsTr(\"A\"); variant: ShadcnButton.Variant.Primary }\n    ShadcnButton { text: qsTr(\"B\"); variant: ShadcnButton.Variant.Primary }\n    ShadcnButton { text: qsTr(\"C\"); variant: ShadcnButton.Variant.Primary }\n}\n",[81,450,451,456,461,466,471],{"__ignoreMap":79},[84,452,453],{"class":86,"line":87},[84,454,455],{},"ShadcnButtonGroup {\n",[84,457,458],{"class":86,"line":117},[84,459,460],{},"    ShadcnButton { text: qsTr(\"A\"); variant: ShadcnButton.Variant.Primary }\n",[84,462,463],{"class":86,"line":123},[84,464,465],{},"    ShadcnButton { text: qsTr(\"B\"); variant: ShadcnButton.Variant.Primary }\n",[84,467,468],{"class":86,"line":128},[84,469,470],{},"    ShadcnButton { text: qsTr(\"C\"); variant: ShadcnButton.Variant.Primary }\n",[84,472,473],{"class":86,"line":135},[84,474,225],{},[70,476,477],{},"组内按钮自动合并边框、只留两端圆角；无 border 的 variant（如 Primary）中间自动加 1px 分隔线。",[65,479,481],{"id":480},"_5-shadcntoggle-shadcntogglegroup切换按钮","5. ShadcnToggle \u002F ShadcnToggleGroup（切换按钮）",[74,483,485],{"className":76,"code":484,"language":78,"meta":79,"style":79},"\u002F\u002F 独立切换（outline 样式 + checkable，选中时 accent 背景）\nShadcnToggle { text: qsTr(\"粗体\") }\nShadcnToggle { text: qsTr(\"斜体\"); checked: true }\n\n\u002F\u002F 多选组\nShadcnToggleGroup {\n    ShadcnToggle { text: qsTr(\"左\") }\n    ShadcnToggle { text: qsTr(\"中\"); checked: true }\n    ShadcnToggle { text: qsTr(\"右\") }\n}\n\n\u002F\u002F 单选组（exclusive: true）\nShadcnToggleGroup {\n    exclusive: true\n    ShadcnToggle { text: qsTr(\"单选 1\"); checked: true }\n    ShadcnToggle { text: qsTr(\"单选 2\") }\n}\n",[81,486,487,492,497,502,506,511,516,521,526,531,535,539,544,548,553,558,563],{"__ignoreMap":79},[84,488,489],{"class":86,"line":87},[84,490,491],{},"\u002F\u002F 独立切换（outline 样式 + checkable，选中时 accent 背景）\n",[84,493,494],{"class":86,"line":117},[84,495,496],{},"ShadcnToggle { text: qsTr(\"粗体\") }\n",[84,498,499],{"class":86,"line":123},[84,500,501],{},"ShadcnToggle { text: qsTr(\"斜体\"); checked: true }\n",[84,503,504],{"class":86,"line":128},[84,505,132],{"emptyLinePlaceholder":131},[84,507,508],{"class":86,"line":135},[84,509,510],{},"\u002F\u002F 多选组\n",[84,512,513],{"class":86,"line":141},[84,514,515],{},"ShadcnToggleGroup {\n",[84,517,518],{"class":86,"line":147},[84,519,520],{},"    ShadcnToggle { text: qsTr(\"左\") }\n",[84,522,523],{"class":86,"line":153},[84,524,525],{},"    ShadcnToggle { text: qsTr(\"中\"); checked: true }\n",[84,527,528],{"class":86,"line":159},[84,529,530],{},"    ShadcnToggle { text: qsTr(\"右\") }\n",[84,532,533],{"class":86,"line":165},[84,534,225],{},[84,536,537],{"class":86,"line":170},[84,538,132],{"emptyLinePlaceholder":131},[84,540,541],{"class":86,"line":176},[84,542,543],{},"\u002F\u002F 单选组（exclusive: true）\n",[84,545,546],{"class":86,"line":181},[84,547,515],{},[84,549,550],{"class":86,"line":187},[84,551,552],{},"    exclusive: true\n",[84,554,555],{"class":86,"line":192},[84,556,557],{},"    ShadcnToggle { text: qsTr(\"单选 1\"); checked: true }\n",[84,559,560],{"class":86,"line":198},[84,561,562],{},"    ShadcnToggle { text: qsTr(\"单选 2\") }\n",[84,564,565],{"class":86,"line":204},[84,566,225],{},[65,568,570],{"id":569},"_6-shadcnspinner加载指示器","6. ShadcnSpinner（加载指示器）",[74,572,574],{"className":76,"code":573,"language":78,"meta":79,"style":79},"ShadcnSpinner { width: 14; height: 14; color: theme.foreground }\n",[81,575,576],{"__ignoreMap":79},[84,577,578],{"class":86,"line":87},[84,579,573],{},[70,581,582,585,586,589],{},[81,583,584],{},"ShadcnButton"," 的 ",[81,587,588],{},"loading: true"," 内部即用它。",[65,591,593],{"id":592},"完整示例组合用法","完整示例（组合用法）",[74,595,597],{"className":76,"code":596,"language":78,"meta":79,"style":79},"import QtQuick\nimport QtQuick.Layouts\nimport QtShadcn\n\nRectangle {\n    color: theme.background\n\n    QtShadcnTheme { id: theme }\n\n    ColumnLayout {\n        spacing: theme.spacingMd\n        anchors.centerIn: parent\n\n        ShadcnCard { \u002F* M3 落地后：卡片容器 *\u002F }\n\n        RowLayout {\n            spacing: theme.spacingSm\n            ShadcnButton { text: qsTr(\"新建\"); onClicked: doCreate() }\n            ShadcnButton {\n                text: qsTr(\"提交\")\n                variant: ShadcnButton.Variant.Outline\n                loading: busy\n            }\n        }\n    }\n}\n",[81,598,599,603,608,612,616,621,626,630,634,638,643,648,652,656,661,665,670,675,680,685,690,696,702,708,714,719],{"__ignoreMap":79},[84,600,601],{"class":86,"line":87},[84,602,114],{},[84,604,605],{"class":86,"line":117},[84,606,607],{},"import QtQuick.Layouts\n",[84,609,610],{"class":86,"line":123},[84,611,77],{},[84,613,614],{"class":86,"line":128},[84,615,132],{"emptyLinePlaceholder":131},[84,617,618],{"class":86,"line":135},[84,619,620],{},"Rectangle {\n",[84,622,623],{"class":86,"line":141},[84,624,625],{},"    color: theme.background\n",[84,627,628],{"class":86,"line":147},[84,629,132],{"emptyLinePlaceholder":131},[84,631,632],{"class":86,"line":153},[84,633,173],{},[84,635,636],{"class":86,"line":159},[84,637,132],{"emptyLinePlaceholder":131},[84,639,640],{"class":86,"line":165},[84,641,642],{},"    ColumnLayout {\n",[84,644,645],{"class":86,"line":170},[84,646,647],{},"        spacing: theme.spacingMd\n",[84,649,650],{"class":86,"line":176},[84,651,201],{},[84,653,654],{"class":86,"line":181},[84,655,132],{"emptyLinePlaceholder":131},[84,657,658],{"class":86,"line":187},[84,659,660],{},"        ShadcnCard { \u002F* M3 落地后：卡片容器 *\u002F }\n",[84,662,663],{"class":86,"line":192},[84,664,132],{"emptyLinePlaceholder":131},[84,666,667],{"class":86,"line":198},[84,668,669],{},"        RowLayout {\n",[84,671,672],{"class":86,"line":204},[84,673,674],{},"            spacing: theme.spacingSm\n",[84,676,677],{"class":86,"line":210},[84,678,679],{},"            ShadcnButton { text: qsTr(\"新建\"); onClicked: doCreate() }\n",[84,681,682],{"class":86,"line":216},[84,683,684],{},"            ShadcnButton {\n",[84,686,687],{"class":86,"line":222},[84,688,689],{},"                text: qsTr(\"提交\")\n",[84,691,693],{"class":86,"line":692},21,[84,694,695],{},"                variant: ShadcnButton.Variant.Outline\n",[84,697,699],{"class":86,"line":698},22,[84,700,701],{},"                loading: busy\n",[84,703,705],{"class":86,"line":704},23,[84,706,707],{},"            }\n",[84,709,711],{"class":86,"line":710},24,[84,712,713],{},"        }\n",[84,715,717],{"class":86,"line":716},25,[84,718,219],{},[84,720,722],{"class":86,"line":721},26,[84,723,225],{},[725,726,727],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":79,"searchDepth":117,"depth":117,"links":729},[730,731,732,733,734,735,736],{"id":67,"depth":117,"text":68},{"id":92,"depth":117,"text":93},{"id":363,"depth":117,"text":364},{"id":444,"depth":117,"text":445},{"id":480,"depth":117,"text":481},{"id":569,"depth":117,"text":570},{"id":592,"depth":117,"text":593},"主题接入与各组件用法示例。","md",null,{},{"icon":24},{"title":21,"description":737},"0fSf_d5xYFsIwSs_zcEIE7_jrHq8xV76AjqETK36A6Q",[745,747],{"title":16,"path":17,"stem":18,"description":746,"icon":19,"children":-1},"克隆、构建并运行 QtShadcn showcase。",{"title":26,"path":27,"stem":28,"description":748,"icon":29,"children":-1},"仓库目录结构与 QML 模块约定。",1787050744383]