seven-design-ui 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +1 -1
  2. package/docs/components/upload.mdx +212 -0
  3. package/docs/components/virtual-list.mdx +414 -0
  4. package/docs/doc_build/404.html +4 -4
  5. package/docs/doc_build/CHANGELOG.html +14 -4
  6. package/docs/doc_build/components/button.html +28 -4
  7. package/docs/doc_build/components/cascader.html +34 -4
  8. package/docs/doc_build/components/form.html +47 -4
  9. package/docs/doc_build/components/input.html +28 -4
  10. package/docs/doc_build/components/message.html +34 -4
  11. package/docs/doc_build/components/pagination.html +28 -4
  12. package/docs/doc_build/components/switch.html +27 -4
  13. package/docs/doc_build/components/table.html +48 -4
  14. package/docs/doc_build/components/upload.html +41 -0
  15. package/docs/doc_build/components/virtual-list.html +37 -0
  16. package/docs/doc_build/guide/introduction.html +45 -4
  17. package/docs/doc_build/guide/quick-start.html +87 -4
  18. package/docs/doc_build/guide/theme.html +128 -4
  19. package/docs/doc_build/index.html +4 -4
  20. package/docs/doc_build/static/css/{styles.90fb98bd.css → styles.81f01bfc.css} +1 -1
  21. package/docs/doc_build/static/js/414.e7b95f5f.js +6 -0
  22. package/docs/doc_build/static/js/async/166.d781bc1b.js +13 -0
  23. package/docs/doc_build/static/js/async/358.11ff19ec.js +1 -0
  24. package/docs/doc_build/static/js/async/656.99a32841.js +1 -0
  25. package/docs/doc_build/static/js/async/787.fc84dc3b.js +1 -0
  26. package/docs/doc_build/static/js/index.a5987e76.js +1 -0
  27. package/docs/doc_build/static/{search_index.ba6ba2c0.json → search_index.b65df64a.json} +1 -1
  28. package/docs/rspress.config.ts +15 -2
  29. package/package.json +1 -1
  30. package/packages/components/package.json +1 -1
  31. package/packages/components/src/index.ts +2 -0
  32. package/packages/components/src/message/Message.tsx +6 -1
  33. package/packages/components/src/message/message.css +1 -1
  34. package/packages/components/src/table/index.ts +1 -1
  35. package/packages/components/src/upload/Upload.tsx +411 -0
  36. package/packages/components/src/upload/index.ts +2 -0
  37. package/packages/components/src/upload/upload.css +183 -0
  38. package/packages/components/src/virtual-list/VirtualList.tsx +179 -0
  39. package/packages/components/src/virtual-list/index.ts +2 -0
  40. package/packages/components/src/virtual-list/virtual-list.css +85 -0
  41. package/play/src/App.tsx +133 -1
  42. package/docs/doc_build/static/js/414.9945b82b.js +0 -6
  43. package/docs/doc_build/static/js/async/166.d636f95e.js +0 -13
  44. package/docs/doc_build/static/js/index.7edcc197.js +0 -1
  45. /package/docs/doc_build/static/js/{414.9945b82b.js.LICENSE.txt → 414.e7b95f5f.js.LICENSE.txt} +0 -0
  46. /package/docs/doc_build/static/js/async/{166.d636f95e.js.LICENSE.txt → 166.d781bc1b.js.LICENSE.txt} +0 -0
package/docs/doc_build/CHANGELOG.html CHANGED
@@ -1,15 +1,25 @@
1
1
  <!doctype html>
2
- <html >
2
+ <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <meta name="generator" content="Rspress v1.47.0">
8
- <title data-rh="true"></title>
9
- <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.9945b82b.js"></script><script defer src="/sevenDesign/static/js/index.7edcc197.js"></script><link href="/sevenDesign/static/css/styles.90fb98bd.css" rel="stylesheet"></head>
8
+ <title data-rh="true">docs - SevenDesign</title><meta data-rh="true" name="description" content="企业级 React UI 组件库"/>
9
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.e7b95f5f.js"></script><script defer src="/sevenDesign/static/js/index.a5987e76.js"></script><link href="/sevenDesign/static/css/styles.81f01bfc.css" rel="stylesheet"></head>
10
10
 
11
11
  <body >
