[{"data":1,"prerenderedAt":1069},["ShallowReactive",2],{"content-\u002Fcomponents\u002Fprogress":3,"content-en-fallback-\u002Fcomponents\u002Fprogress":1068},{"id":4,"title":5,"body":6,"description":1059,"extension":1060,"meta":1061,"nav":1062,"navigation":1063,"path":1064,"seo":1065,"stem":1066,"__hash__":1067},"content\u002Fcomponents\u002Fprogress.md","Progress Bar 进度条",{"type":7,"value":8,"toc":1052},"minimark",[9,13,17,29,91,142,146,172,178,298,302,326,352,426,501,505,529,588,591,601,649,653,872,1048],[10,11,5],"h1",{"id":12},"progress-bar-进度条",[14,15,16],"p",{},"Progress Bar 用一条 3px 高的细线指示「正在进行、但不可量化」的操作（不确定态：两条滑块循环滑动），或展示「已知总量」的完成比例（确定态：自左向右按比例填充）。",[14,18,19,20,24,25,28],{},"样式对齐 WinUI 3 \u002F Windows App SDK 的 ProgressBar（",[21,22,23],"code",{},"microsoft-ui-xaml"," ",[21,26,27],{},"winui3\u002Frelease\u002F2.5.1","，已核对与最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 2.0.1 源码逐字节一致）：",[30,31,32,60,82],"ul",{},[33,34,35,39,40,43,44,47,48,51,52,55,56,59],"li",{},[36,37,38],"strong",{},"几何","：控件高 3（",[21,41,42],{},"ProgressBarMinHeight","）、圆角 1.5（",[21,45,46],{},"ProgressBarCornerRadius","）；轨道高 ",[36,49,50],{},"1","（",[21,53,54],{},"ProgressBarTrackHeight","）、圆角 0.5（",[21,57,58],{},"ProgressBarTrackCornerRadius","）并垂直居中——所以「凹槽」看起来比指示条细。",[33,61,62,65,66,69,70,73,74,77,78,81],{},[36,63,64],{},"配色","：填充 ",[21,67,68],{},"AccentFillColorDefaultBrush","；轨道 ",[21,71,72],{},"ControlStrongStrokeColorDefault","；暂停 ",[21,75,76],{},"SystemFillColorCaution","；出错 ",[21,79,80],{},"SystemFillColorCritical","。",[33,83,84,87,88,81],{},[36,85,86],{},"动效","：不确定态 2s \u002F 轮（滑块 1：0→1.5s 从左扫到右后停留；滑块 2：0.75s 后起步，2s 时到右端），",[21,89,90],{},"RepeatBehavior=Forever",[92,93,95,102],"demo-block",{"title":94},"不确定态（正在进行，无法量化）",[96,97,99],"template",{"v-slot:preview":98},"",[100,101],"progress-indeterminate-demo",{},[96,103,104],{"v-slot:code":98},[105,106,110],"pre",{"className":107,"code":108,"language":109,"meta":98,"style":98},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereProgressBar indeterminate label=\"正在进行\" \u002F>\n","vue",[21,111,112],{"__ignoreMap":98},[113,114,117,121,125,129,132,135,139],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"sVt8B","\u003C",[113,122,124],{"class":123},"s9eBZ","FluereProgressBar",[113,126,128],{"class":127},"sScJk"," indeterminate",[113,130,131],{"class":127}," label",[113,133,134],{"class":119},"=",[113,136,138],{"class":137},"sZZnC","\"正在进行\"",[113,140,141],{"class":119}," \u002F>\n",[143,144,145],"h2",{"id":145},"确定态进度",[14,147,148,151,152,155,156,159,160,163,164,167,168,171],{},[21,149,150],{},":indeterminate=\"false\"","（默认）即确定态：填充宽 = ",[21,153,154],{},"(value − min) \u002F (max − min)","，自左向右增长。",[21,157,158],{},"min"," 默认 0、",[21,161,162],{},"max"," 默认 100，",[21,165,166],{},"value"," 自动钳位到该区间；",[21,169,170],{},"max === min"," 时按 WinUI 的分支把填充宽置 0。",[14,173,174,175,81],{},"下面这个示例与 WinUI3 Gallery 的「A determinate progress bar」一致：进度条 + 百分比文本 + 内联 ",[21,176,177],{},"NumberBox",[92,179,181,186],{"title":180},"确定态（用 NumberBox 调整进度）",[96,182,183],{"v-slot:preview":98},[184,185],"progress-determinate-demo",{},[96,187,188],{"v-slot:code":98},[105,189,191],{"className":107,"code":190,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar v-model=\"value\" label=\"确定态进度条示例\" style=\"width: 130px\" \u002F>\n\u003CFluereNumberBox v-model=\"value\" :min=\"0\" :max=\"100\" spin-button-placement-mode=\"inline\" \u002F>\n",[21,192,193,243],{"__ignoreMap":98},[113,194,195,197,199,202,204,207,209,211,213,215,218,221,223,225,229,232,235,239,241],{"class":115,"line":116},[113,196,120],{"class":119},[113,198,124],{"class":123},[113,200,201],{"class":127}," v-model",[113,203,134],{"class":119},[113,205,206],{"class":137},"\"",[113,208,166],{"class":119},[113,210,206],{"class":137},[113,212,131],{"class":127},[113,214,134],{"class":119},[113,216,217],{"class":137},"\"确定态进度条示例\"",[113,219,220],{"class":127}," style",[113,222,134],{"class":119},[113,224,206],{"class":137},[113,226,228],{"class":227},"sj4cs","width",[113,230,231],{"class":119},": ",[113,233,234],{"class":227},"130",[113,236,238],{"class":237},"szBVR","px",[113,240,206],{"class":137},[113,242,141],{"class":119},[113,244,246,248,251,253,255,257,259,261,264,266,268,270,273,275,277,279,281,283,286,288,291,293,296],{"class":115,"line":245},2,[113,247,120],{"class":119},[113,249,250],{"class":123},"FluereNumberBox",[113,252,201],{"class":127},[113,254,134],{"class":119},[113,256,206],{"class":137},[113,258,166],{"class":119},[113,260,206],{"class":137},[113,262,263],{"class":119}," :",[113,265,158],{"class":127},[113,267,134],{"class":119},[113,269,206],{"class":137},[113,271,272],{"class":227},"0",[113,274,206],{"class":137},[113,276,263],{"class":119},[113,278,162],{"class":127},[113,280,134],{"class":119},[113,282,206],{"class":137},[113,284,285],{"class":227},"100",[113,287,206],{"class":137},[113,289,290],{"class":127}," spin-button-placement-mode",[113,292,134],{"class":119},[113,294,295],{"class":137},"\"inline\"",[113,297,141],{"class":119},[143,299,301],{"id":300},"状态running-paused-error","状态：Running \u002F Paused \u002F Error",[14,303,304,305,51,308,311,312,51,315,318,319,51,322,325],{},"WinUI 用两个独立布尔表达异常态：",[21,306,307],{},"showPaused",[21,309,310],{},"ShowPaused","）与 ",[21,313,314],{},"showError",[21,316,317],{},"ShowError","），两者同为真时 ",[36,320,321],{},"error 优先",[21,323,324],{},"ProgressBar.cpp#UpdateStates"," 的判断顺序）。",[30,327,328,337],{},[33,329,330,331,333,334,336],{},"确定态：只改填充色（暂停 → ",[21,332,76],{},"，出错 → ",[21,335,80],{},"），过渡时长 167ms。",[33,338,339,340,343,344,347,348,351],{},"不确定态：退化为「一条 ",[36,341,342],{},"100% 宽","的 paused \u002F error 色指示条从左滑入并停在满格」（WinUI 在 ",[21,345,346],{},"IndeterminatePaused"," \u002F ",[21,349,350],{},"IndeterminateError"," 状态里把第二条滑块宽度设为满宽、位移收到 0），轨道同时隐藏。",[92,353,355,360],{"title":354},"不确定态的三种进度状态（对齐 Gallery 的 Progress state 选项）",[96,356,357],{"v-slot:preview":98},[358,359],"progress-states-demo",{},[96,361,362],{"v-slot:code":98},[105,363,365],{"className":107,"code":364,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar\n  indeterminate\n  :show-paused=\"state === 'paused'\"\n  :show-error=\"state === 'error'\"\n\u002F>\n",[21,366,367,374,379,401,420],{"__ignoreMap":98},[113,368,369,371],{"class":115,"line":116},[113,370,120],{"class":119},[113,372,373],{"class":123},"FluereProgressBar\n",[113,375,376],{"class":115,"line":245},[113,377,378],{"class":127},"  indeterminate\n",[113,380,382,385,388,390,392,395,398],{"class":115,"line":381},3,[113,383,384],{"class":119},"  :",[113,386,387],{"class":127},"show-paused",[113,389,134],{"class":119},[113,391,206],{"class":137},[113,393,394],{"class":119},"state ",[113,396,397],{"class":237},"===",[113,399,400],{"class":137}," 'paused'\"\n",[113,402,404,406,409,411,413,415,417],{"class":115,"line":403},4,[113,405,384],{"class":119},[113,407,408],{"class":127},"show-error",[113,410,134],{"class":119},[113,412,206],{"class":137},[113,414,394],{"class":119},[113,416,397],{"class":237},[113,418,419],{"class":137}," 'error'\"\n",[113,421,423],{"class":115,"line":422},5,[113,424,425],{"class":119},"\u002F>\n",[92,427,429,434],{"title":428},"确定态的 paused \u002F error 填充色",[96,430,431],{"v-slot:preview":98},[432,433],"progress-status-color-demo",{},[96,435,436],{"v-slot:code":98},[105,437,439],{"className":107,"code":438,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar v-model=\"value\" \u002F>\n\u003CFluereProgressBar v-model=\"value\" show-paused \u002F>\n\u003CFluereProgressBar v-model=\"value\" show-error \u002F>\n",[21,440,441,459,480],{"__ignoreMap":98},[113,442,443,445,447,449,451,453,455,457],{"class":115,"line":116},[113,444,120],{"class":119},[113,446,124],{"class":123},[113,448,201],{"class":127},[113,450,134],{"class":119},[113,452,206],{"class":137},[113,454,166],{"class":119},[113,456,206],{"class":137},[113,458,141],{"class":119},[113,460,461,463,465,467,469,471,473,475,478],{"class":115,"line":245},[113,462,120],{"class":119},[113,464,124],{"class":123},[113,466,201],{"class":127},[113,468,134],{"class":119},[113,470,206],{"class":137},[113,472,166],{"class":119},[113,474,206],{"class":137},[113,476,477],{"class":127}," show-paused",[113,479,141],{"class":119},[113,481,482,484,486,488,490,492,494,496,499],{"class":115,"line":381},[113,483,120],{"class":119},[113,485,124],{"class":123},[113,487,201],{"class":127},[113,489,134],{"class":119},[113,491,206],{"class":137},[113,493,166],{"class":119},[113,495,206],{"class":137},[113,497,498],{"class":127}," show-error",[113,500,141],{"class":119},[143,502,504],{"id":503},"轨道色background","轨道色（Background）",[14,506,507,510,511,514,515,517,518,521,522,525,526,528],{},[21,508,509],{},"background-color"," 对应 WinUI ",[21,512,513],{},"ProgressBar.Background","（默认 ",[21,516,72],{},"）。WinUI 该值是",[36,519,520],{},"半透明","的 45% 黑（Light）\u002F 54.5% 白（Dark），Fluent 2 Web 的 token 表里没有同值项，因此本库默认取语义位最近的 ",[21,523,524],{},"colorNeutralStrokeAccessible","；若要严格对齐实机观感，可用 ",[21,527,509],{}," 传入等价半透明色。",[92,530,532,537],{"title":531},"默认轨道色 vs WinUI 原值（45% 黑）",[96,533,534],{"v-slot:preview":98},[535,536],"progress-background-demo",{},[96,538,539],{"v-slot:code":98},[105,540,542],{"className":107,"code":541,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar v-model=\"value\" \u002F>\n\u003CFluereProgressBar v-model=\"value\" background-color=\"rgba(0, 0, 0, 0.45)\" \u002F>\n",[21,543,544,562],{"__ignoreMap":98},[113,545,546,548,550,552,554,556,558,560],{"class":115,"line":116},[113,547,120],{"class":119},[113,549,124],{"class":123},[113,551,201],{"class":127},[113,553,134],{"class":119},[113,555,206],{"class":137},[113,557,166],{"class":119},[113,559,206],{"class":137},[113,561,141],{"class":119},[113,563,564,566,568,570,572,574,576,578,581,583,586],{"class":115,"line":245},[113,565,120],{"class":119},[113,567,124],{"class":123},[113,569,201],{"class":127},[113,571,134],{"class":119},[113,573,206],{"class":137},[113,575,166],{"class":119},[113,577,206],{"class":137},[113,579,580],{"class":127}," background-color",[113,582,134],{"class":119},[113,584,585],{"class":137},"\"rgba(0, 0, 0, 0.45)\"",[113,587,141],{"class":119},[143,589,590],{"id":590},"禁用",[14,592,593,596,597,600],{},[21,594,595],{},"disabled"," 时前景降级为 ",[21,598,599],{},"…Disabled"," 档（本库约定：WinUI 的 ProgressBar 模板里没有 Disabled 视觉态，因为该控件本就不接受交互）。",[92,602,604,609],{"title":603},"禁用状态",[96,605,606],{"v-slot:preview":98},[607,608],"progress-disabled-demo",{},[96,610,611],{"v-slot:code":98},[105,612,614],{"className":107,"code":613,"language":109,"meta":98,"style":98},"\u003CFluereProgressBar v-model=\"value\" disabled \u002F>\n\u003CFluereProgressBar indeterminate disabled \u002F>\n",[21,615,616,637],{"__ignoreMap":98},[113,617,618,620,622,624,626,628,630,632,635],{"class":115,"line":116},[113,619,120],{"class":119},[113,621,124],{"class":123},[113,623,201],{"class":127},[113,625,134],{"class":119},[113,627,206],{"class":137},[113,629,166],{"class":119},[113,631,206],{"class":137},[113,633,634],{"class":127}," disabled",[113,636,141],{"class":119},[113,638,639,641,643,645,647],{"class":115,"line":245},[113,640,120],{"class":119},[113,642,124],{"class":123},[113,644,128],{"class":127},[113,646,634],{"class":127},[113,648,141],{"class":119},[143,650,652],{"id":651},"api","API",[654,655,656,675],"table",{},[657,658,659],"thead",{},[660,661,662,666,669,672],"tr",{},[663,664,665],"th",{},"属性（Props）",[663,667,668],{},"类型",[663,670,671],{},"默认",[663,673,674],{},"说明",[676,677,678,705,725,745,768,790,811,833,850],"tbody",{},[660,679,680,686,691,695],{},[681,682,683],"td",{},[21,684,685],{},"modelValue",[681,687,688],{},[21,689,690],{},"number",[681,692,693],{},[21,694,272],{},[681,696,697,698,701,702],{},"当前进度值（确定态生效，",[21,699,700],{},"v-model","）；对齐 WinUI ",[21,703,704],{},"RangeBase.Value",[660,706,707,711,715,719],{},[681,708,709],{},[21,710,158],{},[681,712,713],{},[21,714,690],{},[681,716,717],{},[21,718,272],{},[681,720,721,722],{},"最小值；对齐 WinUI ",[21,723,724],{},"RangeBase.Minimum",[660,726,727,731,735,739],{},[681,728,729],{},[21,730,162],{},[681,732,733],{},[21,734,690],{},[681,736,737],{},[21,738,285],{},[681,740,741,742],{},"最大值；对齐 WinUI ",[21,743,744],{},"RangeBase.Maximum",[660,746,747,752,757,762],{},[681,748,749],{},[21,750,751],{},"indeterminate",[681,753,754],{},[21,755,756],{},"boolean",[681,758,759],{},[21,760,761],{},"false",[681,763,764,765],{},"不确定态；对齐 WinUI ",[21,766,767],{},"IsIndeterminate",[660,769,770,774,778,782],{},[681,771,772],{},[21,773,314],{},[681,775,776],{},[21,777,756],{},[681,779,780],{},[21,781,761],{},[681,783,784,785,701,787,789],{},"出错态（填充 ",[21,786,80],{},[21,788,317],{},"，优先于 paused",[660,791,792,796,800,804],{},[681,793,794],{},[21,795,307],{},[681,797,798],{},[21,799,756],{},[681,801,802],{},[21,803,761],{},[681,805,806,807,701,809],{},"暂停态（填充 ",[21,808,76],{},[21,810,310],{},[660,812,813,818,823,828],{},[681,814,815],{},[21,816,817],{},"backgroundColor",[681,819,820],{},[21,821,822],{},"string",[681,824,825],{},[21,826,827],{},"—",[681,829,830,831],{},"轨道色（任意 CSS 颜色）；对齐 WinUI ",[21,832,513],{},[660,834,835,839,843,847],{},[681,836,837],{},[21,838,595],{},[681,840,841],{},[21,842,756],{},[681,844,845],{},[21,846,761],{},[681,848,849],{},"禁用（前景降级 …Disabled 档，本库约定）",[660,851,852,857,861,865],{},[681,853,854],{},[21,855,856],{},"label",[681,858,859],{},[21,860,822],{},[681,862,863],{},[21,864,827],{},[681,866,867,868,871],{},"可访问名称（",[21,869,870],{},"aria-label","）",[873,874,875,915,920],"blockquote",{},[14,876,877,880,881,884,885,888,889,892,893,896,897,900,901,903,904,907,908,911,912,914],{},[36,878,879],{},"无障碍","：确定态渲染 ",[21,882,883],{},"role=\"progressbar\""," + ",[21,886,887],{},"aria-valuemin\u002Fvaluemax\u002Faria-valuenow"," + 百分比 ",[21,890,891],{},"aria-valuetext","；不确定态",[36,894,895],{},"不暴露 RangeValue 语义","（对齐 ",[21,898,899],{},"ProgressBarAutomationPeer.GetPatternCore"," 在 ",[21,902,767],{}," 时返回 ",[21,905,906],{},"nullptr","）。WinUI 会在 Error \u002F Paused \u002F Indeterminate 时给可访问名加本地化状态前缀（",[21,909,910],{},"SR_ProgressBarErrorStatus"," 等），本库暂无组件内建文案通道（i18n 属 0.3.0 目标 1.4），需要时请在 ",[21,913,856],{}," 中自行体现。",[14,916,917],{},[36,918,919],{},"实现要点",[30,921,922,950,999,1031,1041],{},[33,923,924,925,51,928,347,931,934,935,938,939,941,942,945,946,949],{},"语义底座复用 reka-ui 的 ",[21,926,927],{},"ProgressRoot",[21,929,930],{},"role",[21,932,933],{},"data-state","），但它的值域固定为 ",[21,936,937],{},"0..max"," 且不允许负 ",[21,940,158],{},"，因此传给它的是",[36,943,944],{},"归一化","值域，",[21,947,948],{},"aria-valuemin\u002Fmax\u002Fnow"," 由组件按 WinUI 原始值域显式覆盖。",[33,951,952,953,956,957,960,961,964,965,968,969,972,973,976,977,51,980,983,984,987,988,51,991,994,995,998],{},"不确定态两条滑块的位移全部来自 ",[21,954,955],{},"ProgressBarTemplateSettings","：以 ",[21,958,959],{},"W"," 为控件宽，",[21,962,963],{},"w₁ = 0.4W","、",[21,966,967],{},"w₂ = 0.6W","；滑块 1 位移 ",[21,970,971],{},"−w₁ → 3w₁","（即自身宽的 ",[21,974,975],{},"−100% → 300%","，1.5s 走完、2s 前保持），滑块 2 位移 ",[21,978,979],{},"−1.5w₂ → 1.66w₂",[21,981,982],{},"−150% → 166%","，0.75s 起走、2s 到达）。XAML 的关键帧缓动是 ",[21,985,986],{},"KeySpline=\"0.4,0,0.6,1\"","（标准 ease-in-out），Fluent token 表无同值项，取语义位最近的 ",[21,989,990],{},"--curveEasyEase",[21,992,993],{},"0.33,0,0.67,1","）：冻结帧 7 点采样实测最大偏差 ",[36,996,997],{},"5.64px \u002F 246.5px 行程 ≈ 2.3%","，仅影响 tween 曲线，首尾位置与 WinUI 完全一致。",[33,1000,1001,1002,1005,1006,1009,1010,1013,1014,1017,1018,1020,1021,1023,1024,884,1027,1030],{},"确定态的填充是",[36,1003,1004],{},"像素宽","（WinUI 直接设 ",[21,1007,1008],{},"Width","），本库以百分比等价表达；值变化时的补间在 WinUI 侧走 ",[21,1011,1012],{},"Updating → Determinate"," 的 ",[21,1015,1016],{},"RepositionThemeAnimation","（未显式给 Duration，默认时长不在 ",[21,1019,23],{}," 快照内，取不到 A 级证据），本库用 ",[21,1022,228],{}," 过渡（",[21,1025,1026],{},"durationNormal",[21,1028,1029],{},"curveEasyEase","）表达同一意图。",[33,1032,1033,1034,1037,1038,81],{},"暂停 \u002F 出错的变色是 XAML 里显式的 ",[21,1035,1036],{},"ColorAnimation Duration=\"0:0:0.167\"","，本库按仓库对 167ms 的统一近似取 ",[21,1039,1040],{},"--durationFast",[33,1042,1043,1044,1047],{},"动效遵循 ",[21,1045,1046],{},"prefers-reduced-motion","：关闭时不确定态留下「一条 40% 宽的静态指示条停在左端」，paused \u002F error 停在满格终态，不会出现空白条。",[1049,1050,1051],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":98,"searchDepth":245,"depth":245,"links":1053},[1054,1055,1056,1057,1058],{"id":145,"depth":245,"text":145},{"id":300,"depth":245,"text":301},{"id":503,"depth":245,"text":504},{"id":590,"depth":245,"text":590},{"id":651,"depth":245,"text":652},"线性进度指示：不确定（滑块循环）与确定（按比例填充）两种形态，样式还原 WinUI 3 ProgressBar。","md",{},{"title":5},true,"\u002Fcomponents\u002Fprogress",{"title":5,"description":1059},"components\u002Fprogress","gNu69UzXkpOaYnB_SP1xhFAfNKM3iDY17WLwOCD-yGs",null,1791802960999]