PageSourceSearch

https://antblazor.com/en-US/docs/

html antblazor.com collected 2026-09-25 19:43:34 UTC 43,628 bytes, 816 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head>
2    <meta charset="UTF-8"/>
3    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
4    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
5    <meta no-antblazor-css=""/>
6    <title>Ant Design Blazor</title>
7    <meta name="author" content="James Yeung"/>
8    <meta name="description" content="🌈A set of enterprise-class UI components based on Ant Design and Blazor WebAssembly."/>
9    <base href="/"/>
10    <link rel="icon" href="logo.png" type="image/x-icon"/>
11    <link rel="preconnect" href="https://C9UTAZSOWW-dsn.algolia.net" crossorigin=""/>
12    <link href="_framework/dotnet.tr8sl344yl.js" rel="preload" as="script" fetchpriority="high" crossorigin="anonymous" integrity="sha256-l4NGuENVp1W++8ptxhLGSBK0fFsiIKeVBzS8nMnh8As="/>
13    
13<script type="importmap">{
14  "imports": {
15    "./_content/AntDesign/AntDesign.lib.module.js": "./_content/AntDesign/AntDesign.d05dnpfa5s.lib.module.js",
16    "./_framework/blazor.webassembly.js": "./_framework/blazor.webassembly.66stpp682q.js",
17    "./_framework/dotnet.native.js": "./_framework/dotnet.native.7scob56l4g.js",
18    "./_framework/dotnet.runtime.js": "./_framework/dotnet.runtime.v06hirbjsv.js",
19    "./_framework/dotnet.js": "./_framework/dotnet.tr8sl344yl.js"
20  },
21  "scopes": {},
22  "integrity": {
23    "./_content/AntDesign/AntDesign.d05dnpfa5s.lib.module.js": "sha256-Y7oJ7/rOncGnhfBrDAPc045cW9bF4cp1INbpZClDsxM=",
24    "./_content/AntDesign/AntDesign.lib.module.js": "sha256-Y7oJ7/rOncGnhfBrDAPc045cW9bF4cp1INbpZClDsxM=",
25    "./_framework/blazor.webassembly.66stpp682q.js": "sha256-3lCWrko3zwspV40aQhs2S/IMkRSarnHRKIdkHhuXIBA=",
26    "./_framework/blazor.webassembly.js": "sha256-3lCWrko3zwspV40aQhs2S/IMkRSarnHRKIdkHhuXIBA=",
27    "./_framework/dotnet.js": "sha256-l4NGuENVp1W++8ptxhLGSBK0fFsiIKeVBzS8nMnh8As=",
28    "./_framework/dotnet.native.7scob56l4g.js": "sha256-txVqGukeotsUxdWCb27Ve8JjSkswrs7+60ZyLfq1nks=",
29    "./_framework/dotnet.native.js": "sha256-txVqGukeotsUxdWCb27Ve8JjSkswrs7+60ZyLfq1nks=",
30    "./_framework/dotnet.runtime.js": "sha256-QbnqrZGHtGq7wudS17/AYEPpH9JkphrsyVllD6JHmds=",
31    "./_framework/dotnet.runtime.v06hirbjsv.js": "sha256-QbnqrZGHtGq7wudS17/AYEPpH9JkphrsyVllD6JHmds=",
32    "./_framework/dotnet.tr8sl344yl.js": "sha256-l4NGuENVp1W++8ptxhLGSBK0fFsiIKeVBzS8nMnh8As="
33  }
34}</script>
34
35    <link href="_content/AntDesign.Docs/css/default.css?v=doc-fix" rel="stylesheet"/>
36    <link href="manifest.json" rel="manifest"/>
37
38
39
40<!-- %%-PRERENDERING-HEADOUTLET-BEGIN-%% -->
41
42<!-- %%-PRERENDERING-HEADOUTLET-END-%% -->
43</head>
44
45<body>
46    <noscript>Out-of-the-box mid-stage front/design solution!</noscript>
47    <app>
48        <div id="root">
49            <style>
50                html,
51                body,
52                #root {
53                    height: 100%;
54                    margin: 0;
55                    padding: 0;
56                }
57
58                #root {
59                    /* background-image: url("_content/AntDesign.Docs/home_bg.png"); */
60                    background-repeat: no-repeat;
61                    background-size: 100% auto;
62                }
63
64                .page-loading-warp {
65                    padding: 98px;
66                    display: flex;
67                    justify-content: center;
68                    align-items: center;
69                }
70
71                .ant-spin {
72                    -webkit-box-sizing: border-box;
73                    box-sizing: border-box;
74                    margin: 0;
75                    padding: 0;
76                    color: rgba(0, 0, 0, 0.65);
77                    font-size: 14px;
78                    font-variant: tabular-nums;
79                    line-height: 1.5;
80                    list-style: none;
81                    -webkit-font-feature-settings: 'tnum';
82                    font-feature-settings: 'tnum';
83                    position: absolute;
84                    display: none;
85                    color: #1890ff;
86                    text-align: center;
87                    vertical-align: middle;
88                    opacity: 0;
89                    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
90                    transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
91                    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
92                    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
93                }
94
95                .ant-spin-spinning {
96                    position: static;
97                    display: inline-block;
98                    opacity: 1;
99                }
100
101                .ant-spin-dot {
102                    position: relative;
103                    display: inline-block;
104                    font-size: 20px;
105                    width: 20px;
106                    height: 20px;
107                }
108
109                .ant-spin-dot-item {
110                    position: absolute;
111                    display: block;
112                    width: 9px;
113                    height: 9px;
114                    background-color: #1890ff;
115                    border-radius: 100%;
116                    -webkit-transform: scale(0.75);
117                    -ms-transform: scale(0.75);
118                    transform: scale(0.75);
119                    -webkit-transform-origin: 50% 50%;
120                    -ms-transform-origin: 50% 50%;
121                    transform-origin: 50% 50%;
122                    opacity: 0.3;
123                    -webkit-animation: antSpinMove 1s infinite linear alternate;
124                    animation: antSpinMove 1s infinite linear alternate;
125                }
126
127                .ant-spin-dot-item:nth-child(1) {
128                    top: 0;
129                    left: 0;
130                }
131
132                .ant-spin-dot-item:nth-child(2) {
133                    top: 0;
134                    right: 0;
135                    -webkit-animation-delay: 0.4s;
136                    animation-delay: 0.4s;
137                }
138
139                .ant-spin-dot-item:nth-child(3) {
140                    right: 0;
141                    bottom: 0;
142                    -webkit-animation-delay: 0.8s;
143                    animation-delay: 0.8s;
144                }
145
146                .ant-spin-dot-item:nth-child(4) {
147                    bottom: 0;
148                    left: 0;
149                    -webkit-animation-delay: 1.2s;
150                    animation-delay: 1.2s;
151                }
152
153                .ant-spin-dot-spin {
154                    -webkit-transform: rotate(45deg);
155                    -ms-transform: rotate(45deg);
156                    transform: rotate(45deg);
157                    -webkit-animation: antRotate 1.2s infinite linear;
158                    animation: antRotate 1.2s infinite linear;
159                }
160
161                .ant-spin-lg .ant-spin-dot {
162                    font-size: 32px;
163                    width: 32px;
164                    height: 32px;
165                }
166
167                .ant-spin-lg .ant-spin-dot i {
168                    width: 14px;
169                    height: 14px;
170                }
171
172                @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
173                    .ant-spin-blur {
174                        background: #fff;
175                        opacity: 0.5;
176                    }
177                }
178
179                @-webkit-keyframes antSpinMove {
180                    to {
181                        opacity: 1;
182                    }
183                }
184
185                @keyframes antSpinMove {
186                    to {
187                        opacity: 1;
188                    }
189                }
190
191                @-webkit-keyframes antRotate {
192                    to {
193                        -webkit-transform: rotate(405deg);
194                        transform: rotate(405deg);
195                    }
196                }
197
198                @keyframes antRotate {
199                    to {
200                        -webkit-transform: rotate(405deg);
201                        transform: rotate(405deg);
202                    }
203                }
204
205                .loading-progress-text:after {
206                    content: var(--blazor-load-percentage-text, "Loading");
207                }
208            </style>
209            <div style="display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 420px; height: 100%;">
210                <img src="logo.png" alt="logo" width="256"/>
211                <div class="page-loading-warp">
212                    <div class="ant-spin ant-spin-lg ant-spin-spinning">
213                        <span class="ant-spin-dot ant-spin-dot-spin">
214                            <i class="ant-spin-dot-item"></i>
215                            <i class="ant-spin-dot-item"></i>
216                            <i class="ant-spin-dot-item"></i>
217                            <i class="ant-spin-dot-item"></i>
218                        </span>
219                    </div>
220                </div>
221                <div style="display: flex; justify-content: center; align-items: center;">
222                    <div class="loading-progress-text"></div>
223                </div>
224            </div>
225        </div>
226    
227<!-- %%-PRERENDERING-BEGIN-%% -->
228<div style="opacity: 0; position: fixed; z-index: -1; top: 0; left: 0; bottom: 0; right: 0;">
229    
230    <div id="react-content"><header id="header" class="clearfix ">
231    <div class="ant-row ant-row-top ant-row-start" style="row-gap: 0px;  flex-flow: nowrap; height: 64px;" id="ant-blazor-784d99f7-6f0e-452c-bdee-664592649b12">
232        <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4" style="  " id="ant-blazor-eee16963-3736-40e8-b20d-1bce18f33a0e">
233    <h1><a id="logo" href="/"><img alt="logo" src="/docs/assets/logo.svg">Ant Design Blazor
234                </a></h1>
235</div><div class="menu-row ant-col ant-col-md-18 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20" style="  " id="ant-blazor-c6d8e1c9-f4bc-491f-9120-691e1b41e5c7">
236    <div id="search-box"><div id="docsearch"></div></div>
237
238
239    <ul class="menu-site ant-menu ant-menu-root ant-menu-light ant-menu-horizontal" id="nav" direction="ltr" role="menu">
240        
241<li class="ant-menu-item-only-child ant-menu-item ant-menu-item-selected" role="menuitem" style=" ">
242            
243            <span class="ant-menu-title-content">
244                    <a href="en-US/docs" class=" active"><span>Docs</span></a>
245            </span>
246        </li>
247<li class="ant-menu-item-only-child ant-menu-item" role="menuitem" style=" ">
248            
249            <span class="ant-menu-title-content">
250                    <a href="en-US/components" class=""><span>Components</span></a>
251            </span>
252        </li>
253<li class="ant-menu-item-only-child ant-menu-item" role="menuitem" style=" ">
254            
255            <span class="ant-menu-title-content">
256                    <a href="en-US/charts" class=""><span>Charts</span></a>
257            </span>
258        </li>
259<li class="ant-menu-item-only-child ant-menu-item" role="menuitem" style=" ">
260            
261            <span class="ant-menu-title-content">
262                    <a href="en-US/experimental" class=""><span>Experimental</span></a>
263            </span>
264        </li>
265<li class="ant-menu-item-only-child ant-menu-item" role="menuitem" style=" ">
266            
267            <span class="ant-menu-title-content">
268                    <a href="https://x.antblazor.com/en-US" class="">AI</a>
269            </span>
270        </li>
271    </ul>
272
273    <button class="header-button ant-btn ant-btn-default ant-btn-sm" id="ant-blazor-4671f777-9715-4e92-aa09-adb01cf03e19" type="button" ant-click-animating-without-extra-node="false">
274                <span>doc-fix</span>
275    </button>
276
277    <button class="header-button header-lang-button ant-btn ant-btn-default ant-btn-sm" id="ant-blazor-6f0580e4-2a32-47da-93ac-e8316855530f" type="button" ant-click-animating-without-extra-node="false">
278                <span>简体中文</span>
279    </button>
280
281    <button class="header-button ant-btn ant-btn-default ant-btn-sm" id="ant-blazor-39d28a62-63aa-4333-ad58-4f38cff73f0d" type="button" ant-click-animating-without-extra-node="false">
282                <span>RTL</span>
283    </button>
284<span id="github-btn" class="github-btn"><a class="gh-btn" href="//github.com/ant-design-blazor/ant-design-blazor" target="_blank"><span class="gh-ico" aria-hidden="true"></span>
285        <span class="gh-text">Star</span></a></span>
286</div>
287    </div>
288</header>
289
290
291<style>            
292.DocSearch-Hit-content-wrapper {
293    overflow: hidden;
294}
295</style><div class="main-wrapper">
296    <div class="ant-row ant-row-top ant-row-start" style="row-gap: 0px;  " id="ant-blazor-54afa159-510c-42b1-aa7a-99aa10685805">
297        <div class="main-menu ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4" style="  " id="ant-blazor-da34335b-35f9-4b2a-812e-2a2fe3462376">
298    <div>
299    <div class="">
300        <section class="main-menu-inner">
301    <ul class="aside-container menu-site ant-menu ant-menu-root ant-menu-light ant-menu-inline" id="ant-blazor-63997f96-68c6-46
301d8-82e0-c47a7a059cc4" direction="ltr" role="menu">
302        
303        
304                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
305            
306            <span class="ant-menu-title-content">
307                    <a href="en-US/docs/introduce" class=""><span>Ant Design of Blazor</span></a>
308            </span>
309        </li>
310            
311
312    
313        
314    
315
316
317        
318                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
319            
320            <span class="ant-menu-title-content">
321                    <a href="en-US/docs/getting-started" class=""><span>Getting Started</span></a>
322            </span>
323        </li>
324            
325
326    
327        
328    
329
330
331        
332                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
333            
334            <span class="ant-menu-title-content">
335                    <a href="en-US/docs/mcp" class=""><span>MCP Documentation</span></a>
336            </span>
337        </li>
338            
339
340    
341        
342    
343
344
345        
346                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
347            
348            <span class="ant-menu-title-content">
349                    <a href="en-US/docs/i18n" class=""><span>Internationalization</span></a>
350            </span>
351        </li>
352            
353
354    
355        
356    
357
358
359        
360                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
361            
362            <span class="ant-menu-title-content">
363                    <a href="en-US/docs/localization" class=""><span>Localization</span></a>
364            </span>
365        </li>
366            
367
368    
369        
370    
371
372
373        
374                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
375            
376            <span class="ant-menu-title-content">
377                    <a href="en-US/docs/faq" class=""><span>FAQ</span></a>
378            </span>
379        </li>
380            
381
382    
383        
384    
385
386
387        
388                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
389            
390            <span class="ant-menu-title-content">
391                    <a href="en-US/docs/member-path-helper" class=""><span>Member path helper</span></a>
392            </span>
393        </li>
394            
395
396    
397        
398    
399
400
401        
402                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
403            
404            <span class="ant-menu-title-content">
405                    <a href="en-US/docs/customize-theme" class=""><span>Customize Theme</span></a>
406            </span>
407        </li>
408            
409
410    
411        
412    
413
414
415        
416                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
417            
418            <span class="ant-menu-title-content">
419                    <a href="en-US/docs/test-kit" class=""><span>TestKit</span></a>
420            </span>
421        </li>
422            
423
424    
425        
426    
427
428
429        
430                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
431            
432            <span class="ant-menu-title-content">
433                    <a href="en-US/docs/2-0-preview" class=""><span>Try 2.0 preview (antd v5)</span></a>
434            </span>
435        </li>
436            
437
438    
439        
440    
441
442
443        
444                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
445            
446            <span class="ant-menu-title-content">
447                    <a href="en-US/docs/nightly-build" class=""><span>Getting nightly builds</span></a>
448            </span>
449        </li>
450            
451
452    
453        
454    
455
456
457        
458                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
459            
460            <span class="ant-menu-title-content">
461                    <a href="en-US/docs/CHANGELOG" class=""><span>Change Log</span></a>
462            </span>
463        </li>
464            
465
466    
467        
468    
469
470
471        
472                <li class="ant-menu-item" role="menuitem" style="padding-left:24px; ">
473            
474            <span class="ant-menu-title-content">
475                    <a href="en-US/docs/contributing" class=""><span>
475How to Contribute</span></a>
476            </span>
477        </li>
478            
479
480    
481        
482    
483
484
485    </ul>
486</section>
487    </div>
488</div>
489</div><div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20" style="  " id="ant-blazor-0587704b-a1e7-4a7f-9864-d7c20bbe8b08">
490    <section class="main-container"><article class="markdown"><div class="ant-skeleton" id="ant-blazor-da2e6450-f18a-4581-8eb5-e6baf3c89a6f">
491
492        <div class="ant-skeleton-content">
493                <h3 class="ant-skeleton-title" style="width:38%"></h3>
494                <ul class="ant-skeleton-paragraph">
495                        <li style="width:"></li>
496                        <li style="width:"></li>
497                        <li style="width:"></li>
498                        <li style="width:"></li>
499                        <li style="width:61%"></li>
500                </ul>
501        </div>
502
503</div></article>
504    <ul class="contributors-list" style="display: flex; list-style: none; margin: 0px; padding: 0px;"><div class="ant-skeleton ant-skeleton-element ant-skeleton-active" style="width: Truepx, height: Truepx, &#x27;line-height&#x27;: Truepx;">
505    <span class="ant-skeleton-avatar ant-skeleton-avatar-circle" style=""></span>
506</div><div class="ant-skeleton ant-skeleton-element ant-skeleton-active" style="width: Truepx, height: Truepx, &#x27;line-height&#x27;: Truepx;">
507    <span class="ant-skeleton-avatar ant-skeleton-avatar-circle" style=""></span>
508</div><div class="ant-skeleton ant-skeleton-element ant-skeleton-active" style="width: Truepx, height: Truepx, &#x27;line-height&#x27;: Truepx;">
509    <span class="ant-skeleton-avatar ant-skeleton-avatar-circle" style=""></span>
510</div></ul></section>
511                        <div class="fixed-widgets">
512<div class="ant-avatar ant-avatar-circle ant-avatar-icon fixed-widgets-avatar" style="width: 44px; height: 44px; line-height: 44px; font-size: 22px;"><svg class="anticon" role="img" width="21" height="21" viewBox="0 0 21 21" fill="currentColor"><g fill-rule="evenodd"><g fill-rule="nonzero"><path d="M7.02 3.635l12.518 12.518a1.863 1.863 0 010 2.635l-1.317 1.318a1.863 1.863 0 01-2.635 0L3.068 7.588A2.795 2.795 0 117.02 3.635zm2.09 14.428a.932.932 0 110 1.864.932.932 0 010-1.864zm-.043-9.747L7.75 9.635l9.154 9.153 1.318-1.317-9.154-9.155zM3.52 12.473c.514 0 .931.417.931.931v.932h.932a.932.932 0 110 1.864h-.932v.931a.932.932 0 01-1.863 0l-.001-.931h-.93a.932.932 0 010-1.864h.93v-.932c0-.514.418-.931.933-.931zm15.374-3.727a1.398 1.398 0 110 2.795 1.398 1.398 0 010-2.795zM4.385 4.953a.932.932 0 000 1.317l2.046 2.047L7.75 7 5.703 4.953a.932.932 0 00-1.318 0zM14.701.36a.932.932 0 01.931.932v.931h.932a.932.932 0 010 1.864h-.933l.001.932a.932.932 0 11-1.863 0l-.001-.932h-.93a.932.932 0 110-1.864h.93v-.931a.932.932 0 01.933-.932z"></path></g></g></svg></div>
513
514    
515        
516    
517</div>
518
519<link type="text/css" rel="stylesheet" id="docs-theme" />
520                    <section class="prev-next-nav"></section>
521                <footer class="rc-footer rc-footer-dark"><section class="rc-footer-container"><section class="rc-footer-columns"><div class="rc-footer-column"><h2>Resources</h2>
522                <div class="rc-footer-item"><a href="https://ant.design" target="_blank">Ant Design</a></div>
523                <div class="rc-footer-item"><a href="https://ng.ant.design" target="_blank">NG-ZORRO</a>
524                    <span class="rc-footer-item-separator">-</span>
525                    <span class="rc-footer-item-description">Ant Design of Angular</span></div>
526                <div class="rc-footer-item"><a href="https://vue.ant.design" target="_blank">Ant Design Vue</a></div>
527                <div class="rc-footer-item"><a href="https://pro.antblazor.com/" target="_blank">Ant Design Pro Blazor</a></div>
528                <div class="rc-footer-item"><a href="http://www.blazor.zone/" target="_blank">Bootstrap Blazor</a>
529                    <span class="rc-footer-item-separator">-</span>
530                    <span class="rc-footer-item-description">Bootstrap of Blazor</span></div>
531                <div class="rc-footer-item"><a href="https://bulmarazor.loogn.net/" target="_blank">BulmaRazor</a>
532                    <span class="rc-footer-item-separator">-</span>
533                    <span class="rc-footer-item-description">Bulma of Blazor</span></div></div>
534            <div class="rc-footer-column"><h2>Community</h2>
535                <div class="rc-footer-item"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank"><span class="rc-footer-item-icon"><span role="img" aria-label="ant-design" class="anticon anticon-ant-design"><svg viewBox="64 64 896 896" focusable="false" class data-icon="ant-design" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"></path></svg></span></span>
536                        Awesome Ant Design
537                    </a></div>
538                <div class="rc-footer-item"><a href="https://github.com/AdrienTorris/awesome-blazor" target="_blank"><span class="rc-footer-item-icon"><span role="img" aria-label="ant-design" class="anticon"><svg viewBox="0 0 1133 1024" width="1em" height="1em" fill="currentColor"><path d="M1016.452929 325.008051a563.029686 563.029686 0 0 1-552.102137 474.312222 408.956599 408.956599 0 0 1-80.701003-4.895699 247.31566 247.31566 0 0 1-205.677843-233.140565 240.162284 240.162284 0 0 1 480.256301-3.388954c1.009372 39.804368-16.237724 74.72279-51.682775 75.727285-37.863643 0-55.617863-27.014112-55.617864-63.429525v-101.181016a61.971544 61.971544 0 0 0-61.493676-62.025182H404.612545a147.641388 147.641388 0 1 0 109.056069 246.028345l2.969601-4.422708 2.964726 4.905451a104.443189 104.443189 0 0 0 89.063675 42.413131 117.721064 117.721064 0 0 0 109.056068-123.050744 320.200125 320.200125 0 0 0-8.7869-78.209268A299.651845 299.651845 0 0 0 116.483145 559.543208a303.406514 303.406514 0 0 0 295.711881 299.651845s22.215938 2.018744 47.260068 1.443353a639.542039 639.542039 0 0 0 342.967072-102.322045c1.453106-1.009372 2.906211 1.009372 1.940725 2.486859a503.413344 503.413344 0 0 1-392.158113 160.363377A353.875117 353.875117 0 0 1 52.029619 558.075474a366.216763 366.216763 0 0 1 147.105007-293.288413A358.702549 358.702549 0 0 1 410.746797 194.930713h113.839614a320.302525 320.302525 0 0 0 236.290586-104.321285 4.422708 4.422708 0 0 1 2.403963-1.37021 4.515355 4.515355 0 0 1 4.832308 2.106515 4.57387 4.57387 0 0 1 0.629029 2.71604 321.107097 321.107097 0 0 1-49.673783 143.642909 4.354441 4.354441 0 0 0-0.536382 2.462478 4.442212 4.442212 0 0 0 2.930593 3.827812 4.412955 4.412955 0 0 0 2.506363 0.131657 344.210502 344.210502 0 0 0 239.313826-197.3298 6.29029 6.29029 0 0 1 2.213792-2.130896 6.056232 6.056232 0 0 1 5.948956 0 6.212271 6.212271 0 0 1 2.208916 2.130896 436.224273 436.224273 0 0 1 42.793475 278.211222zM411.902454 467.748865a88.551675 88.551675 0 1 0 88.537046 88.537046V473.629554a6.382937 6.382937 0 0 0-6.061108-6.061108l-82.475938 0.180419z" p-id="3785"></path></svg></span></span>
539                        Awesome Blazor
540                    </a></div>
541                <div class="rc-footer-item"><a href="https://dotnet9.com/" target="_blank"><span class="rc-footer-item-icon"><span role="img" aria-label="dotnet9" class="anticon"><svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path></svg></span></span>
542                        Dotnet9
543                    </a></div></div>
544            <div class="rc-footer-column"><h2>Help</h2>
545                <div class="rc-footer-item"><a href="https://github.com/ant-design-blazor/ant-design-blazor" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="github" class="anticon anticon-github"><svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 12
5451.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></span></span>
546                        GitHub
547                    </a></div>
548                <div class="rc-footer-item"><a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/?WT.mc_id=DT-MVP-5003987" target="_blank"><span class="rc-footer-item-icon"><span role="img" aria-label="dotnet9" class="anticon"><svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path></svg></span></span>
549                        ASP.NET Blazor Docs
550                    </a></div>
551                <div class="rc-footer-item"><a href="https://docs.microsoft.com/en-us/learn/modules/build-blazor-webassembly-visual-studio-code/?WT.mc_id=DT-MVP-5003987" target="_blank"><span class="rc-footer-item-icon"><span role="img" aria-label="Blazor Tutorial" class="anticon"><svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path></svg></span></span>
552                        Blazor Tutorial
553                    </a></div></div>
554            <div class="rc-footer-column"><h2><span class="rc-footer-column-icon"><img src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="Ant XTech"></span>
555                    More Products</h2>
556                <div class="rc-footer-item" style="margin-top: 20px;"><div class="theme-pick-wrap"><input type="color" class="theme-pick" name="head" style="width:100%;" value="#1890ff" /></div></div></div></section></section>
557    <section class="rc-footer-bottom"><div class="rc-footer-bottom-container">
558            This project is supported by the <a href="https://dotnetfoundation.org">.NET Foundation</a>.
559            Made with <span style="color: rgb(255, 255, 255);">❤</span> by <a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design-blazor">Ant Design Blazor Team</a></div></section></footer>
560</div>
561    </div>
562</div></div><blazor-focus-on-navigate selector="h1"></blazor-focus-on-navigate>
563        
564
565
566
567
568
569
570
571</div>
572<!-- %%-PRERENDERING-END-%% -->
573</app>
574    <div id="toast-zh" class="toast ">文档已更新,请点击 <a class="reload" onclick="if (!window.__cfRLUnblockHandlers) return false; reload()" data-cf-modified-fabca3a1f94c901d003e3705-="">此处</a> 更新。</div>
575    <div id="toast-en" class="toast ">A new version of this app is available. Click <a class="reload" onclick="if (!window.__cfRLUnblockHandlers) return false; reload()" data-cf-modified-fabca3a1f94c901d003e3705-="">here</a> to update.</div>
576
577    <!-- Start Single Page Apps for GitHub Pages -->
578    
578<script type="fabca3a1f94c901d003e3705-text/javascript">
579        // Single Page Apps for GitHub Pages
580        // https://github.com/rafrex/spa-github-pages
581        // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
582        // ----------------------------------------------------------------------
583        // This script checks to see if a redirect is present in the query string
584        // and converts it back into the correct url and adds it to the
585        // browser's history using window.history.replaceState(...),
586        // which won't cause the browser to attempt to load the new url.
587        // When the single page app is loaded further down in this file,
588        // the correct url will be waiting in the browser's history for
589        // the single page app to route accordingly.
590        (function (l) {
591            if (l.search) {
592                var q = {};
593                l.search.slice(1).split('&').forEach(function (v) {
594                    var a = v.split('=');
595                    q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
596                });
597                if (q.p !== undefined) {
598                    window.history.replaceState(null, null,
599                        l.pathname.slice(0, -1) + (q.p || '') +
600                        (q.q ? ('?' + q.q) : '') +
601                        l.hash
602                    );
603                }
604            }
605        }(window.location))
606
607        window.DocSearchInit = window.DocSearchInit || function () { };
608    </script>
608
609    <!-- End Single Page Apps for GitHub Pages -->
610
611    
611<script src="decode.js" type="fabca3a1f94c901d003e3705-text/javascript"></script>
611
612    
612<script src="_framework/blazor.webassembly.66stpp682q.js" autostart="false" type="fabca3a1f94c901d003e3705-text/javascript"></script>
612
613    
613<script type="fabca3a1f94c901d003e3705-text/javascript">
614        Blazor.start({
615            loadBootResource: function (type, name, defaultUri, integrity) {
616                if (type === 'dotnetjs' || type === 'configuration' || type === 'manifest') {
617                    return null;
618                }
619
620                return (async function () {
621                    const compressedResponse = await fetch(defaultUri + '.br', { cache: 'no-cache' });
622                    if (!compressedResponse.ok) {
623                        return fetch(defaultUri, { cache: 'no-cache', integrity: integrity });
624                    }
625
626                    const compressedBuffer = await compressedResponse.arrayBuffer();
627                    const decompressedBytes = BrotliDecode(new Int8Array(compressedBuffer));
628                    const contentType = type === 'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
629
630                    return new Response(decompressedBytes, {
631                        headers: { 'content-type': contentType }
632                    });
633                })();
634            }
635        });
636    </script>
636
637    
637<script src="/_content/AntDesign.Charts/g2plot.min.js?v=doc-fix" type="fabca3a1f94c901d003e3705-text/javascript"></script>
637
638    
638<script src="/_content/AntDesign.Charts/ant-design-charts-blazor.js?v=doc-fix" type="fabca3a1f94c901d003e3705-text/javascript"></script>
638
639    
639<script src="/_content/AntDesign.Docs/js/prism.js?v=doc-fix" type="fabca3a1f94c901d003e3705-text/javascript"></script>
639
640
641    
641<script type="fabca3a1f94c901d003e3705-text/javascript">
642        window.XPrism = {};
643        window.XPrism.highlight = function (code, language) {
644            return Prism.highlight(code, Prism.languages[language], language);
645        }
646
647        window.XPrism.highlightAll = function () {
648            Prism.highlightAll();
649        }
650
651        window.changeColor = function (hex, ref) {
652            window.less
653                .modifyVars({
654                    '@primary-color': hex
655                }).then(() => ref.invokeMethodAsync('OnColorChanged'))
656        }
657
658        //fetch("/version.json?t=" + new Date().getTime())
659        //    .then(response => response.json())
660        //    .then(data => {
661        //        console.log('Latest version is:' + data.version);
662        //        if (data.version != 'doc-fix') {
663        //            showUpdateBar();
664        //        }
665        //    });
666    </script>
666
667
668    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@docsearch/css@3" crossorigin=""/>
669    <link rel="stylesheet/less" type="text/css" href="_content/AntDesign.Docs/color.less"/>
670    <link rel="stylesheet" type="text/css" href="./css/toast.css"/>
671    <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.css"/>
672    
672<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" type="fabca3a1f94c901d003e3705-text/javascript"></script>
672
673    
673<script src="https://fastly.jsdelivr.net/npm/@docsearch/js@3" crossorigin="anonymous" referrerpolicy="no-referrer" type="fabca3a1f94c901d003e3705-text/javascript"></script>
673
674    
674<script src="_content/AntDesign.Docs/js/docsearch.js" type="fabca3a1f94c901d003e3705-text/javascript"></script>
674
675    
675<script type="fabca3a1f94c901d003e3705-text/javascript">
676        let newWorker;
677
678        function showUpdateBar() {
679            var lang = navigator.language || navigator.userLanguage;
680            lang = lang.substr(0, 2);
681            let toast = lang == 'zh' ? document.getElementById('toast-zh') : document.getElementById('toast-en');
682            toast.classList.add('show');
683        }
684
685        function hideUpdateBar() {
686            var lang = navigator.language || navigator.userLanguage;
687            lang = lang.substr(0, 2);
688            let toast = lang == 'zh' ? document.getElementById('toast-zh') : document.getElementById('toast-en');
689            toast.classList.remove('show');
690        }
691
692        function reload() {
693            if (newWorker) {
694                newWorker.postMessage({ action: 'skipWaiting' });
695            } else {
696                navigator.serviceWorker.getRegistration().then(reg => {
697                    if (reg.waiting) {
698                        reg.waiting.postMessage({ action: 'skipWaiting' });
699                    }
700                });
701            }
702            hideUpdateBar();
703        }
704
705        if ('serviceWorker' in navigator) {
706            // The click event on the pop up notification
707
708            navigator.serviceWorker.register('/service-worker.js').then(reg => {
709                if (reg.waiting) {
710                    newWorker = reg.waiting;
711                    showUpdateBar();
712                    return;
713                }
714
715                reg.onupdatefound = function () {
716                    newWorker = reg.installing;
717                    newWorker.onstatechange = function () {
718                        switch (newWorker.state) {
719                            case 'installed':
720                                if (navigator.serviceWorker.controller) {
721                                    showUpdateBar();
722                                }
723                                break;
724                        }
725                    };
726                };
727            });
728
729            let refreshing;
730            navigator.serviceWorker.addEventListener('controllerchange', function () {
731                if (refreshing) return;
732                window.location.reload();
733                refreshing = true;
734            });
735        }
736    </script>
736
737    
737<script type="fabca3a1f94c901d003e3705-text/javascript">var require = { paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs' } }</script>
737
738    
738<script async="" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js" type="fabca3a1f94c901d003e3705-text/javascript"></script>
738
739    
739<script async="" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.nls.js" type="fabca3a1f94c901d003e3705-text/javascript"></script>
739
740    
740<script async="" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.js" type="fabca3a1f94c901d003e3705-text/javascript"></script>
740
741    
741<script type="fabca3a1f94c901d003e3705-text/javascript">
742        var instances = {};
743        function createEditor(element, id, ref, options) {
744            console.log(id);
745            var instance = monaco.editor.create(element, options);
746            instance.onDidChangeModelContent(function () {
747                ref.invokeMethodAsync('OnChangeAsync', instance.getValue());
748            });
749            instances[id] = instance;
750            return instance;
751        }
752
753        function copy(id) {
754            var text = instances[id].getValue();
755            navigator.clipboard.writeText(text);
756        }
757    </script>
757
758
759    <!-- Popup prompt for slow loads in Chinese locales -->
760    
760<script type="fabca3a1f94c901d003e3705-text/javascript">
761    (function () {
762        function isChineseLang() {
763            var lang = (navigator.language || navigator.userLanguage || '').toLowerCase();
764            if (lang && lang.indexOf('zh') === 0) return true;
765            if (navigator.languages) {
766                for (var i = 0; i < navigator.languages.length; i++) {
767                    if (navigator.languages[i] && navigator.languages[i].toLowerCase().indexOf('zh') === 0) return true;
768                }
769            }
770            return false;
771        }
772
773        function stillShowingLoading() {
774            var root = document.getElementById('root');
775            if (!root) return false;
776            // Common loading markers in this page
777            if (root.querySelector('.page-loading-warp')) return true;
778            if (root.querySelector('.loading-progress-text')) return true;
779            // If root is empty or only contains the initial spinner text/settings
780            var text = (root.innerText || '').trim();
781            if (text.length === 0) return true;
782            if (/loading|加载/i.test(text)) return true;
783            return false;
784        }
785
786        function showGiteePrompt() {
787            if (document.getElementById('gitee-redirect-prompt')) return;
788            var box = document.createElement('div');
789            box.id = 'gitee-redirect-prompt';
790            box.setAttribute('role', 'dialog');
791            box.setAttribute('aria-modal', 'true');
792            box.style = 'position:fixed;left:50%;top:20%;transform:translateX(-50%);z-index:99999;background:#fff;border:1px solid #ddd;padding:16px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);max-width:420px;width:90%;font-family:inherit;color:#333;';
793
794            box.innerHTML = '\n                <div style="font-size:16px;margin-bottom:8px;">页面加载较慢,是否跳转至国内镜像?</div>\n                <div style="display:flex;justify-content:flex-end;gap:8px;">\n                    <a href="https://ant-design-blazor.gitee.io" style="background:#1890ff;color:#fff;padding:8px 12px;border-radius:4px;text-decoration:none;" target="_blank" rel="noopener">前往国内站点</a>\n                    <button id="gitee-close" style="background:#f5f5f5;border:1px solid #ddd;padding:8px 12px;border-radius:4px;cursor:pointer;">取消</button>\n                </div>';
795
796            document.body.appendChild(box);
797            document.getElementById('gitee-close').addEventListener('click', function () {
798                if (box && box.parentNode) box.parentNode.removeChild(box);
799            });
800        }
801
802        window.addEventListener('load', function () {
803            if (!isChineseLang()) return;
804            setTimeout(function () {
805                if (stillShowingLoading()) {
806                    showGiteePrompt();
807                }
808            }, 10000);
809        });
810    })();
811    </script>
811
812
813
814
815<!-- Cloudflare Pages Analytics -->
vendor: 99 bytes, line 815
815<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "
815208d7b6eabda4e2caf40cc0c9955d63e
vendor: 61 bytes, line 815
815"}' type="fabca3a1f94c901d003e3705-text/javascript"></script>
815<!-- Cloudflare Pages Analytics -->
vendor: 142 bytes, line 815
815<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="fabca3a1f94c901d003e3705-|49" defer></script>
815<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"f9ce303d06904f23a55fb153fb9efb9f","r":1,"spa":2}' crossorigin="anonymous"></script>
815
816</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.