12
- <div id="root"></div>
12
+ <div id="root"><link rel="preload" as="image" href="/sevenDesign/logo.svg"/><div class="navContainer_d18b1 rspress-nav px-6 sticky_ddfa7"><div class="container_e4235 flex justify-between items-center h-full"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_a2fea"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_df1fb"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg><p class="searchWord_af2c1">Search</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_d85a9"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div><div class="flex-center flex-row"><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6m0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4M12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3M19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3M3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3M18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5s.2.8-.1 1.1c-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2M9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2"></path></svg></div></div></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div><div class="mobileNavMenu_e7045"><div class="navScreen_ec30c rspress-nav-screen" id="navScreen"><div class="container_c935d"><div class="navMenu_b887b"><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a></div><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_bf893 flex justify-center"></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" rspress-mobile-hamburger navHamburger_ac64c text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_af141 pt-0"><aside class="sidebar_dd719 rspress-sidebar "><div class="navTitleMask_fb17c"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div></div><div class="rspress-scrollbar sidebarContent_da296"><nav class="pb-2"></nav></div></aside><div class="flex-1 relative min-w-0"><div class="rspress-sidebar-menu-container "><div class="rspress-sidebar-menu"><button type="button" class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button type="button" class="flex-center ml-auto"><span class="text-sm">ON THIS PAGE</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button><div class="rspress-local-toc-container "><ul><li><a href="#002" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">0.0.2</span></a></li><li><a href="#patch-changes" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">Patch Changes</span></a></li></ul></div></div></div><div class="content_ff766 rspress-doc-container flex"><div class="flex-1 overflow-x-auto"><div class="rspress-doc"><!--$--><h1 id="docs" class="rspress-doc-title text-3xl mb-10 leading-10 tracking-tight title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#docs">#</a>docs</h1>
13
+ <h2 id="002" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#002">#</a>0.0.2</h2>
14
+ <h3 id="patch-changes" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#patch-changes">#</a>Patch Changes</h3>
15
+ <ul class="list-disc pl-5 my-4 leading-7">
16
+ <li class="[&amp;:not(:first-child)]:mt-2">79f0993: feat: 新增Form表单组件</li>
17
+ <li class="[&amp;:not(:first-child)]:mt-2">Updated dependencies [79f0993]<!-- -->
18
+ <ul class="list-disc pl-5 my-4 leading-7">
19
+ <li class="[&amp;:not(:first-child)]:mt-2">@seven-design-ui/components@0.1.3</li>
20
+ </ul>
21
+ </li>
22
+ </ul><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_c92d1 flex flex-col"></div><div class="next_c11be flex flex-col"></div></div></footer></div></div><div class="aside-container_bc5fa"><div class="flex flex-col"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#002" title="0.0.2" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">0.0.2</span></a></li><li><a href="#patch-changes" title="Patch Changes" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Patch Changes</span></a></li></ul></nav></div></div></div></div></div></div></section></div>
13
23
  <div id="search-container"></div>
14
24
  </body>
15
25
  </html>
package/docs/doc_build/components/button.html CHANGED
@@ -1,15 +1,39 @@
1
1
  <!doctype html>
2
- <html >
2
+ <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <meta name="generator" content="Rspress v1.47.0">
8
- <title data-rh="true"></title>
9
- <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.9945b82b.js"></script><script defer src="/sevenDesign/static/js/index.7edcc197.js"></script><link href="/sevenDesign/static/css/styles.90fb98bd.css" rel="stylesheet"></head>
8
+ <title data-rh="true">Button 按钮 - SevenDesign</title><meta data-rh="true" name="description" content="企业级 React UI 组件库"/>
9
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.e7b95f5f.js"></script><script defer src="/sevenDesign/static/js/index.a5987e76.js"></script><link href="/sevenDesign/static/css/styles.81f01bfc.css" rel="stylesheet"></head>
10
10
 
11
11
  <body >
