seven-design-ui 0.0.1

package/docs/components/pagination.mdx

@@ -0,0 +1,186 @@
+import { Pagination } from '@seven-design-ui/components'
+import React from 'react'
+
+# Pagination 分页器
+
+当数据量过多时，使用分页器进行数据展示。
+
+## 基础用法
+
+基础的分页器用法，设置 `total`、`defaultCurrent` 和 `defaultPageSize` 来控制分页器的基本行为。
+
+```tsx preview
+export default function Demo() {
+  const [current, setCurrent] = React.useState(1)
+  const [pageSize, setPageSize] = React.useState(10)
+
+  const handleChange = (page, size) => {
+    setCurrent(page)
+    setPageSize(size)
+  }
+
+  return (
+    <div>
+      <Pagination
+        total={100}
+        defaultCurrent={1}
+        defaultPageSize={10}
+        onChange={handleChange}
+      />
+      <p style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>
+        当前页码: {current}, 每页容量: {pageSize}
+      </p>
+    </div>
+  )
+}
+```
+
+## 不同大小
+
+分页器支持两种尺寸：`s`（小）和 `m`（中），默认为 `m`。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      <div>
+        <div style={{ marginBottom: '8px', fontSize: '14px', color: '#666' }}>小尺寸 (s)</div>
+        <Pagination total={50} size="s" />
+      </div>
+      <div>
+        <div style={{ marginBottom: '8px', fontSize: '14px', color: '#666' }}>中等尺寸 (m)</div>
+        <Pagination total={50} size="m" />
+      </div>
+    </div>
+  )
+}
+```
+
+## 自定义最大页码按钮数
+
+通过 `pagerCount` 属性可以设置最大页码按钮数，默认为7。当总页数超过设置值时，会自动折叠多余的页码按钮。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div>
+      <Pagination total={200} pagerCount={5} defaultCurrent={10} />
+      <p style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>
+        最大显示5个页码按钮，总共20页数据
+      </p>
+    </div>
+  )
+}
+```
+
+## 自定义每页容量选项
+
+通过 `pageSizeOptions` 属性可以设置每页容量的选择项，默认为 `[10, 20, 50, 100]`。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div>
+      <Pagination
+        total={500}
+        pageSizeOptions={[5, 10, 20, 50]}
+        defaultPageSize={5}
+      />
+      <p style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>
+        每页容量选项: 5, 10, 20, 50
+      </p>
+    </div>
+  )
+}
+```
+
+## 跳转功能
+
+通过设置 `showQuickJumper` 为 `true` 来启用跳转功能，用户可以直接输入页码进行跳转。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div>
+      <Pagination
+        total={100}
+        showQuickJumper={true}
+        defaultCurrent={5}
+      />
+      <p style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>
+        可以通过输入框直接跳转到指定页码
+      </p>
+    </div>
+  )
+}
+```
+
+## 完整功能演示
+
+展示分页器的所有功能，包括页码切换、每页容量控制和跳转功能。
+
+```tsx preview
+export default function Demo() {
+  const [current, setCurrent] = React.useState(3)
+  const [pageSize, setPageSize] = React.useState(20)
+
+  const handleChange = (page, size) => {
+    setCurrent(page)
+    setPageSize(size)
+    console.log(`页码: ${page}, 每页容量: ${size}`)
+  }
+
+  const handlePageSizeChange = (size) => {
+    console.log(`每页容量改变: ${size}`)
+  }
+
+  return (
+    <div>
+      <Pagination
+        total={500}
+        current={current}
+        pageSize={pageSize}
+        pageSizeOptions={[10, 20, 50, 100]}
+        showQuickJumper={true}
+        onChange={handleChange}
+        onPageSizeChange={handlePageSizeChange}
+      />
+      <div style={{ marginTop: '16px', padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
+        <p style={{ margin: '0', fontSize: '14px', color: '#333' }}>
+          <strong>当前状态：</strong>第 {current} 页，每页 {pageSize} 条，共 {500} 条数据
+        </p>
+        <p style={{ margin: '8px 0 0 0', fontSize: '12px', color: '#666' }}>
+          总页数: {Math.ceil(500 / pageSize)} 页
+        </p>
+      </div>
+    </div>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| total | 总数量 | `number` | - |
+| defaultCurrent | 默认页码 | `number` | `1` |
+| defaultPageSize | 默认每页容量 | `number` | `10` |
+| current | 当前页码（受控模式） | `number` | - |
+| pageSize | 每页容量（受控模式） | `number` | - |
+| onChange | 页码改变回调 | `(page: number, pageSize: number) => void` | - |
+| onPageSizeChange | 每页容量改变回调 | `(pageSize: number) => void` | - |
+| pagerCount | 最大页码按钮数 | `number` | `7` |
+| size | 分页器大小 | `'s' \| 'm'` | `'m'` |
+| pageSizeOptions | 每页容量选项 | `number[]` | `[10, 20, 50, 100]` |
+| showSizeChanger | 是否显示每页容量选择器 | `boolean` | `true` |
+| showQuickJumper | 是否显示跳转输入框 | `boolean` | `false` |
+| className | 自定义类名 | `string` | - |
+
+### Events
+
+| 事件名 | 说明 | 类型 |
+| --- | --- | --- |
+| onChange | 页码或每页容量改变时触发 | `(page: number, pageSize: number) => void` |
+| onPageSizeChange | 每页容量改变时触发 | `(pageSize: number) => void` |

package/docs/components/switch.mdx

@@ -0,0 +1,134 @@
+import { Switch } from '@seven-design-ui/components'
+import React from 'react'
+
+# Switch 开关
+
+表示两种相互对立的状态间的切换，多用于触发「开/关」。
+
+## 基础用法
+
+绑定 `checked` 到一个布尔类型的变量。
+
+```tsx preview
+export default function BasicSwitch() {
+  const [checked, setChecked] = React.useState(false)
+
+  return (
+    <div>
+      <Switch checked={checked} onChange={setChecked} />
+      <p style={{ marginTop: '12px', color: '#606266' }}>
+        当前状态：{checked ? '开启' : '关闭'}
+      </p>
+    </div>
+  )
+}
+```
+
+## 禁用状态
+
+设置 `disabled` 属性，接受一个布尔值，设置为 `true` 即可禁用。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+      <Switch disabled />
+      <Switch disabled defaultChecked />
+    </div>
+  )
+}
+```
+
+## 加载状态
+
+设置 `loading` 属性，表示正在加载中的状态。
+
+```tsx preview
+export default function LoadingSwitch() {
+  const [loading, setLoading] = React.useState(false)
+  const [checked, setChecked] = React.useState(false)
+
+  const handleChange = (checked) => {
+    setLoading(true)
+    setTimeout(() => {
+      setChecked(checked)
+      setLoading(false)
+    }, 1000)
+  }
+
+  return (
+    <div>
+      <Switch loading={loading} checked={checked} onChange={handleChange} />
+      <p style={{ marginTop: '12px', color: '#606266' }}>
+        {loading ? '加载中...' : checked ? '已开启' : '已关闭'}
+      </p>
+    </div>
+  )
+}
+```
+
+## 自定义开关内容
+
+通过 `checkedNode` 设置选中状态的内容，通过 `unCheckedNode` 设置未选中状态的内容，可以设置：图标、文字等。选中状态的内容显示在开关右侧，未选中状态的内容显示在开关左侧。
+
+```tsx preview
+export default function CustomContentSwitch() {
+  const [checked1, setChecked1] = React.useState(true)
+  const [checked2, setChecked2] = React.useState(false)
+  const [checked3, setChecked3] = React.useState(true)
+
+  return (
+    <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
+      <Switch checkedNode='开' unCheckedNode='关' checked={checked1} onChange={setChecked1} />
+      <Switch checkedNode='1' unCheckedNode='0' checked={checked2} onChange={setChecked2} />
+      <Switch checkedNode='✓' unCheckedNode='✗' checked={checked3} onChange={setChecked3} />
+    </div>
+  )
+}
+```
+
+## 自定义背景色
+
+通过 `checkedColor` 设置选中状态的背景色，通过 `unCheckedColor` 设置未选中状态的背景色。
+
+```tsx preview
+export default function CustomColorSwitch() {
+  const [checked, setChecked] = React.useState(false)
+
+  return (
+    <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
+      <Switch checkedColor='green' unCheckedColor='red' checked={checked} onChange={setChecked} />
+    </div>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 属性           | 说明                 | 类型                              | 默认值  |
+| -------------- | -------------------- | --------------------------------- | ------- |
+| checked        | 是否选中（受控）     | `boolean`                         | -       |
+| defaultChecked | 默认是否选中         | `boolean`                         | `false` |
+| disabled       | 是否禁用             | `boolean`                         | `false` |
+| loading        | 是否加载中           | `boolean`                         | `false` |
+| checkedNode    | 选中状态显示的内容   | `React.ReactNode`                 | -       |
+| unCheckedNode  | 未选中状态显示的内容 | `React.ReactNode`                 | -       |
+| checkedColor   | 选中状态的背景色     | `string`                          | -       |
+| unCheckedColor | 未选中状态的背景色   | `string`                          | -       |
+| name           | 原生 input 的 name   | `string`                          | -       |
+| id             | 原生 input 的 id     | `string`                          | -       |
+| className      | 自定义类名           | `string`                          | -       |
+
+### Events
+
+| 事件名   | 说明             | 类型                      |
+| -------- | ---------------- | ------------------------- |
+| onChange | 状态改变时触发   | `(checked: boolean) => void` |
+
+### 键盘操作
+
+| 按键            | 说明       |
+| --------------- | ---------- |
+| Enter / Space   | 切换开关   |

package/docs/doc_build/404.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="generator" content="Rspress v1.47.0">
+    <title data-rh="true">404 - SevenDesign</title><meta data-rh="true" name="description" content="企业级 React UI 组件库"/>
+  <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.04bb58dd.js"></script><script defer src="/sevenDesign/static/js/index.0991c749.js"></script><link href="/sevenDesign/static/css/styles.5a3e7113.css" rel="stylesheet"></head>
+
+  <body >
+    <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="m-auto mt-50 p-16 sm:p-8 sm:pt-24 sm:pb-40 text-center flex-center flex-col"><p class="text-6xl font-semibold">404</p><h1 class="leading-5 pt-3 text-xl font-bold">PAGE NOT FOUND</h1><div style="height:1px" class="mt-6 mx-auto mb-4.5 w-16 bg-gray-light-1"></div><div class="pt-5"><a class="py-2 px-4 rounded-2xl inline-block border-solid border-brand text-brand font-medium hover:border-brand-dark hover:text-brand-dark transition-colors duration-300" href="/sevenDesign/" aria-label="go to home">Take me home</a></div></div></section></div>
+    <div id="search-container"></div>
+  </body>
+</html>

package/docs/doc_build/components/button.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="generator" content="Rspress v1.47.0">
+    <title data-rh="true">Button 按钮 - SevenDesign</title><meta data-rh="true" name="description" content="企业级 React UI 组件库"/>
+  <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.04bb58dd.js"></script><script defer src="/sevenDesign/static/js/index.0991c749.js"></script><link href="/sevenDesign/static/css/styles.5a3e7113.css" rel="stylesheet"></head>
+
+  <body >
+    <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></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/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></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>
+<p class="my-4 leading-7">常用的操作按钮。</p>
+<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>
+<p class="my-4 leading-7">使用 <code>type</code>、<code>plain</code>、<code>round</code> 和 <code>circle</code> 来定义按钮的样式。</p>
+<!-- -->
+<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>
+<p class="my-4 leading-7">使用 <code>plain</code> 属性来创建朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。</p>
+<!-- -->
+<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>
+<p class="my-4 leading-7">使用 <code>round</code> 属性来创建圆角按钮。</p>
+<!-- -->
+<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>
+<p class="my-4 leading-7">Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。</p>
+<!-- -->
+<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>
+<p class="my-4 leading-7">你可以使用 <code>disabled</code> 属性来定义按钮是否被禁用。</p>
+<!-- -->
+<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>
+<p class="my-4 leading-7">通过设置 <code>loading</code> 属性为 <code>true</code> 来显示加载中状态。</p>
+<!-- -->
+<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>
+<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>
+<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>
+<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>
+<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>
+    <div id="search-container"></div>
+  </body>
+</html>

package/docs/doc_build/components/input.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="generator" content="Rspress v1.47.0">
+    <title data-rh="true">Input 输入框 - SevenDesign</title><meta data-rh="true" name="description" content="企业级 React UI 组件库"/>
+  <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.04bb58dd.js"></script><script defer src="/sevenDesign/static/js/index.0991c749.js"></script><link href="/sevenDesign/static/css/styles.5a3e7113.css" rel="stylesheet"></head>
+
+  <body >
+    <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="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>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></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/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></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="input-输入框" 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="#input-输入框">#</a>Input 输入框</h1>
+<p class="my-4 leading-7">通过鼠标或键盘输入内容，是最基础的表单域的包装。</p>
+<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>
+<p class="my-4 leading-7">基本的输入框用法。</p>
+<!-- -->
+<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>
+<p class="my-4 leading-7">通过 <code>disabled</code> 属性指定是否禁用 input 组件。</p>
+<!-- -->
+<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>
+<p class="my-4 leading-7">使用 <code>clearable</code> 属性即可得到一个可清空的输入框。</p>
+<!-- -->
+<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>
+<p class="my-4 leading-7">使用 <code>showPassword</code> 属性即可得到一个可切换显示隐藏的密码框。</p>
+<!-- -->
+<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>
+<p class="my-4 leading-7">使用 <code>size</code> 属性改变输入框大小。除了默认大小外，还有另外两个选项：<code>large</code>、<code>small</code>。</p>
+<!-- -->
+<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>
+<p class="my-4 leading-7">使用 <code>prefixIcon</code> 和 <code>suffixIcon</code> 属性在 input 组件首部和尾部增加显示图标。</p>
+<!-- -->
+<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>
+<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>
+<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>string</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>text</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">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">readOnly</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">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">showPassword</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">prefixIcon</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">suffixIcon</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">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">-</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</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</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>
+<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>
+<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">onInput</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: string) =&gt; 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">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>(e: React.ChangeEvent) =&gt; 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">onClear</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>() =&gt; 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">onFocus</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.FocusEvent) =&gt; 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">onBlur</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.FocusEvent) =&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"><a href="/sevenDesign/components/button.html" class="link_a7cea pager-link_e0d2d"><span class="desc_dcc01">Previous Page</span><span class="title_a3acb">Button 按钮</span></a></div><div class="next_c11be flex flex-col"><a href="/sevenDesign/components/switch.html" class="link_a7cea pager-link_e0d2d next_ad355"><span class="desc_dcc01">Next Page</span><span class="title_a3acb">Switch 开关</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>
+    <div id="search-container"></div>
+  </body>
+</html>