12
- <div id="root"></div>
12
+ <div id="root"><link rel="preload" as="image" href="/sevenDesign/logo.svg"/><div class="navContainer_d18b1 rspress-nav px-6 sticky_ddfa7"><div class="container_e4235 flex justify-between items-center h-full"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_a2fea"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_df1fb"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg><p class="searchWord_af2c1">Search</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_d85a9"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 activeItem_a28b5 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div><div class="flex-center flex-row"><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6m0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4M12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3M19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3M3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3M18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5s.2.8-.1 1.1c-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2M9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2"></path></svg></div></div></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div><div class="mobileNavMenu_e7045"><div class="navScreen_ec30c rspress-nav-screen" id="navScreen"><div class="container_c935d"><div class="navMenu_b887b"><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a></div><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 activeItem_a28b5 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_bf893 flex justify-center"></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" rspress-mobile-hamburger navHamburger_ac64c text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_af141 pt-0"><aside class="sidebar_dd719 rspress-sidebar "><div class="navTitleMask_fb17c"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div></div><div class="rspress-scrollbar sidebarContent_da296"><nav class="pb-2"><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">基础组件</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/button.html" class="link_a7cea menuLink_bb039"><div class="menuItemActive_de63c mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Button 按钮</span></div></a></div></div></div></section><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">表单组件</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/input.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Input 输入框</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/switch.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Switch 开关</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/form.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Form 表单</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/cascader.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Cascader 级联选择器</span></div></a></div></div></div></section><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">数据展示</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/table.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Table 表格</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/pagination.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Pagination 分页器</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/message.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Message 消息提示</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/virtual-list.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>VirtualList 虚拟列表</span></div></a></div></div></div></section><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">数据录入</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/upload.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Upload 上传</span></div></a></div></div></div></section></nav></div></aside><div class="flex-1 relative min-w-0"><div class="rspress-sidebar-menu-container "><div class="rspress-sidebar-menu"><button type="button" class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button type="button" class="flex-center ml-auto"><span class="text-sm">ON THIS PAGE</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button><div class="rspress-local-toc-container "><ul><li><a href="#基础用法" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">基础用法</span></a></li><li><a href="#朴素按钮" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">朴素按钮</span></a></li><li><a href="#圆角按钮" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">圆角按钮</span></a></li><li><a href="#不同尺寸" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">不同尺寸</span></a></li><li><a href="#禁用状态" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">禁用状态</span></a></li><li><a href="#加载状态" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">加载状态</span></a></li><li><a href="#api" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">API</span></a></li><li><a href="#props" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">Props</span></a></li><li><a href="#events" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">Events</span></a></li></ul></div></div></div><div class="content_ff766 rspress-doc-container flex"><div class="flex-1 overflow-x-auto"><div class="rspress-doc"><!--$--><h1 id="button-按钮" class="rspress-doc-title text-3xl mb-10 leading-10 tracking-tight title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#button-按钮">#</a>Button 按钮</h1>
13
+ <p class="my-4 leading-7">常用的操作按钮。</p>
14
+ <h2 id="基础用法" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#基础用法">#</a>基础用法</h2>
15
+ <p class="my-4 leading-7">使用 <code>type</code>、<code>plain</code>、<code>round</code> 和 <code>circle</code> 来定义按钮的样式。</p>
16
+ <!-- -->
17
+ <h2 id="朴素按钮" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#朴素按钮">#</a>朴素按钮</h2>
18
+ <p class="my-4 leading-7">使用 <code>plain</code> 属性来创建朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。</p>
19
+ <!-- -->
20
+ <h2 id="圆角按钮" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#圆角按钮">#</a>圆角按钮</h2>
21
+ <p class="my-4 leading-7">使用 <code>round</code> 属性来创建圆角按钮。</p>
22
+ <!-- -->
23
+ <h2 id="不同尺寸" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#不同尺寸">#</a>不同尺寸</h2>
24
+ <p class="my-4 leading-7">Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。</p>
25
+ <!-- -->
26
+ <h2 id="禁用状态" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#禁用状态">#</a>禁用状态</h2>
27
+ <p class="my-4 leading-7">你可以使用 <code>disabled</code> 属性来定义按钮是否被禁用。</p>
28
+ <!-- -->
29
+ <h2 id="加载状态" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#加载状态">#</a>加载状态</h2>
30
+ <p class="my-4 leading-7">通过设置 <code>loading</code> 属性为 <code>true</code> 来显示加载中状态。</p>
31
+ <!-- -->
32
+ <h2 id="api" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#api">#</a>API</h2>
33
+ <h3 id="props" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#props">#</a>Props</h3>
34
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">属性</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">类型</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">type</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">按钮类型</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>&#x27;default&#x27; | &#x27;primary&#x27; | &#x27;success&#x27; | &#x27;warning&#x27; | &#x27;danger&#x27; | &#x27;info&#x27;</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>default</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">size</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">按钮尺寸</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>&#x27;large&#x27; | &#x27;default&#x27; | &#x27;small&#x27;</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>default</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">plain</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否为朴素按钮</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">round</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否为圆角按钮</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">circle</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否为圆形按钮</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">loading</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否为加载中状态</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">disabled</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否禁用</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">nativeType</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">原生 type 属性</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>&#x27;button&#x27; | &#x27;submit&#x27; | &#x27;reset&#x27;</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>button</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">icon</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">图标组件</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>React.ReactNode</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">className</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">自定义类名</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">onClick</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">点击事件回调</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(e: React.MouseEvent) =&gt; void</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr></tbody></table>
35
+ <h3 id="events" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#events">#</a>Events</h3>
36
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">事件名</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">类型</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">onClick</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">点击按钮时触发</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(e: React.MouseEvent) =&gt; void</code></td></tr></tbody></table><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_c92d1 flex flex-col"></div><div class="next_c11be flex flex-col"><a href="/sevenDesign/components/input.html" class="link_a7cea pager-link_e0d2d next_ad355"><span class="desc_dcc01">Next Page</span><span class="title_a3acb">Input 输入框</span></a></div></div></footer></div></div><div class="aside-container_bc5fa"><div class="flex flex-col"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#基础用法" title="基础用法" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">基础用法</span></a></li><li><a href="#朴素按钮" title="朴素按钮" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">朴素按钮</span></a></li><li><a href="#圆角按钮" title="圆角按钮" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">圆角按钮</span></a></li><li><a href="#不同尺寸" title="不同尺寸" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">不同尺寸</span></a></li><li><a href="#禁用状态" title="禁用状态" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">禁用状态</span></a></li><li><a href="#加载状态" title="加载状态" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">加载状态</span></a></li><li><a href="#api" title="API" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">API</span></a></li><li><a href="#props" title="Props" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Props</span></a></li><li><a href="#events" title="Events" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Events</span></a></li></ul></nav></div></div></div></div></div></div></section></div>
13
37
  <div id="search-container"></div>
14
38
  </body>
15
39
  </html>
package/docs/doc_build/components/cascader.html CHANGED
@@ -1,15 +1,45 @@
1
1
  <!doctype html>
2
- <html >
2
+ <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <meta name="generator" content="Rspress v1.47.0">
8
- <title data-rh="true"></title>
9
- <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.9945b82b.js"></script><script defer src="/sevenDesign/static/js/index.7edcc197.js"></script><link href="/sevenDesign/static/css/styles.90fb98bd.css" rel="stylesheet"></head>
8
+ <title data-rh="true">Cascader 级联选择器 - SevenDesign</title><meta data-rh="true" name="description" content="企业级 React UI 组件库"/>
9
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.e7b95f5f.js"></script><script defer src="/sevenDesign/static/js/index.a5987e76.js"></script><link href="/sevenDesign/static/css/styles.81f01bfc.css" rel="stylesheet"></head>
10
10
 
11
11
  <body >
12
- <div id="root"></div>
12
+ <div id="root"><link rel="preload" as="image" href="/sevenDesign/logo.svg"/><div class="navContainer_d18b1 rspress-nav px-6 sticky_ddfa7"><div class="container_e4235 flex justify-between items-center h-full"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_a2fea"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_df1fb"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg><p class="searchWord_af2c1">Search</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_d85a9"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div><div class="flex-center flex-row"><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6m0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4M12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3M19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3M3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3M18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5s.2.8-.1 1.1c-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2M9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2"></path></svg></div></div></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div><div class="mobileNavMenu_e7045"><div class="navScreen_ec30c rspress-nav-screen" id="navScreen"><div class="container_c935d"><div class="navMenu_b887b"><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a></div><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_bf893 flex justify-center"></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" rspress-mobile-hamburger navHamburger_ac64c text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_af141 pt-0"><aside class="sidebar_dd719 rspress-sidebar "><div class="navTitleMask_fb17c"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div></div><div class="rspress-scrollbar sidebarContent_da296"><nav class="pb-2"><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">基础组件</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/button.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Button 按钮</span></div></a></div></div></div></section><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">表单组件</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/input.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Input 输入框</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/switch.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Switch 开关</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/form.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Form 表单</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/cascader.html" class="link_a7cea menuLink_bb039"><div class="menuItemActive_de63c mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Cascader 级联选择器</span></div></a></div></div></div></section><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">数据展示</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/table.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Table 表格</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/pagination.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Pagination 分页器</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/message.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Message 消息提示</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/virtual-list.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>VirtualList 虚拟列表</span></div></a></div></div></div></section><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">数据录入</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/upload.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Upload 上传</span></div></a></div></div></div></section></nav></div></aside><div class="flex-1 relative min-w-0"><div class="rspress-sidebar-menu-container "><div class="rspress-sidebar-menu"><button type="button" class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button type="button" class="flex-center ml-auto"><span class="text-sm">ON THIS PAGE</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button><div class="rspress-local-toc-container "><ul><li><a href="#基础用法" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">基础用法</span></a></li><li><a href="#禁用选项" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">禁用选项</span></a></li><li><a href="#清空" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">清空</span></a></li><li><a href="#默认值" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">默认值</span></a></li><li><a href="#仅显示最后一级" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">仅显示最后一级</span></a></li><li><a href="#多选" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">多选</span></a></li><li><a href="#搜索" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">搜索</span></a></li><li><a href="#悬停展开" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">悬停展开</span></a></li><li><a href="#api" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">API</span></a></li><li><a href="#cascader-props" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">Cascader Props</span></a></li><li><a href="#cascaderoption" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">CascaderOption</span></a></li></ul></div></div></div><div class="content_ff766 rspress-doc-container flex"><div class="flex-1 overflow-x-auto"><div class="rspress-doc"><!--$--><h1 id="cascader-级联选择器" class="rspress-doc-title text-3xl mb-10 leading-10 tracking-tight title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#cascader-级联选择器">#</a>Cascader 级联选择器</h1>
13
+ <p class="my-4 leading-7">级联选择器适用于有清晰层级结构的数据选择，比如省市区、行业分类等。</p>
14
+ <h2 id="基础用法" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#基础用法">#</a>基础用法</h2>
15
+ <p class="my-4 leading-7">只需为 Cascader 的 <code>options</code> 属性指定选项数组即可渲染出一个级联选择器。通过 <code>expandTrigger</code> 属性控制子节点的展开方式，默认 <code>clicked</code> 可选 <code>hover</code>。</p>
16
+ <!-- -->
17
+ <h2 id="禁用选项" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#禁用选项">#</a>禁用选项</h2>
18
+ <p class="my-4 leading-7">通过在数据源中设置 <code>disabled</code> 字段来声明该选项是禁用的。默认情况下，Cascader 会检查数据中每一项的 <code>disabled</code> 字段是否为 <code>true</code>。</p>
19
+ <!-- -->
20
+ <h2 id="清空" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#清空">#</a>清空</h2>
21
+ <p class="my-4 leading-7">通过 <code>clearable</code> 设置输入框可清空。</p>
22
+ <!-- -->
23
+ <h2 id="默认值" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#默认值">#</a>默认值</h2>
24
+ <p class="my-4 leading-7">通过 <code>defaultValue</code> 设置默认值。</p>
25
+ <!-- -->
26
+ <h2 id="仅显示最后一级" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#仅显示最后一级">#</a>仅显示最后一级</h2>
27
+ <p class="my-4 leading-7">可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。<code>showAllLevels</code> 定义了是否显示完整的路径，将其赋值为 <code>false</code> 则仅显示最后一级。</p>
28
+ <!-- -->
29
+ <h2 id="多选" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#多选">#</a>多选</h2>
30
+ <p class="my-4 leading-7">一次性选择多个选项。通过设置 <code>multiple</code> 开启。通过添加 <code>disableCheckbox</code> 属性，可选择具体某一个 checkbox 禁用。</p>
31
+ <!-- -->
32
+ <h2 id="搜索" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#搜索">#</a>搜索</h2>
33
+ <p class="my-4 leading-7">通过 <code>showSearch</code> 开启搜索功能，支持在所有层级中搜索选项。</p>
34
+ <!-- -->
35
+ <h2 id="悬停展开" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#悬停展开">#</a>悬停展开</h2>
36
+ <p class="my-4 leading-7">通过 <code>expandTrigger</code> 设置为 <code>hover</code> 来让选项在鼠标悬停时展开子菜单。</p>
37
+ <!-- -->
38
+ <h2 id="api" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#api">#</a>API</h2>
39
+ <h3 id="cascader-props" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#cascader-props">#</a>Cascader Props</h3>
40
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">参数</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">类型</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">options</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">可选项数据源</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>CascaderOption[]</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">value</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">当前选中值（受控）</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string | number | Array&lt;string | number&gt;</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">defaultValue</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">默认选中值</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string | number | Array&lt;string | number&gt;</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">onChange</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">选中值改变时的回调</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(value, selectedOptions) =&gt; void</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">expandTrigger</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">次级菜单的展开方式</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>&#x27;click&#x27; | &#x27;hover&#x27;</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>&#x27;click&#x27;</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">clearable</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否可清空</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">disabled</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否禁用</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">showAllLevels</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否显示完整路径</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>true</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">multiple</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否支持多选</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">showSearch</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否支持搜索</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">filterOption</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">自定义搜索函数</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(inputValue: string, option: CascaderOption) =&gt; boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">searchPlaceholder</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">搜索占位符</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>&#x27;搜索选项&#x27;</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">placeholder</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">占位符</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>&#x27;请选择&#x27;</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">className</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">自定义类名</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">style</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">自定义样式</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>React.CSSProperties</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr></tbody></table>
41
+ <h3 id="cascaderoption" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#cascaderoption">#</a>CascaderOption</h3>
42
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">参数</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">类型</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">value</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">选项的值</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string | number</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">label</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">选项的显示文本</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">children</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">子选项</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>CascaderOption[]</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">disabled</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否禁用</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">disableCheckbox</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否禁用复选框（多选模式下）</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td></tr></tbody></table><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_c92d1 flex flex-col"><a href="/sevenDesign/components/form.html" class="link_a7cea pager-link_e0d2d"><span class="desc_dcc01">Previous Page</span><span class="title_a3acb">Form 表单</span></a></div><div class="next_c11be flex flex-col"><a href="/sevenDesign/components/table.html" class="link_a7cea pager-link_e0d2d next_ad355"><span class="desc_dcc01">Next Page</span><span class="title_a3acb">Table 表格</span></a></div></div></footer></div></div><div class="aside-container_bc5fa"><div class="flex flex-col"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#基础用法" title="基础用法" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">基础用法</span></a></li><li><a href="#禁用选项" title="禁用选项" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">禁用选项</span></a></li><li><a href="#清空" title="清空" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">清空</span></a></li><li><a href="#默认值" title="默认值" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">默认值</span></a></li><li><a href="#仅显示最后一级" title="仅显示最后一级" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">仅显示最后一级</span></a></li><li><a href="#多选" title="多选" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">多选</span></a></li><li><a href="#搜索" title="搜索" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">搜索</span></a></li><li><a href="#悬停展开" title="悬停展开" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">悬停展开</span></a></li><li><a href="#api" title="API" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">API</span></a></li><li><a href="#cascader-props" title="Cascader Props" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Cascader Props</span></a></li><li><a href="#cascaderoption" title="CascaderOption" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">CascaderOption</span></a></li></ul></nav></div></div></div></div></div></div></section></div>
13
43
  <div id="search-container"></div>
14
44
  </body>
15
45
  </html>
package/docs/doc_build/components/form.html CHANGED
@@ -1,15 +1,58 @@
1
1
  <!doctype html>
2
- <html >
2
+ <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <meta name="generator" content="Rspress v1.47.0">
8
- <title data-rh="true"></title>
9
- <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.9945b82b.js"></script><script defer src="/sevenDesign/static/js/index.7edcc197.js"></script><link href="/sevenDesign/static/css/styles.90fb98bd.css" rel="stylesheet"></head>
8
+ <title data-rh="true">Form 表单 - SevenDesign</title><meta data-rh="true" name="description" content="企业级 React UI 组件库"/>
9
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.e7b95f5f.js"></script><script defer src="/sevenDesign/static/js/index.a5987e76.js"></script><link href="/sevenDesign/static/css/styles.81f01bfc.css" rel="stylesheet"></head>
10
10
 
11
11
  <body >
12
- <div id="root"></div>
12
+ <div id="root"><link rel="preload" as="image" href="/sevenDesign/logo.svg"/><div class="navContainer_d18b1 rspress-nav px-6 sticky_ddfa7"><div class="container_e4235 flex justify-between items-center h-full"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_a2fea"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_df1fb"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg><p class="searchWord_af2c1">Search</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_d85a9"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div><div class="flex-center flex-row"><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6m0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4M12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3M19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3M3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3M18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5s.2.8-.1 1.1c-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2M9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2"></path></svg></div></div></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div><div class="mobileNavMenu_e7045"><div class="navScreen_ec30c rspress-nav-screen" id="navScreen"><div class="container_c935d"><div class="navMenu_b887b"><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a></div><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_bf893 flex justify-center"></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" rspress-mobile-hamburger navHamburger_ac64c text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_af141 pt-0"><aside class="sidebar_dd719 rspress-sidebar "><div class="navTitleMask_fb17c"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div></div><div class="rspress-scrollbar sidebarContent_da296"><nav class="pb-2"><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">基础组件</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/button.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Button 按钮</span></div></a></div></div></div></section><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">表单组件</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/input.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Input 输入框</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/switch.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Switch 开关</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/form.html" class="link_a7cea menuLink_bb039"><div class="menuItemActive_de63c mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Form 表单</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/cascader.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Cascader 级联选择器</span></div></a></div></div></div></section><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">数据展示</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/table.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Table 表格</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/pagination.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Pagination 分页器</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/message.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Message 消息提示</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/components/virtual-list.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>VirtualList 虚拟列表</span></div></a></div></div></div></section><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">数据录入</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/components/upload.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Upload 上传</span></div></a></div></div></div></section></nav></div></aside><div class="flex-1 relative min-w-0"><div class="rspress-sidebar-menu-container "><div class="rspress-sidebar-menu"><button type="button" class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button type="button" class="flex-center ml-auto"><span class="text-sm">ON THIS PAGE</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button><div class="rspress-local-toc-container "><ul><li><a href="#基础用法" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">基础用法</span></a></li><li><a href="#表单校验" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">表单校验</span></a></li><li><a href="#校验触发方式" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">校验触发方式</span></a></li><li><a href="#表单方法" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">表单方法</span></a></li><li><a href="#自定义校验" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">自定义校验</span></a></li><li><a href="#api-参考" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">API 参考</span></a></li><li><a href="#form" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">Form</span></a></li><li><a href="#formitem" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">Form.Item</span></a></li><li><a href="#rule" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">Rule</span></a></li><li><a href="#form-实例方法" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">Form 实例方法</span></a></li><li><a href="#注意事项" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">注意事项</span></a></li></ul></div></div></div><div class="content_ff766 rspress-doc-container flex"><div class="flex-1 overflow-x-auto"><div class="rspress-doc"><!--$--><h1 id="form-表单" class="rspress-doc-title text-3xl mb-10 leading-10 tracking-tight title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#form-表单">#</a>Form 表单</h1>
13
+ <p class="my-4 leading-7">具有数据收集、校验和提交功能的表单，包含输入框、选择器、单选框、多选框等元素。</p>
14
+ <h2 id="基础用法" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#基础用法">#</a>基础用法</h2>
15
+ <p class="my-4 leading-7">基本的表单用法。</p>
16
+ <!-- -->
17
+ <h2 id="表单校验" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#表单校验">#</a>表单校验</h2>
18
+ <p class="my-4 leading-7">通过 <code>rules</code> 属性设置校验规则，支持多种校验类型。</p>
19
+ <!-- -->
20
+ <h2 id="校验触发方式" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#校验触发方式">#</a>校验触发方式</h2>
21
+ <p class="my-4 leading-7">通过 <code>validateTrigger</code> 属性设置触发校验的事件，默认值为 <code>&#x27;onBlur&#x27;</code>。</p>
22
+ <!-- -->
23
+ <h2 id="表单方法" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#表单方法">#</a>表单方法</h2>
24
+ <p class="my-4 leading-7">通过 ref 可以获取到 Form 组件的实例，调用各种方法来操作表单。</p>
25
+ <!-- -->
26
+ <h2 id="自定义校验" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#自定义校验">#</a>自定义校验</h2>
27
+ <p class="my-4 leading-7">通过自定义 <code>validator</code> 函数实现复杂的校验逻辑。</p>
28
+ <!-- -->
29
+ <h2 id="api-参考" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#api-参考">#</a>API 参考</h2>
30
+ <h3 id="form" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#form">#</a>Form</h3>
31
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">属性</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">类型</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">initialValues</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">表单初始值</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>Record&lt;string, any&gt;</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>{}</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">onFinish</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">表单提交成功的回调</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(values: Record&lt;string, any&gt;) =&gt; void</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">onFinishFailed</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">表单提交失败的回调</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(errors: Record&lt;string, ValidateError[]&gt;) =&gt; void</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">className</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">自定义类名</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr></tbody></table>
32
+ <h3 id="formitem" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#formitem">#</a>Form.Item</h3>
33
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">属性</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">类型</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">name</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">表单项名称，用于表单校验和数据提交</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">label</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">表单项标签</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">rules</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">校验规则</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>Rule[]</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>[]</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">validateTrigger</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">触发校验的事件</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string | string[]</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>&#x27;onBlur&#x27;</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">className</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">自定义类名</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">labelCol</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">label 标签布局</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>{span?: number, offset?: number}</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">wrapperCol</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">输入控件布局</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>{span?: number, offset?: number}</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr></tbody></table>
34
+ <h3 id="rule" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#rule">#</a>Rule</h3>
35
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">属性</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">类型</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">type</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">校验类型，如 &#x27;email&#x27;, &#x27;number&#x27; 等</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">required</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否必填</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>boolean</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">message</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">错误提示信息</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">validator</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">自定义校验函数</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(rule: Rule, value: any, callback: (error?: string) =&gt; void) =&gt; void</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">min</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">最小长度/值</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>number</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">max</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">最大长度/值</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>number</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">pattern</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">正则表达式</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>RegExp</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">asyncValidator</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">异步自定义校验函数</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(rule: Rule, value: any) =&gt; Promise&lt;void&gt;</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td></tr></tbody></table>
36
+ <h3 id="form-实例方法" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#form-实例方法">#</a>Form 实例方法</h3>
37
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">方法</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">参数</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">返回值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">validateField</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">校验单个字段</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(name: string)</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>Promise&lt;void&gt;</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">validateAllFields</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">校验所有字段</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>Promise&lt;Record&lt;string, any&gt;&gt;</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">resetFields</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">重置表单</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>void</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">setFieldValue</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">设置单个字段的值</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(name: string, value: any)</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>void</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">getFieldValue</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">获取单个字段的值</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>(name: string)</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>any</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">getFieldsValue</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">获取所有字段的值</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">-</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>Record&lt;string, any&gt;</code></td></tr></tbody></table>
38
+ <h2 id="注意事项" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#注意事项">#</a>注意事项</h2>
39
+ <ol class="list-decimal pl-5 my-4 leading-7">
40
+ <li class="[&amp;:not(:first-child)]:mt-2">
41
+ <p class="my-4 leading-7">Form.Item 内的输入组件需要设置 <code>name</code> 属性，才能正常进行表单校验。</p>
42
+ </li>
43
+ <li class="[&amp;:not(:first-child)]:mt-2">
44
+ <p class="my-4 leading-7">校验规则支持多种类型，包括 required、type、min、max、pattern 等。</p>
45
+ </li>
46
+ <li class="[&amp;:not(:first-child)]:mt-2">
47
+ <p class="my-4 leading-7">validateTrigger 可以设置为单个事件或事件数组，默认为 &#x27;onBlur&#x27;。</p>
48
+ </li>
49
+ <li class="[&amp;:not(:first-child)]:mt-2">
50
+ <p class="my-4 leading-7">通过 ref 可以获取 Form 实例，调用各种方法来操作表单。</p>
51
+ </li>
52
+ <li class="[&amp;:not(:first-child)]:mt-2">
53
+ <p class="my-4 leading-7">表单提交时会自动触发所有字段的校验，如果校验失败会调用 onFinishFailed 回调。</p>
54
+ </li>
55
+ </ol><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_c92d1 flex flex-col"><a href="/sevenDesign/components/switch.html" class="link_a7cea pager-link_e0d2d"><span class="desc_dcc01">Previous Page</span><span class="title_a3acb">Switch 开关</span></a></div><div class="next_c11be flex flex-col"><a href="/sevenDesign/components/cascader.html" class="link_a7cea pager-link_e0d2d next_ad355"><span class="desc_dcc01">Next Page</span><span class="title_a3acb">Cascader 级联选择器</span></a></div></div></footer></div></div><div class="aside-container_bc5fa"><div class="flex flex-col"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#基础用法" title="基础用法" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">基础用法</span></a></li><li><a href="#表单校验" title="表单校验" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">表单校验</span></a></li><li><a href="#校验触发方式" title="校验触发方式" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">校验触发方式</span></a></li><li><a href="#表单方法" title="表单方法" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">表单方法</span></a></li><li><a href="#自定义校验" title="自定义校验" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">自定义校验</span></a></li><li><a href="#api-参考" title="API 参考" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">API 参考</span></a></li><li><a href="#form" title="Form" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Form</span></a></li><li><a href="#formitem" title="Form.Item" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Form.Item</span></a></li><li><a href="#rule" title="Rule" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Rule</span></a></li><li><a href="#form-实例方法" title="Form 实例方法" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Form 实例方法</span></a></li><li><a href="#注意事项" title="注意事项" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">注意事项</span></a></li></ul></nav></div></div></div></div></div></div></section></div>
13
56
  <div id="search-container"></div>
14
57
  </body>
15
58
  </html>