(\"inline\"),\n [dark, setDark] = useState(false);\n return (\n \n \n \n \n \n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/collapsed.tsx",
"title": "缩起内嵌菜单",
"source": "import { Heart, Mail, PanelLeftClose, PanelLeftOpen, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, Menu, Switch, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { title: \"Option 1\", key: \"1-1\", icon: Mail },\n { title: \"Option 2\", key: \"2-1\", icon: Table },\n {\n title: \"Navigation Two\",\n key: \"3-1\",\n icon: Heart,\n children: [\n { title: \"Option 5\", key: \"3-1-1\", icon: Mail },\n { title: \"Option 6\", key: \"3-1-2\", icon: Mail },\n {\n title: \"SubMenu\",\n key: \"3-1-3\",\n icon: Mail,\n children: [\n { title: \"Option 7\", key: \"3-1-3-1\", icon: Mail },\n { title: \"Option 8\", key: \"3-1-3-2\", icon: Mail },\n ],\n },\n ],\n },\n {\n title: \"Navigation Three\",\n key: \"4-1\",\n icon: Settings,\n children: [\n { title: \"Option 9\", key: \"4-1-1\", icon: Mail },\n { title: \"Option 10\", key: \"4-1-2\", icon: Mail },\n { title: \"Option 11\", key: \"4-1-3\", icon: Mail },\n { title: \"Option 12\", key: \"4-1-4\", icon: Mail },\n ],\n },\n];\nexport default function App() {\n const [collapsed, setCollapsed] = useState(false),\n [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"3-1\", \"3-1-3\"]),\n [collapsedTooltip, setCollapsedTooltip] = useState(true);\n return (\n \n setCollapsed(!collapsed)}\n icon={collapsed ? PanelLeftOpen : PanelLeftClose}\n type=\"primary\"\n />\n \n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/group.tsx",
"title": "分组与分割线",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, MenuDivider, MenuGroup, MenuItem, SubMenu } from \"react-kui\";\n\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}"
}
]
},
{
"name": "MenuDivider",
"import": "import { MenuDivider } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/menu",
"props": [],
"nativeProps": [],
"nativeValueTypes": {},
"events": [],
"renderProps": [],
"behavior": {
"rules": []
},
"children": [],
"parent": "Menu",
"examples": [
{
"id": "components/menu/demo/basic.tsx",
"title": "顶部导航",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { title: \"Navigation One\", key: \"1\", icon: Mail },\n { title: \"Navigation Two\", key: \"2\", icon: Heart, disabled: true },\n {\n title: \"Navigation - Submenu\",\n key: \"3\",\n icon: Settings,\n children: [\n { title: \"Option 1\", key: \"3-1\" },\n { title: \"Option 2\", key: \"3-2\" },\n { title: \"Option 3\", key: \"3-3\" },\n { title: \"Option 4\", key: \"3-4\" },\n {\n title: \"Submenu\",\n key: \"3-5\",\n children: [1, 2, 3, 4].map((n) => ({ title: `Option ${n}`, key: `3-5-${n}` })),\n },\n ],\n },\n {\n title: (\n \n Navigation - Link\n \n ),\n key: \"4\",\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1\"]);\n return ;\n}"
},
{
"id": "components/menu/demo/inline.tsx",
"title": "内嵌菜单",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n {\n key: \"sub1\",\n icon: Mail,\n title: \"Navigation One\",\n children: [\n { key: \"1-1\", icon: Heart, title: \"Option 1\" },\n { key: \"1-2\", icon: Heart, title: \"Option 2\" },\n { key: \"1-3\", icon: Heart, title: \"Option 3\" },\n { key: \"1-4\", icon: Heart, title: \"Option 4\" },\n ],\n },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n {\n setOpenKeys(keys);\n console.log(keys);\n }}\n items={items}\n />\n
\n );\n}"
},
{
"id": "components/menu/demo/accordion.tsx",
"title": "只展开当前父级菜单",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n {\n title: \"Navigation One\",\n key: \"sub1\",\n icon: Mail,\n children: [\n { title: \"Option 1\", key: \"1-1\" },\n { title: \"Option 2\", key: \"1-2\" },\n { title: \"Option 3\", key: \"1-3\" },\n { title: \"Option 4\", key: \"1-4\" },\n ],\n },\n {\n title: \"Navigation Two\",\n key: \"sub2\",\n icon: Heart,\n children: [\n { title: \"Option 5\", key: \"2-1\" },\n { title: \"Option 6\", key: \"2-2\" },\n {\n title: \"Submenu\",\n key: \"sub2-1\",\n children: [\n { title: \"Option 7\", key: \"2-1-1\" },\n { title: \"Option 8\", key: \"2-1-2\" },\n ],\n },\n ],\n },\n {\n title: \"Navigation Three\",\n key: \"sub3\",\n icon: Settings,\n children: [\n { title: \"Option 9\", key: \"3-1\" },\n { title: \"Option 10\", key: \"3-2\" },\n { title: \"Option 11\", key: \"3-3\" },\n { title: \"Option 12\", key: \"3-4\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n {\n setOpenKeys(keys);\n console.log(keys);\n }}\n accordion\n mode=\"inline\"\n items={items}\n />\n
\n );\n}"
},
{
"id": "components/menu/demo/vertical.tsx",
"title": "垂直菜单",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]);\n return (\n \n
\n \n );\n}"
},
{
"id": "components/menu/demo/theme.tsx",
"title": "主题",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Switch, Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [dark, setDark] = useState(true),\n [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub2\"]);\n return (\n \n setDark(Boolean(value))}\n />\n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/mode.tsx",
"title": "切换菜单类型",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, type DirectionType, Space, Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub2\"]),\n [mode, setMode] = useState(\"inline\"),\n [dark, setDark] = useState(false);\n return (\n \n \n \n \n \n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/collapsed.tsx",
"title": "缩起内嵌菜单",
"source": "import { Heart, Mail, PanelLeftClose, PanelLeftOpen, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, Menu, Switch, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { title: \"Option 1\", key: \"1-1\", icon: Mail },\n { title: \"Option 2\", key: \"2-1\", icon: Table },\n {\n title: \"Navigation Two\",\n key: \"3-1\",\n icon: Heart,\n children: [\n { title: \"Option 5\", key: \"3-1-1\", icon: Mail },\n { title: \"Option 6\", key: \"3-1-2\", icon: Mail },\n {\n title: \"SubMenu\",\n key: \"3-1-3\",\n icon: Mail,\n children: [\n { title: \"Option 7\", key: \"3-1-3-1\", icon: Mail },\n { title: \"Option 8\", key: \"3-1-3-2\", icon: Mail },\n ],\n },\n ],\n },\n {\n title: \"Navigation Three\",\n key: \"4-1\",\n icon: Settings,\n children: [\n { title: \"Option 9\", key: \"4-1-1\", icon: Mail },\n { title: \"Option 10\", key: \"4-1-2\", icon: Mail },\n { title: \"Option 11\", key: \"4-1-3\", icon: Mail },\n { title: \"Option 12\", key: \"4-1-4\", icon: Mail },\n ],\n },\n];\nexport default function App() {\n const [collapsed, setCollapsed] = useState(false),\n [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"3-1\", \"3-1-3\"]),\n [collapsedTooltip, setCollapsedTooltip] = useState(true);\n return (\n \n setCollapsed(!collapsed)}\n icon={collapsed ? PanelLeftOpen : PanelLeftClose}\n type=\"primary\"\n />\n \n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/group.tsx",
"title": "分组与分割线",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, MenuDivider, MenuGroup, MenuItem, SubMenu } from \"react-kui\";\n\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}"
}
]
},
{
"name": "MenuGroup",
"import": "import { MenuGroup } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/menu",
"props": [
{
"name": "title",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "分组标题",
"descriptionEn": "Group title"
},
{
"name": "children",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "菜单子集",
"descriptionEn": "Menu children"
}
],
"nativeProps": [],
"nativeValueTypes": {},
"events": [],
"renderProps": [
"title",
"children"
],
"behavior": {
"rules": []
},
"children": [],
"parent": "Menu",
"examples": [
{
"id": "components/menu/demo/basic.tsx",
"title": "顶部导航",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { title: \"Navigation One\", key: \"1\", icon: Mail },\n { title: \"Navigation Two\", key: \"2\", icon: Heart, disabled: true },\n {\n title: \"Navigation - Submenu\",\n key: \"3\",\n icon: Settings,\n children: [\n { title: \"Option 1\", key: \"3-1\" },\n { title: \"Option 2\", key: \"3-2\" },\n { title: \"Option 3\", key: \"3-3\" },\n { title: \"Option 4\", key: \"3-4\" },\n {\n title: \"Submenu\",\n key: \"3-5\",\n children: [1, 2, 3, 4].map((n) => ({ title: `Option ${n}`, key: `3-5-${n}` })),\n },\n ],\n },\n {\n title: (\n \n Navigation - Link\n \n ),\n key: \"4\",\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1\"]);\n return ;\n}"
},
{
"id": "components/menu/demo/inline.tsx",
"title": "内嵌菜单",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n {\n key: \"sub1\",\n icon: Mail,\n title: \"Navigation One\",\n children: [\n { key: \"1-1\", icon: Heart, title: \"Option 1\" },\n { key: \"1-2\", icon: Heart, title: \"Option 2\" },\n { key: \"1-3\", icon: Heart, title: \"Option 3\" },\n { key: \"1-4\", icon: Heart, title: \"Option 4\" },\n ],\n },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n {\n setOpenKeys(keys);\n console.log(keys);\n }}\n items={items}\n />\n
\n );\n}"
},
{
"id": "components/menu/demo/accordion.tsx",
"title": "只展开当前父级菜单",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n {\n title: \"Navigation One\",\n key: \"sub1\",\n icon: Mail,\n children: [\n { title: \"Option 1\", key: \"1-1\" },\n { title: \"Option 2\", key: \"1-2\" },\n { title: \"Option 3\", key: \"1-3\" },\n { title: \"Option 4\", key: \"1-4\" },\n ],\n },\n {\n title: \"Navigation Two\",\n key: \"sub2\",\n icon: Heart,\n children: [\n { title: \"Option 5\", key: \"2-1\" },\n { title: \"Option 6\", key: \"2-2\" },\n {\n title: \"Submenu\",\n key: \"sub2-1\",\n children: [\n { title: \"Option 7\", key: \"2-1-1\" },\n { title: \"Option 8\", key: \"2-1-2\" },\n ],\n },\n ],\n },\n {\n title: \"Navigation Three\",\n key: \"sub3\",\n icon: Settings,\n children: [\n { title: \"Option 9\", key: \"3-1\" },\n { title: \"Option 10\", key: \"3-2\" },\n { title: \"Option 11\", key: \"3-3\" },\n { title: \"Option 12\", key: \"3-4\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n {\n setOpenKeys(keys);\n console.log(keys);\n }}\n accordion\n mode=\"inline\"\n items={items}\n />\n
\n );\n}"
},
{
"id": "components/menu/demo/vertical.tsx",
"title": "垂直菜单",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]);\n return (\n \n
\n \n );\n}"
},
{
"id": "components/menu/demo/theme.tsx",
"title": "主题",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Switch, Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [dark, setDark] = useState(true),\n [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub2\"]);\n return (\n \n setDark(Boolean(value))}\n />\n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/mode.tsx",
"title": "切换菜单类型",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, type DirectionType, Space, Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub2\"]),\n [mode, setMode] = useState(\"inline\"),\n [dark, setDark] = useState(false);\n return (\n \n \n \n \n \n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/collapsed.tsx",
"title": "缩起内嵌菜单",
"source": "import { Heart, Mail, PanelLeftClose, PanelLeftOpen, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, Menu, Switch, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { title: \"Option 1\", key: \"1-1\", icon: Mail },\n { title: \"Option 2\", key: \"2-1\", icon: Table },\n {\n title: \"Navigation Two\",\n key: \"3-1\",\n icon: Heart,\n children: [\n { title: \"Option 5\", key: \"3-1-1\", icon: Mail },\n { title: \"Option 6\", key: \"3-1-2\", icon: Mail },\n {\n title: \"SubMenu\",\n key: \"3-1-3\",\n icon: Mail,\n children: [\n { title: \"Option 7\", key: \"3-1-3-1\", icon: Mail },\n { title: \"Option 8\", key: \"3-1-3-2\", icon: Mail },\n ],\n },\n ],\n },\n {\n title: \"Navigation Three\",\n key: \"4-1\",\n icon: Settings,\n children: [\n { title: \"Option 9\", key: \"4-1-1\", icon: Mail },\n { title: \"Option 10\", key: \"4-1-2\", icon: Mail },\n { title: \"Option 11\", key: \"4-1-3\", icon: Mail },\n { title: \"Option 12\", key: \"4-1-4\", icon: Mail },\n ],\n },\n];\nexport default function App() {\n const [collapsed, setCollapsed] = useState(false),\n [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"3-1\", \"3-1-3\"]),\n [collapsedTooltip, setCollapsedTooltip] = useState(true);\n return (\n \n setCollapsed(!collapsed)}\n icon={collapsed ? PanelLeftOpen : PanelLeftClose}\n type=\"primary\"\n />\n \n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/group.tsx",
"title": "分组与分割线",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, MenuDivider, MenuGroup, MenuItem, SubMenu } from \"react-kui\";\n\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}"
}
]
},
{
"name": "MenuItem",
"import": "import { MenuItem } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/menu",
"props": [
{
"name": "itemKey",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "item 的唯一标志",
"descriptionEn": "Unique identifier for item"
},
{
"name": "menuKey",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "菜单身份标识的兼容回退值，仅在未设置 itemKey 时使用；新代码优先使用 itemKey。",
"descriptionEn": "Compatibility fallback for item identity, used only when itemKey is absent; prefer itemKey in new code."
},
{
"name": "icon",
"type": "React.ReactNode | IconType[]",
"required": false,
"boolean": false,
"descriptionZh": "item 的图标",
"descriptionEn": "Item icon"
},
{
"name": "title",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "分组标题",
"descriptionEn": "Group title"
},
{
"name": "disabled",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"defaultExpression": "false",
"descriptionZh": "是否禁用",
"descriptionEn": "Whether disabled"
},
{
"name": "onClick",
"type": "React.MouseEventHandler | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击菜单项时触发",
"descriptionEn": "Called when the menu item is activated"
},
{
"name": "children",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "菜单子集",
"descriptionEn": "Menu children"
},
{
"name": "className",
"type": "string | undefined",
"required": false,
"boolean": false,
"defaultExpression": "\"\"",
"descriptionZh": "追加到菜单项 li 元素的 CSS 类名。",
"descriptionEn": "Additional CSS classes on the menu item's li element."
},
{
"name": "style",
"type": "React.CSSProperties | undefined",
"required": false,
"boolean": false,
"descriptionZh": "菜单项 li 元素的内联样式；内联模式嵌套缩进可能覆盖 paddingLeft。",
"descriptionEn": "Inline styles on the menu item's li element; nested inline-menu indentation may override paddingLeft."
}
],
"nativeProps": [],
"nativeValueTypes": {},
"events": [
{
"name": "onClick",
"type": "React.MouseEventHandler | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击菜单项时触发",
"descriptionEn": "Called when the menu item is activated"
}
],
"renderProps": [
"icon",
"title",
"children"
],
"behavior": {
"rules": [
"Use itemKey to identify the menu item. React key alone is not forwarded as itemKey."
]
},
"children": [],
"parent": "Menu",
"examples": [
{
"id": "components/menu/demo/basic.tsx",
"title": "顶部导航",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { title: \"Navigation One\", key: \"1\", icon: Mail },\n { title: \"Navigation Two\", key: \"2\", icon: Heart, disabled: true },\n {\n title: \"Navigation - Submenu\",\n key: \"3\",\n icon: Settings,\n children: [\n { title: \"Option 1\", key: \"3-1\" },\n { title: \"Option 2\", key: \"3-2\" },\n { title: \"Option 3\", key: \"3-3\" },\n { title: \"Option 4\", key: \"3-4\" },\n {\n title: \"Submenu\",\n key: \"3-5\",\n children: [1, 2, 3, 4].map((n) => ({ title: `Option ${n}`, key: `3-5-${n}` })),\n },\n ],\n },\n {\n title: (\n \n Navigation - Link\n \n ),\n key: \"4\",\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1\"]);\n return ;\n}"
},
{
"id": "components/menu/demo/inline.tsx",
"title": "内嵌菜单",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n {\n key: \"sub1\",\n icon: Mail,\n title: \"Navigation One\",\n children: [\n { key: \"1-1\", icon: Heart, title: \"Option 1\" },\n { key: \"1-2\", icon: Heart, title: \"Option 2\" },\n { key: \"1-3\", icon: Heart, title: \"Option 3\" },\n { key: \"1-4\", icon: Heart, title: \"Option 4\" },\n ],\n },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n {\n setOpenKeys(keys);\n console.log(keys);\n }}\n items={items}\n />\n
\n );\n}"
},
{
"id": "components/menu/demo/accordion.tsx",
"title": "只展开当前父级菜单",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n {\n title: \"Navigation One\",\n key: \"sub1\",\n icon: Mail,\n children: [\n { title: \"Option 1\", key: \"1-1\" },\n { title: \"Option 2\", key: \"1-2\" },\n { title: \"Option 3\", key: \"1-3\" },\n { title: \"Option 4\", key: \"1-4\" },\n ],\n },\n {\n title: \"Navigation Two\",\n key: \"sub2\",\n icon: Heart,\n children: [\n { title: \"Option 5\", key: \"2-1\" },\n { title: \"Option 6\", key: \"2-2\" },\n {\n title: \"Submenu\",\n key: \"sub2-1\",\n children: [\n { title: \"Option 7\", key: \"2-1-1\" },\n { title: \"Option 8\", key: \"2-1-2\" },\n ],\n },\n ],\n },\n {\n title: \"Navigation Three\",\n key: \"sub3\",\n icon: Settings,\n children: [\n { title: \"Option 9\", key: \"3-1\" },\n { title: \"Option 10\", key: \"3-2\" },\n { title: \"Option 11\", key: \"3-3\" },\n { title: \"Option 12\", key: \"3-4\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n {\n setOpenKeys(keys);\n console.log(keys);\n }}\n accordion\n mode=\"inline\"\n items={items}\n />\n
\n );\n}"
},
{
"id": "components/menu/demo/vertical.tsx",
"title": "垂直菜单",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]);\n return (\n \n
\n \n );\n}"
},
{
"id": "components/menu/demo/theme.tsx",
"title": "主题",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Switch, Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [dark, setDark] = useState(true),\n [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub2\"]);\n return (\n \n setDark(Boolean(value))}\n />\n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/mode.tsx",
"title": "切换菜单类型",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, type DirectionType, Space, Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub2\"]),\n [mode, setMode] = useState(\"inline\"),\n [dark, setDark] = useState(false);\n return (\n \n \n \n \n \n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/collapsed.tsx",
"title": "缩起内嵌菜单",
"source": "import { Heart, Mail, PanelLeftClose, PanelLeftOpen, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, Menu, Switch, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { title: \"Option 1\", key: \"1-1\", icon: Mail },\n { title: \"Option 2\", key: \"2-1\", icon: Table },\n {\n title: \"Navigation Two\",\n key: \"3-1\",\n icon: Heart,\n children: [\n { title: \"Option 5\", key: \"3-1-1\", icon: Mail },\n { title: \"Option 6\", key: \"3-1-2\", icon: Mail },\n {\n title: \"SubMenu\",\n key: \"3-1-3\",\n icon: Mail,\n children: [\n { title: \"Option 7\", key: \"3-1-3-1\", icon: Mail },\n { title: \"Option 8\", key: \"3-1-3-2\", icon: Mail },\n ],\n },\n ],\n },\n {\n title: \"Navigation Three\",\n key: \"4-1\",\n icon: Settings,\n children: [\n { title: \"Option 9\", key: \"4-1-1\", icon: Mail },\n { title: \"Option 10\", key: \"4-1-2\", icon: Mail },\n { title: \"Option 11\", key: \"4-1-3\", icon: Mail },\n { title: \"Option 12\", key: \"4-1-4\", icon: Mail },\n ],\n },\n];\nexport default function App() {\n const [collapsed, setCollapsed] = useState(false),\n [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"3-1\", \"3-1-3\"]),\n [collapsedTooltip, setCollapsedTooltip] = useState(true);\n return (\n \n setCollapsed(!collapsed)}\n icon={collapsed ? PanelLeftOpen : PanelLeftClose}\n type=\"primary\"\n />\n \n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/group.tsx",
"title": "分组与分割线",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, MenuDivider, MenuGroup, MenuItem, SubMenu } from \"react-kui\";\n\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}"
}
]
},
{
"name": "SubMenu",
"import": "import { SubMenu } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/menu",
"props": [
{
"name": "itemKey",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "item 的唯一标志",
"descriptionEn": "Unique identifier for item"
},
{
"name": "menuKey",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "菜单身份标识的兼容回退值，仅在未设置 itemKey 时使用；新代码优先使用 itemKey。",
"descriptionEn": "Compatibility fallback for item identity, used only when itemKey is absent; prefer itemKey in new code."
},
{
"name": "disabled",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"defaultExpression": "false",
"descriptionZh": "是否禁用",
"descriptionEn": "Whether disabled"
},
{
"name": "title",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "分组标题",
"descriptionEn": "Group title"
},
{
"name": "icon",
"type": "IconType[] | undefined",
"required": false,
"boolean": false,
"descriptionZh": "item 的图标",
"descriptionEn": "Item icon"
},
{
"name": "children",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "菜单子集",
"descriptionEn": "Menu children"
}
],
"nativeProps": [],
"nativeValueTypes": {},
"events": [],
"renderProps": [
"title",
"children"
],
"behavior": {
"rules": []
},
"children": [],
"parent": "Menu",
"examples": [
{
"id": "components/menu/demo/basic.tsx",
"title": "顶部导航",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { title: \"Navigation One\", key: \"1\", icon: Mail },\n { title: \"Navigation Two\", key: \"2\", icon: Heart, disabled: true },\n {\n title: \"Navigation - Submenu\",\n key: \"3\",\n icon: Settings,\n children: [\n { title: \"Option 1\", key: \"3-1\" },\n { title: \"Option 2\", key: \"3-2\" },\n { title: \"Option 3\", key: \"3-3\" },\n { title: \"Option 4\", key: \"3-4\" },\n {\n title: \"Submenu\",\n key: \"3-5\",\n children: [1, 2, 3, 4].map((n) => ({ title: `Option ${n}`, key: `3-5-${n}` })),\n },\n ],\n },\n {\n title: (\n \n Navigation - Link\n \n ),\n key: \"4\",\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1\"]);\n return ;\n}"
},
{
"id": "components/menu/demo/inline.tsx",
"title": "内嵌菜单",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n {\n key: \"sub1\",\n icon: Mail,\n title: \"Navigation One\",\n children: [\n { key: \"1-1\", icon: Heart, title: \"Option 1\" },\n { key: \"1-2\", icon: Heart, title: \"Option 2\" },\n { key: \"1-3\", icon: Heart, title: \"Option 3\" },\n { key: \"1-4\", icon: Heart, title: \"Option 4\" },\n ],\n },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n {\n setOpenKeys(keys);\n console.log(keys);\n }}\n items={items}\n />\n
\n );\n}"
},
{
"id": "components/menu/demo/accordion.tsx",
"title": "只展开当前父级菜单",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n {\n title: \"Navigation One\",\n key: \"sub1\",\n icon: Mail,\n children: [\n { title: \"Option 1\", key: \"1-1\" },\n { title: \"Option 2\", key: \"1-2\" },\n { title: \"Option 3\", key: \"1-3\" },\n { title: \"Option 4\", key: \"1-4\" },\n ],\n },\n {\n title: \"Navigation Two\",\n key: \"sub2\",\n icon: Heart,\n children: [\n { title: \"Option 5\", key: \"2-1\" },\n { title: \"Option 6\", key: \"2-2\" },\n {\n title: \"Submenu\",\n key: \"sub2-1\",\n children: [\n { title: \"Option 7\", key: \"2-1-1\" },\n { title: \"Option 8\", key: \"2-1-2\" },\n ],\n },\n ],\n },\n {\n title: \"Navigation Three\",\n key: \"sub3\",\n icon: Settings,\n children: [\n { title: \"Option 9\", key: \"3-1\" },\n { title: \"Option 10\", key: \"3-2\" },\n { title: \"Option 11\", key: \"3-3\" },\n { title: \"Option 12\", key: \"3-4\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n {\n setOpenKeys(keys);\n console.log(keys);\n }}\n accordion\n mode=\"inline\"\n items={items}\n />\n
\n );\n}"
},
{
"id": "components/menu/demo/vertical.tsx",
"title": "垂直菜单",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]);\n return (\n \n
\n \n );\n}"
},
{
"id": "components/menu/demo/theme.tsx",
"title": "主题",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Switch, Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [dark, setDark] = useState(true),\n [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub2\"]);\n return (\n \n setDark(Boolean(value))}\n />\n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/mode.tsx",
"title": "切换菜单类型",
"source": "import { Heart, Mail, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, type DirectionType, Space, Menu, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { key: \"1-1\", icon: Mail, title: \"Option 1\" },\n { key: \"1-2\", icon: Table, title: \"Option 2\" },\n {\n key: \"sub2\",\n icon: Heart,\n title: \"Navigation Two\",\n children: [\n { key: \"2-1\", title: \"Option 5\" },\n { key: \"2-2\", title: \"Option 6\" },\n {\n key: \"sub2-1\",\n title: \"SubMenu\",\n children: [\n { key: \"2-3\", title: \"Option 7\" },\n { key: \"2-4\", title: \"Option 8\" },\n ],\n },\n ],\n },\n {\n key: \"sub3\",\n icon: Settings,\n title: \"Navigation Three\",\n children: [\n { key: \"3-1\", title: \"Option 9\" },\n { key: \"3-2\", title: \"Option 10\" },\n { key: \"3-3\", title: \"Option 11\" },\n { key: \"3-4\", title: \"Option 12\" },\n ],\n },\n];\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub2\"]),\n [mode, setMode] = useState(\"inline\"),\n [dark, setDark] = useState(false);\n return (\n \n \n \n \n \n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/collapsed.tsx",
"title": "缩起内嵌菜单",
"source": "import { Heart, Mail, PanelLeftClose, PanelLeftOpen, Settings, Table } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, Menu, Switch, type MenuOptionsProps } from \"react-kui\";\nconst items: MenuOptionsProps[] = [\n { title: \"Option 1\", key: \"1-1\", icon: Mail },\n { title: \"Option 2\", key: \"2-1\", icon: Table },\n {\n title: \"Navigation Two\",\n key: \"3-1\",\n icon: Heart,\n children: [\n { title: \"Option 5\", key: \"3-1-1\", icon: Mail },\n { title: \"Option 6\", key: \"3-1-2\", icon: Mail },\n {\n title: \"SubMenu\",\n key: \"3-1-3\",\n icon: Mail,\n children: [\n { title: \"Option 7\", key: \"3-1-3-1\", icon: Mail },\n { title: \"Option 8\", key: \"3-1-3-2\", icon: Mail },\n ],\n },\n ],\n },\n {\n title: \"Navigation Three\",\n key: \"4-1\",\n icon: Settings,\n children: [\n { title: \"Option 9\", key: \"4-1-1\", icon: Mail },\n { title: \"Option 10\", key: \"4-1-2\", icon: Mail },\n { title: \"Option 11\", key: \"4-1-3\", icon: Mail },\n { title: \"Option 12\", key: \"4-1-4\", icon: Mail },\n ],\n },\n];\nexport default function App() {\n const [collapsed, setCollapsed] = useState(false),\n [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"3-1\", \"3-1-3\"]),\n [collapsedTooltip, setCollapsedTooltip] = useState(true);\n return (\n \n setCollapsed(!collapsed)}\n icon={collapsed ? PanelLeftOpen : PanelLeftClose}\n type=\"primary\"\n />\n \n
\n
\n \n
\n );\n}"
},
{
"id": "components/menu/demo/group.tsx",
"title": "分组与分割线",
"source": "import { Heart, Mail, Settings } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Menu, MenuDivider, MenuGroup, MenuItem, SubMenu } from \"react-kui\";\n\nexport default function App() {\n const [current, setCurrent] = useState([\"1-1\"]),\n [openKeys, setOpenKeys] = useState([\"sub1\"]);\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}"
}
]
},
{
"name": "Mentions",
"import": "import { Mentions } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/mentions",
"props": [
{
"name": "value",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "文本",
"descriptionEn": "text"
},
{
"name": "options",
"type": "(string | MentionOption)[] | undefined",
"required": false,
"boolean": false,
"defaultExpression": "EMPTY_OPTIONS",
"descriptionZh": "候选项",
"descriptionEn": "Suggestions"
},
{
"name": "triggers",
"type": "string[] | undefined",
"required": false,
"boolean": false,
"defaultExpression": "[\"@\"]",
"descriptionZh": "触发字符",
"descriptionEn": "Trigger strings"
},
{
"name": "rows",
"type": "number | undefined",
"required": false,
"boolean": false,
"defaultExpression": "1",
"descriptionZh": "文本域行数",
"descriptionEn": "Textarea rows"
},
{
"name": "placement",
"type": "DropPlacementsType | undefined",
"required": false,
"enumValues": [
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right"
],
"boolean": false,
"defaultExpression": "\"bottom-left\"",
"descriptionZh": "下拉菜单优先位置",
"descriptionEn": "Preferred dropdown placement"
},
{
"name": "destroyOnClose",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"defaultExpression": "true",
"descriptionZh": "关闭后是否销毁面板内容。默认销毁（重开时重新挂载）；设为 false 可保留面板内已填写的表单状态，代价是每个打开过的实例留一份隐藏 DOM",
"descriptionEn": "Whether to destroy panel content after closing. Destroyed by default (remounted on reopen); set false to keep form state at the cost of one hidden DOM node per opened instance"
},
{
"name": "size",
"type": "SizeType | undefined",
"required": false,
"enumValues": [
"small",
"medium",
"large"
],
"boolean": false,
"descriptionZh": "尺寸",
"descriptionEn": "Size"
},
{
"name": "shape",
"type": "ShapeType | undefined",
"required": false,
"enumValues": [
"round",
"default",
"square",
"circle"
],
"boolean": false,
"descriptionZh": "形状",
"descriptionEn": "Shape"
},
{
"name": "theme",
"type": "ThemeType | undefined",
"required": false,
"enumValues": [
"dashed",
"solid",
"fill",
"outline",
"plain",
"underlined"
],
"boolean": false,
"defaultExpression": "themeProp ?? inheritedAppearance.theme ?? \"fill\"",
"descriptionZh": "主题，画在内部文本域上，可用档位与 TextArea 一致",
"descriptionEn": "Theme, painted on the inner text area; supports the same tiers as TextArea"
},
{
"name": "emptyText",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "空状态说明",
"descriptionEn": "Empty-state text"
},
{
"name": "loading",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"defaultExpression": "false",
"descriptionZh": "是否显示加载状态",
"descriptionEn": "Whether to show loading"
},
{
"name": "loadingText",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "加载状态文案",
"descriptionEn": "Loading text"
},
{
"name": "clearable",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"defaultExpression": "true",
"descriptionZh": "是否显示清除按钮",
"descriptionEn": "Whether to show the clear button"
},
{
"name": "filterOption",
"type": "((query: string, option: MentionOption) => boolean) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "自定义过滤",
"descriptionEn": "Custom filter"
},
{
"name": "onChange",
"type": "((value: string) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "文本变化",
"descriptionEn": "Text change"
},
{
"name": "onSearch",
"type": "((query: string, trigger: string) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "远程搜索，参数为搜索词与触发字符",
"descriptionEn": "Remote search with query and trigger"
},
{
"name": "onSelect",
"type": "((option: MentionOption, trigger: string) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "选择提及",
"descriptionEn": "Mention selected"
},
{
"name": "onClear",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击清除按钮",
"descriptionEn": "Clear button clicked"
}
],
"nativeProps": [
"suppressContentEditableWarning",
"suppressHydrationWarning",
"accessKey",
"autoCapitalize",
"autoFocus",
"className",
"contentEditable",
"contextMenu",
"dir",
"draggable",
"enterKeyHint",
"hidden",
"id",
"lang",
"nonce",
"slot",
"spellCheck",
"style",
"tabIndex",
"title",
"translate",
"radioGroup",
"role",
"about",
"content",
"datatype",
"inlist",
"prefix",
"property",
"rel",
"resource",
"rev",
"typeof",
"vocab",
"autoCorrect",
"autoSave",
"color",
"itemProp",
"itemScope",
"itemType",
"itemID",
"itemRef",
"results",
"security",
"unselectable",
"popover",
"popoverTargetAction",
"popoverTarget",
"inert",
"inputMode",
"is",
"exportparts",
"part",
"aria-activedescendant",
"aria-atomic",
"aria-autocomplete",
"aria-braillelabel",
"aria-brailleroledescription",
"aria-busy",
"aria-checked",
"aria-colcount",
"aria-colindex",
"aria-colindextext",
"aria-colspan",
"aria-controls",
"aria-current",
"aria-describedby",
"aria-description",
"aria-details",
"aria-disabled",
"aria-dropeffect",
"aria-errormessage",
"aria-expanded",
"aria-flowto",
"aria-grabbed",
"aria-haspopup",
"aria-hidden",
"aria-invalid",
"aria-keyshortcuts",
"aria-label",
"aria-labelledby",
"aria-level",
"aria-live",
"aria-modal",
"aria-multiline",
"aria-multiselectable",
"aria-orientation",
"aria-owns",
"aria-placeholder",
"aria-posinset",
"aria-pressed",
"aria-readonly",
"aria-relevant",
"aria-required",
"aria-roledescription",
"aria-rowcount",
"aria-rowindex",
"aria-rowindextext",
"aria-rowspan",
"aria-selected",
"aria-setsize",
"aria-sort",
"aria-valuemax",
"aria-valuemin",
"aria-valuenow",
"aria-valuetext",
"children",
"dangerouslySetInnerHTML",
"onCopy",
"onCopyCapture",
"onCut",
"onCutCapture",
"onPaste",
"onPasteCapture",
"onCompositionEnd",
"onCompositionEndCapture",
"onCompositionStart",
"onCompositionStartCapture",
"onCompositionUpdate",
"onCompositionUpdateCapture",
"onFocus",
"onFocusCapture",
"onBlur",
"onBlurCapture",
"onChangeCapture",
"onBeforeInput",
"onBeforeInputCapture",
"onInput",
"onInputCapture",
"onReset",
"onResetCapture",
"onSubmit",
"onSubmitCapture",
"onInvalid",
"onInvalidCapture",
"onLoad",
"onLoadCapture",
"onError",
"onErrorCapture",
"onKeyDown",
"onKeyDownCapture",
"onKeyPress",
"onKeyPressCapture",
"onKeyUp",
"onKeyUpCapture",
"onAbort",
"onAbortCapture",
"onCanPlay",
"onCanPlayCapture",
"onCanPlayThrough",
"onCanPlayThroughCapture",
"onDurationChange",
"onDurationChangeCapture",
"onEmptied",
"onEmptiedCapture",
"onEncrypted",
"onEncryptedCapture",
"onEnded",
"onEndedCapture",
"onLoadedData",
"onLoadedDataCapture",
"onLoadedMetadata",
"onLoadedMetadataCapture",
"onLoadStart",
"onLoadStartCapture",
"onPause",
"onPauseCapture",
"onPlay",
"onPlayCapture",
"onPlaying",
"onPlayingCapture",
"onProgress",
"onProgressCapture",
"onRateChange",
"onRateChangeCapture",
"onSeeked",
"onSeekedCapture",
"onSeeking",
"onSeekingCapture",
"onStalled",
"onStalledCapture",
"onSuspend",
"onSuspendCapture",
"onTimeUpdate",
"onTimeUpdateCapture",
"onVolumeChange",
"onVolumeChangeCapture",
"onWaiting",
"onWaitingCapture",
"onAuxClick",
"onAuxClickCapture",
"onClick",
"onClickCapture",
"onContextMenu",
"onContextMenuCapture",
"onDoubleClick",
"onDoubleClickCapture",
"onDrag",
"onDragCapture",
"onDragEnd",
"onDragEndCapture",
"onDragEnter",
"onDragEnterCapture",
"onDragExit",
"onDragExitCapture",
"onDragLeave",
"onDragLeaveCapture",
"onDragOver",
"onDragOverCapture",
"onDragStart",
"onDragStartCapture",
"onDrop",
"onDropCapture",
"onMouseDown",
"onMouseDownCapture",
"onMouseEnter",
"onMouseLeave",
"onMouseMove",
"onMouseMoveCapture",
"onMouseOut",
"onMouseOutCapture",
"onMouseOver",
"onMouseOverCapture",
"onMouseUp",
"onMouseUpCapture",
"onSelectCapture",
"onTouchCancel",
"onTouchCancelCapture",
"onTouchEnd",
"onTouchEndCapture",
"onTouchMove",
"onTouchMoveCapture",
"onTouchStart",
"onTouchStartCapture",
"onPointerDown",
"onPointerDownCapture",
"onPointerMove",
"onPointerMoveCapture",
"onPointerUp",
"onPointerUpCapture",
"onPointerCancel",
"onPointerCancelCapture",
"onPointerEnter",
"onPointerLeave",
"onPointerOver",
"onPointerOverCapture",
"onPointerOut",
"onPointerOutCapture",
"onGotPointerCapture",
"onGotPointerCaptureCapture",
"onLostPointerCapture",
"onLostPointerCaptureCapture",
"onScroll",
"onScrollCapture",
"onScrollEnd",
"onScrollEndCapture",
"onWheel",
"onWheelCapture",
"onAnimationStart",
"onAnimationStartCapture",
"onAnimationEnd",
"onAnimationEndCapture",
"onAnimationIteration",
"onAnimationIterationCapture",
"onToggle",
"onBeforeToggle",
"onTransitionCancel",
"onTransitionCancelCapture",
"onTransitionEnd",
"onTransitionEndCapture",
"onTransitionRun",
"onTransitionRunCapture",
"onTransitionStart",
"onTransitionStartCapture",
"form",
"disabled",
"wrap",
"autoComplete",
"maxLength",
"minLength",
"name",
"placeholder",
"readOnly",
"required",
"cols",
"dirName"
],
"nativeValueTypes": {
"suppressContentEditableWarning": "boolean",
"suppressHydrationWarning": "boolean",
"accessKey": "string",
"autoFocus": "boolean",
"className": "string",
"contextMenu": "string",
"dir": "string",
"enterKeyHint": "string",
"hidden": "boolean",
"id": "string",
"lang": "string",
"nonce": "string",
"slot": "string",
"tabIndex": "number",
"title": "string",
"translate": "string",
"radioGroup": "string",
"about": "string",
"content": "string",
"datatype": "string",
"prefix": "string",
"property": "string",
"rel": "string",
"resource": "string",
"rev": "string",
"typeof": "string",
"vocab": "string",
"autoCorrect": "string",
"autoSave": "string",
"color": "string",
"itemProp": "string",
"itemScope": "boolean",
"itemType": "string",
"itemID": "string",
"itemRef": "string",
"results": "number",
"security": "string",
"unselectable": "string",
"popover": "string",
"popoverTargetAction": "string",
"popoverTarget": "string",
"inert": "boolean",
"inputMode": "string",
"is": "string",
"exportparts": "string",
"part": "string",
"aria-activedescendant": "string",
"aria-autocomplete": "string",
"aria-braillelabel": "string",
"aria-brailleroledescription": "string",
"aria-colcount": "number",
"aria-colindex": "number",
"aria-colindextext": "string",
"aria-colspan": "number",
"aria-controls": "string",
"aria-describedby": "string",
"aria-description": "string",
"aria-details": "string",
"aria-dropeffect": "string",
"aria-errormessage": "string",
"aria-flowto": "string",
"aria-keyshortcuts": "string",
"aria-label": "string",
"aria-labelledby": "string",
"aria-level": "number",
"aria-live": "string",
"aria-orientation": "string",
"aria-owns": "string",
"aria-placeholder": "string",
"aria-posinset": "number",
"aria-relevant": "string",
"aria-roledescription": "string",
"aria-rowcount": "number",
"aria-rowindex": "number",
"aria-rowindextext": "string",
"aria-rowspan": "number",
"aria-setsize": "number",
"aria-sort": "string",
"aria-valuemax": "number",
"aria-valuemin": "number",
"aria-valuenow": "number",
"aria-valuetext": "string",
"form": "string",
"disabled": "boolean",
"wrap": "string",
"autoComplete": "string",
"maxLength": "number",
"minLength": "number",
"name": "string",
"placeholder": "string",
"readOnly": "boolean",
"required": "boolean",
"cols": "number",
"dirName": "string"
},
"events": [
{
"name": "onChange",
"type": "((value: string) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "文本变化",
"descriptionEn": "Text change"
},
{
"name": "onSearch",
"type": "((query: string, trigger: string) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "远程搜索，参数为搜索词与触发字符",
"descriptionEn": "Remote search with query and trigger"
},
{
"name": "onSelect",
"type": "((option: MentionOption, trigger: string) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "选择提及",
"descriptionEn": "Mention selected"
},
{
"name": "onClear",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击清除按钮",
"descriptionEn": "Clear button clicked"
}
],
"renderProps": [
"filterOption"
],
"behavior": {
"rules": []
},
"children": [],
"examples": [
{
"id": "components/mentions/demo/basic.tsx",
"title": "基础用法",
"source": "import { Mentions } from \"react-kui\";\nimport { useState } from \"react\";\nexport default function App() {\n const [value, setValue] = useState(\"\");\n return (\n \n );\n}"
},
{
"id": "components/mentions/demo/triggers.tsx",
"title": "多个触发字符",
"source": "import { Mentions } from \"react-kui\";\nimport { useState } from \"react\";\nexport default function App() {\n const [value, setValue] = useState(\"\");\n return (\n \n );\n}"
},
{
"id": "components/mentions/demo/filter.tsx",
"title": "自定义过滤",
"source": "import { useState } from \"react\";\nimport { Mentions, type MentionOption } from \"react-kui\";\n\nconst options = [\"Alice\", \"Alex\", \"Bob\", \"Bella\"];\nconst startsWith = (query: string, option: MentionOption) =>\n option.value.toLowerCase().startsWith(query.toLowerCase());\n\nexport default function App() {\n const [value, setValue] = useState(\"\");\n return (\n \n );\n}"
},
{
"id": "components/mentions/demo/remote.tsx",
"title": "远程搜索",
"source": "import { useRef, useState } from \"react\";\nimport { Mentions } from \"react-kui\";\n\nconst members = [\"Alice\", \"Alex\", \"Bob\", \"Bella\", \"Cindy\"];\n\nexport default function App() {\n const [value, setValue] = useState(\"\");\n const [options, setOptions] = useState([]);\n const [loading, setLoading] = useState(false);\n const timer = useRef | null>(null);\n const search = (query: string) => {\n if (timer.current) clearTimeout(timer.current);\n setLoading(true);\n timer.current = setTimeout(() => {\n setOptions(\n members.filter((member) => member.toLocaleLowerCase().includes(query.toLocaleLowerCase())),\n );\n setLoading(false);\n }, 1000);\n };\n return (\n \n );\n}"
},
{
"id": "components/mentions/demo/size.tsx",
"title": "尺寸",
"source": "import { Mentions, Space } from \"react-kui\";\n\nconst options = [\"产品\", \"设计\", \"研发\"];\n\nexport default function App() {\n return (\n \n \n \n \n \n );\n}"
},
{
"id": "components/mentions/demo/appearance.tsx",
"title": "尺寸、主题与形状",
"source": "import { Mentions, Space } from \"react-kui\";\nconst options = [\"产品\", \"设计\", \"研发\"];\nexport default function App() {\n return (\n \n \n \n \n \n );\n}"
},
{
"id": "components/mentions/demo/empty.tsx",
"title": "空状态",
"source": "import { Mentions } from \"react-kui\";\nexport default function App() {\n return ;\n}"
},
{
"id": "components/mentions/demo/rows.tsx",
"title": "行数",
"source": "import { Mentions, Space } from \"react-kui\";\nconst options = [\"小北\", \"设计团队\", \"开发团队\"];\nexport default function App() {\n return (\n \n \n \n \n );\n}"
},
{
"id": "components/mentions/demo/placement.tsx",
"title": "下拉位置",
"source": "import { Mentions, Space } from \"react-kui\";\nconst options = [\"小北\", \"设计团队\", \"开发团队\"];\nexport default function App() {\n return (\n \n \n \n \n );\n}"
}
]
},
{
"name": "MessagePanel",
"import": "import { MessagePanel } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/notice",
"props": [
{
"name": "title",
"type": "ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "通知提醒的标题",
"descriptionEn": "Notification title"
},
{
"name": "content",
"type": "ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "提示内容",
"descriptionEn": "Prompt content"
},
{
"name": "color",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "自定义图标颜色",
"descriptionEn": "Custom icon color"
},
{
"name": "icon",
"type": "IconType[] | undefined",
"required": false,
"boolean": false,
"descriptionZh": "自定义图标",
"descriptionEn": "Custom icon"
},
{
"name": "type",
"type": "NoticeType | undefined",
"required": false,
"enumValues": [
"info",
"success",
"warning",
"error",
"loading"
],
"boolean": false,
"descriptionZh": "消息语义类型，影响状态类名和默认图标；icon 可覆盖默认图标。",
"descriptionEn": "Semantic message type controlling status classes and the default icon; icon can override that icon."
},
{
"name": "onClose",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "关闭时的回调",
"descriptionEn": "Callback when closing"
},
{
"name": "duration",
"type": "number | undefined",
"required": false,
"boolean": false,
"descriptionZh": "自动关闭的延时，单位秒，不关闭可以写 0",
"descriptionEn": "Auto-close delay, in seconds, 0 means not closed"
},
{
"name": "closable",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "是否显示关闭按钮；点击时调用 onClose，独立面板由调用方处理移除。",
"descriptionEn": "Whether to show the close button; clicking calls onClose, and the caller handles removal of a standalone panel."
},
{
"name": "grouping",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "分组标识；相同标识的通知复用原条目并重新计时",
"descriptionEn": "Group key; notices with the same key reuse the existing entry and reset its timer"
}
],
"nativeProps": [],
"nativeValueTypes": {},
"events": [
{
"name": "onClose",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "关闭时的回调",
"descriptionEn": "Callback when closing"
}
],
"renderProps": [
"title",
"content"
],
"behavior": {
"rules": []
},
"children": [],
"examples": [
{
"id": "components/notice/demo/basic.tsx",
"title": "基本用法",
"source": "import { Button, Space, notice } from \"react-kui\";\nexport default function App() {\n return (\n \n \n notice.open({ title: \"Title\", content: \"The content of the notice.\", duration: 5 })\n }\n >\n Notice\n \n \n );\n}"
},
{
"id": "components/notice/demo/grouping.tsx",
"title": "合并通知",
"source": "import { useRef } from \"react\";\nimport { Button, notice } from \"react-kui\";\n\nexport default function App() {\n const count = useRef(0);\n return (\n {\n count.current += 1;\n notice.info({\n title: \"Task Progress\",\n content: `Processed ${count.current} batch${count.current > 1 ? \"es\" : \"\"}.`,\n grouping: \"task-batch\",\n });\n }}\n >\n Update Notice\n \n );\n}"
},
{
"id": "components/notice/demo/types.tsx",
"title": "带图标的提醒",
"source": "import { Button, Space, notice } from \"react-kui\";\nconst types = [\"info\", \"warning\", \"success\", \"error\"] as const;\nexport default function App() {\n return (\n \n {types.map((type) => (\n notice[type]({ title: \"Title\", content: \"Content message.\", duration: 5 })}\n >\n {type[0].toUpperCase() + type.slice(1)}\n \n ))}\n \n );\n}"
},
{
"id": "components/notice/demo/icon.tsx",
"title": "自定义图标",
"source": "import { LogoAlipay, LogoWechat } from \"kui-icons\";\nimport { Button, Space, notice } from \"react-kui\";\nexport default function App() {\n return (\n \n \n notice.open({\n icon: LogoAlipay,\n color: \"#0082d9ff\",\n title: \"Dear user, hello\",\n content:\n \"We are pleased to inform you that you don't need to repay your Huabei balance next month!\",\n duration: 10,\n })\n }\n />\n \n notice.open({\n icon: LogoWechat,\n color: \"#00c87b\",\n title: \"Dear user, hello\",\n content: (\n \n
\n WeChat has added some new features, and we invite you to try them out!\n
\n
\n
This is the content of a basic modal.
\n More content...
\n \n setOverlayVisible(false)}\n >\n This is the content of a basic modal.
\n More content...
\n \n \n );\n}"
},
{
"id": "components/modal/demo/custom.tsx",
"title": "自定义",
"source": "import { Save } from \"kui-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Button, Input, Modal, Space } from \"react-kui\";\n\nexport default function App() {\n const [open, setOpen] = useState(null);\n const [loading, setLoading] = useState(false);\n const timer = useRef | null>(null);\n const close = () => {\n setOpen(null);\n setLoading(false);\n };\n const submit = () => {\n setLoading(true);\n timer.current = setTimeout(() => {\n setLoading(false);\n setOpen(null);\n }, 2000);\n };\n const openChange = (id: number) => (next: boolean) => (next ? setOpen(id) : close());\n // 组件卸载时把还没跑完的异步保存停掉。\n useEffect(\n () => () => {\n if (timer.current) clearTimeout(timer.current);\n },\n [],\n );\n return (\n \n \n \n \n \n \n \n \n content
\n \n \n content
\n \n \n content
\n \n \n Save\n \n }\n >\n content
\n \n \n Yes, I'm fine!
\n \n \n \n Name: \n
\n \n \n );\n}"
},
{
"id": "components/modal/demo/more.tsx",
"title": "其它属性",
"source": "import { useState } from \"react\";\nimport { Button, Modal, Space } from \"react-kui\";\n\nconst text = `A long time ago, In a beautiful kingdom,\nthere lived a young king and queen,\nthe people loved them so much;`;\nexport default function App() {\n const [open, setOpen] = useState(null);\n const close = () => setOpen(null);\n const openChange = (id: number) => (next: boolean) => setOpen(next ? id : null);\n return (\n \n \n \n \n \n \n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n );\n}"
},
{
"id": "components/modal/demo/global.tsx",
"title": "全局模式",
"source": "import { Moon } from \"kui-icons\";\nimport { Button, message, Space, modal } from \"react-kui\";\n\nconst success = () =>\n modal.success({\n title: \"Successfully Done\",\n content: \"Congratulations on your successful operation!\",\n onOk: () => {\n message.info(\"success\");\n },\n });\nconst error = () =>\n modal.error({\n title: \"Failed\",\n content: \"Sorry, operation failed！\",\n onOk: () => {\n message.info(\"error\");\n },\n });\nconst warning = () =>\n modal.warning({\n title: \"Warning\",\n content: \"This is a warning message.\",\n onOk: () => {\n message.info(\"warning\");\n },\n });\nconst info = () =>\n modal.info({\n title: \"Alert\",\n content: \"You opened a modal.\",\n onOk: () => {\n message.info(\"info\");\n },\n });\nconst show = () =>\n modal.show({\n title: \"I am a modal\",\n content: \"See the light through the mist.\",\n icon: Moon,\n color: \"#eccb23\",\n onOk: () => {\n message.info(\"show\");\n },\n });\nexport default function App() {\n return (\n \n \n \n \n \n \n \n );\n}"
},
{
"id": "components/modal/demo/confirm.tsx",
"title": "提示框",
"source": "import { Button, message, Space, modal } from \"react-kui\";\n\nconst confirm = () =>\n modal.confirm({\n title: \"Are you sure to do this?\",\n content: \"This operation is irreversible, proceed with caution!!!\",\n onOk: () => {\n message.success(\"you clicked ok\");\n },\n onCancel: () => {\n message.info(\"you clicked cancel\");\n },\n });\nconst custom = () =>\n modal.confirm({\n title: \"Are you Ok?\",\n content: \"Yes , I am fine, and you?\",\n okText: \"OK\",\n cancelText: \"Cancel\",\n });\nconst asyncConfirm = () =>\n modal.confirm({\n title: \"Are you sure to do this?\",\n content: \"This operation is irreversible, proceed with caution!!!\",\n onOk: () => new Promise((resolve) => setTimeout(resolve, 2000)),\n });\nconst closeAll = () => {\n for (let index = 0; index < 3; index += 1)\n setTimeout(\n () =>\n modal.confirm({\n title: \"Destroy All\",\n content: \"A surprise of the universe\",\n cancelText: \"Close all\",\n onCancel: modal.destroyAll,\n onOk: () => new Promise((resolve) => setTimeout(resolve, 2000)),\n }),\n index * 500\n );\n};\nexport default function App() {\n return (\n \n \n \n \n \n \n );\n}"
}
]
},
{
"name": "ModalPanel",
"import": "import { ModalPanel } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/modal",
"props": [
{
"name": "className",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "追加到 k-modal-panel 根容器的 CSS 类名。",
"descriptionEn": "Additional CSS classes on the k-modal-panel root container."
},
{
"name": "title",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "对话框标题，字符串之外可给任意节点",
"descriptionEn": "Dialog title, accepts nodes as well as text"
},
{
"name": "content",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "对话框内容，字符串之外可给任意节点",
"descriptionEn": "Dialog content, accepts nodes as well as text"
},
{
"name": "children",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "独立面板的标准正文；真值 content 会替换整个标准内容区。",
"descriptionEn": "Standard body of the standalone panel; truthy content replaces the entire standard content region."
},
{
"name": "destroyOnClose",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "关闭后是否销毁窗口内容。默认销毁（重开时重新挂载）；设为 false 可保留窗口内已填写的表单状态，代价是打开过的窗口留一份隐藏 DOM",
"descriptionEn": "Whether to destroy dialog content after closing. Destroyed by default (remounted on reopen); set false to keep form state at the cost of one hidden DOM node per opened dialog"
},
{
"name": "onOpenChange",
"type": "((opened: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "窗口关闭时的回调；打开是调用方自己翻 `open`，不会再回传一次",
"descriptionEn": "Fires when the window closes; opening is your own `open` flip, so it is never echoed back"
},
{
"name": "onAfterClose",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "关闭动画结束后的回调",
"descriptionEn": "Callback after the close animation finishes"
},
{
"name": "panelOnly",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "只渲染弹窗面板本身，不包含遮罩、动画与全局事件",
"descriptionEn": "Render only the modal panel, without mask, animation, or global events"
},
{
"name": "top",
"type": "number | undefined",
"required": false,
"boolean": false,
"descriptionZh": "窗口距离顶部的距离",
"descriptionEn": "Distance from the top of the window"
},
{
"name": "footer",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "当`footer=false`时不展示底部按钮，给节点时用它替换整个底部",
"descriptionEn": "When `footer=false` the footer is hidden; pass a node to replace the whole footer."
},
{
"name": "width",
"type": "string | number | undefined",
"required": false,
"boolean": false,
"descriptionZh": "对话框宽度",
"descriptionEn": "Dialog width"
},
{
"name": "loading",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "为`true`时此时确定按钮为加载状态",
"descriptionEn": "When set to `true`, the confirm button will be in a loading state"
},
{
"name": "onClose",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "窗口关闭的回调",
"descriptionEn": "Callback when window closes"
},
{
"name": "okText",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "确定按钮文字",
"descriptionEn": "OK button text"
},
{
"name": "cancelText",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "取消按钮文字",
"descriptionEn": "Cancel button text"
},
{
"name": "showClose",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "是否展示关闭按钮",
"descriptionEn": "Whether to display the close button"
},
{
"name": "escKey",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "是否支持按 Esc 关闭",
"descriptionEn": "Whether to support closing with Esc key"
},
{
"name": "onOk",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击确定的回调；返回 Promise 时关闭时机交给组件：resolve 后关窗，reject 只停 loading 并保持窗口打开",
"descriptionEn": "Callback when OK is clicked; returning a Promise hands the closing timing to the component — resolve closes it, reject only stops loading and keeps it open"
},
{
"name": "onCancel",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击取消的回调",
"descriptionEn": "Callback when Cancel is clicked"
}
],
"nativeProps": [],
"nativeValueTypes": {},
"events": [
{
"name": "onOpenChange",
"type": "((opened: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "窗口关闭时的回调；打开是调用方自己翻 `open`，不会再回传一次",
"descriptionEn": "Fires when the window closes; opening is your own `open` flip, so it is never echoed back"
},
{
"name": "onAfterClose",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "关闭动画结束后的回调",
"descriptionEn": "Callback after the close animation finishes"
},
{
"name": "onClose",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "窗口关闭的回调",
"descriptionEn": "Callback when window closes"
},
{
"name": "onOk",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击确定的回调；返回 Promise 时关闭时机交给组件：resolve 后关窗，reject 只停 loading 并保持窗口打开",
"descriptionEn": "Callback when OK is clicked; returning a Promise hands the closing timing to the component — resolve closes it, reject only stops loading and keeps it open"
},
{
"name": "onCancel",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击取消的回调",
"descriptionEn": "Callback when Cancel is clicked"
}
],
"renderProps": [
"title",
"content",
"children",
"footer"
],
"behavior": {
"rules": []
},
"children": [],
"examples": [
{
"id": "components/modal/demo/basic.tsx",
"title": "基本用法",
"source": "import { useState } from \"react\";\nimport { Button, Modal, Space } from \"react-kui\";\n\nexport default function App() {\n const [visible, setVisible] = useState(false);\n const [overlayVisible, setOverlayVisible] = useState(false);\n return (\n \n \n \n setVisible(false)}\n >\n This is the content of a basic modal.
\n More content...
\n \n setOverlayVisible(false)}\n >\n This is the content of a basic modal.
\n More content...
\n \n \n );\n}"
},
{
"id": "components/modal/demo/custom.tsx",
"title": "自定义",
"source": "import { Save } from \"kui-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Button, Input, Modal, Space } from \"react-kui\";\n\nexport default function App() {\n const [open, setOpen] = useState(null);\n const [loading, setLoading] = useState(false);\n const timer = useRef | null>(null);\n const close = () => {\n setOpen(null);\n setLoading(false);\n };\n const submit = () => {\n setLoading(true);\n timer.current = setTimeout(() => {\n setLoading(false);\n setOpen(null);\n }, 2000);\n };\n const openChange = (id: number) => (next: boolean) => (next ? setOpen(id) : close());\n // 组件卸载时把还没跑完的异步保存停掉。\n useEffect(\n () => () => {\n if (timer.current) clearTimeout(timer.current);\n },\n [],\n );\n return (\n \n \n \n \n \n \n \n \n content
\n \n \n content
\n \n \n content
\n \n \n Save\n \n }\n >\n content
\n \n \n Yes, I'm fine!
\n \n \n \n Name: \n
\n \n \n );\n}"
},
{
"id": "components/modal/demo/more.tsx",
"title": "其它属性",
"source": "import { useState } from \"react\";\nimport { Button, Modal, Space } from \"react-kui\";\n\nconst text = `A long time ago, In a beautiful kingdom,\nthere lived a young king and queen,\nthe people loved them so much;`;\nexport default function App() {\n const [open, setOpen] = useState(null);\n const close = () => setOpen(null);\n const openChange = (id: number) => (next: boolean) => setOpen(next ? id : null);\n return (\n \n \n \n \n \n \n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n );\n}"
},
{
"id": "components/modal/demo/global.tsx",
"title": "全局模式",
"source": "import { Moon } from \"kui-icons\";\nimport { Button, message, Space, modal } from \"react-kui\";\n\nconst success = () =>\n modal.success({\n title: \"Successfully Done\",\n content: \"Congratulations on your successful operation!\",\n onOk: () => {\n message.info(\"success\");\n },\n });\nconst error = () =>\n modal.error({\n title: \"Failed\",\n content: \"Sorry, operation failed！\",\n onOk: () => {\n message.info(\"error\");\n },\n });\nconst warning = () =>\n modal.warning({\n title: \"Warning\",\n content: \"This is a warning message.\",\n onOk: () => {\n message.info(\"warning\");\n },\n });\nconst info = () =>\n modal.info({\n title: \"Alert\",\n content: \"You opened a modal.\",\n onOk: () => {\n message.info(\"info\");\n },\n });\nconst show = () =>\n modal.show({\n title: \"I am a modal\",\n content: \"See the light through the mist.\",\n icon: Moon,\n color: \"#eccb23\",\n onOk: () => {\n message.info(\"show\");\n },\n });\nexport default function App() {\n return (\n \n \n \n \n \n \n \n );\n}"
},
{
"id": "components/modal/demo/confirm.tsx",
"title": "提示框",
"source": "import { Button, message, Space, modal } from \"react-kui\";\n\nconst confirm = () =>\n modal.confirm({\n title: \"Are you sure to do this?\",\n content: \"This operation is irreversible, proceed with caution!!!\",\n onOk: () => {\n message.success(\"you clicked ok\");\n },\n onCancel: () => {\n message.info(\"you clicked cancel\");\n },\n });\nconst custom = () =>\n modal.confirm({\n title: \"Are you Ok?\",\n content: \"Yes , I am fine, and you?\",\n okText: \"OK\",\n cancelText: \"Cancel\",\n });\nconst asyncConfirm = () =>\n modal.confirm({\n title: \"Are you sure to do this?\",\n content: \"This operation is irreversible, proceed with caution!!!\",\n onOk: () => new Promise((resolve) => setTimeout(resolve, 2000)),\n });\nconst closeAll = () => {\n for (let index = 0; index < 3; index += 1)\n setTimeout(\n () =>\n modal.confirm({\n title: \"Destroy All\",\n content: \"A surprise of the universe\",\n cancelText: \"Close all\",\n onCancel: modal.destroyAll,\n onOk: () => new Promise((resolve) => setTimeout(resolve, 2000)),\n }),\n index * 500\n );\n};\nexport default function App() {\n return (\n \n \n \n \n \n \n );\n}"
}
]
},
{
"name": "NoticePanel",
"import": "import { NoticePanel } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/notice",
"props": [
{
"name": "title",
"type": "ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "通知提醒的标题",
"descriptionEn": "Notification title"
},
{
"name": "content",
"type": "ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "提示内容",
"descriptionEn": "Prompt content"
},
{
"name": "color",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "自定义图标颜色",
"descriptionEn": "Custom icon color"
},
{
"name": "icon",
"type": "IconType[] | undefined",
"required": false,
"boolean": false,
"descriptionZh": "自定义图标",
"descriptionEn": "Custom icon"
},
{
"name": "type",
"type": "NoticeType | undefined",
"required": false,
"enumValues": [
"info",
"success",
"warning",
"error",
"loading"
],
"boolean": false,
"descriptionZh": "消息语义类型，影响状态类名和默认图标；icon 可覆盖默认图标。",
"descriptionEn": "Semantic message type controlling status classes and the default icon; icon can override that icon."
},
{
"name": "onClose",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "关闭时的回调",
"descriptionEn": "Callback when closing"
},
{
"name": "duration",
"type": "number | undefined",
"required": false,
"boolean": false,
"descriptionZh": "自动关闭的延时，单位秒，不关闭可以写 0",
"descriptionEn": "Auto-close delay, in seconds, 0 means not closed"
},
{
"name": "closable",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "共享面板类型中的属性；当前 NoticePanel 始终显示关闭按钮，此属性不会隐藏它。",
"descriptionEn": "A prop inherited from the shared panel type; NoticePanel currently always shows its close button, so this prop does not hide it."
},
{
"name": "grouping",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "分组标识；相同标识的通知复用原条目并重新计时",
"descriptionEn": "Group key; notices with the same key reuse the existing entry and reset its timer"
}
],
"nativeProps": [],
"nativeValueTypes": {},
"events": [
{
"name": "onClose",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "关闭时的回调",
"descriptionEn": "Callback when closing"
}
],
"renderProps": [
"title",
"content"
],
"behavior": {
"rules": []
},
"children": [],
"examples": [
{
"id": "components/notice/demo/basic.tsx",
"title": "基本用法",
"source": "import { Button, Space, notice } from \"react-kui\";\nexport default function App() {\n return (\n \n \n notice.open({ title: \"Title\", content: \"The content of the notice.\", duration: 5 })\n }\n >\n Notice\n \n \n );\n}"
},
{
"id": "components/notice/demo/grouping.tsx",
"title": "合并通知",
"source": "import { useRef } from \"react\";\nimport { Button, notice } from \"react-kui\";\n\nexport default function App() {\n const count = useRef(0);\n return (\n {\n count.current += 1;\n notice.info({\n title: \"Task Progress\",\n content: `Processed ${count.current} batch${count.current > 1 ? \"es\" : \"\"}.`,\n grouping: \"task-batch\",\n });\n }}\n >\n Update Notice\n \n );\n}"
},
{
"id": "components/notice/demo/types.tsx",
"title": "带图标的提醒",
"source": "import { Button, Space, notice } from \"react-kui\";\nconst types = [\"info\", \"warning\", \"success\", \"error\"] as const;\nexport default function App() {\n return (\n \n {types.map((type) => (\n notice[type]({ title: \"Title\", content: \"Content message.\", duration: 5 })}\n >\n {type[0].toUpperCase() + type.slice(1)}\n \n ))}\n \n );\n}"
},
{
"id": "components/notice/demo/icon.tsx",
"title": "自定义图标",
"source": "import { LogoAlipay, LogoWechat } from \"kui-icons\";\nimport { Button, Space, notice } from \"react-kui\";\nexport default function App() {\n return (\n \n \n notice.open({\n icon: LogoAlipay,\n color: \"#0082d9ff\",\n title: \"Dear user, hello\",\n content:\n \"We are pleased to inform you that you don't need to repay your Huabei balance next month!\",\n duration: 10,\n })\n }\n />\n \n notice.open({\n icon: LogoWechat,\n color: \"#00c87b\",\n title: \"Dear user, hello\",\n content: (\n \n
\n WeChat has added some new features, and we invite you to try them out!\n
\n
\n
theme & shape\n \n \n \n \n );\n}"
},
{
"id": "components/page/demo/sizer-elevator.tsx",
"title": "条目 / 跳转",
"source": "import { useState } from \"react\";\nimport { Space, Page } from \"react-kui\";\n\nexport default function App() {\n const [page, setPage] = useState(3);\n const sizeData = [30, 50, 80, 100];\n const onChange = (nextPage: number) => setPage(nextPage);\n\n return (\n \n \n showSizer\n \n showElevator\n \n disabled\n \n \n );\n}"
},
{
"id": "components/page/demo/size.tsx",
"title": "尺寸",
"source": "import { useState } from \"react\";\nimport { Space, Page } from \"react-kui\";\n\nexport default function App() {\n const [page, setPage] = useState(1);\n return (\n \n \n \n \n \n );\n}"
},
{
"id": "components/page/demo/simple.tsx",
"title": "简洁分页",
"source": "import { useState } from \"react\";\nimport { Page, Space } from \"react-kui\";\n\nexport default function App() {\n const [page, setPage] = useState(2);\n return (\n \n setPage(nextPage)}\n simple\n total={80}\n pageSize={10}\n />\n setPage(nextPage)}\n simple\n showElevator\n total={1000}\n pageSize={10}\n />\n setPage(nextPage)}\n simple\n size=\"small\"\n theme=\"outline\"\n total={80}\n pageSize={10}\n />\n \n \n );\n}"
},
{
"id": "components/page/demo/responsive.tsx",
"title": "自适应分页",
"source": "import { Page } from \"react-kui\";\n\nexport default function App() {\n return (\n \n \n \n );\n}"
},
{
"id": "components/page/demo/appearance.tsx",
"title": "外观",
"source": "import { Page, type SurfaceThemeType } from \"react-kui\";\n\n// The tier lands on the page-number cells, not on the bar around them: `fill` — the pager's own look — gives\n// each cell a pale plate, `outline` and `dashed` edge them instead, `plain` leaves them bare, and `solid`\n// plates them on the primary and inverts the digits and the ellipsis. The current page flips to a white cell\n// with primary digits under `solid`, and the total line plus the previous/next arrows keep the bar's own\n// background in every tier — they are not cells.\nconst tiers: SurfaceThemeType[] = [\"fill\", \"outline\", \"plain\", \"solid\", \"dashed\"];\n\nexport default function App() {\n return (\n \n {tiers.map((tier) => (\n
\n ))}\n
See the light through the mist!
\n See the light through the mist!
\n \n }\n >\n \n \n \n );\n}"
},
{
"id": "components/poptip/demo/trigger.tsx",
"title": "触发模式",
"source": "import { Button, Space, Poptip } from \"react-kui\";\n\nconst content = (\n <>\n See the light through the mist!
\n See the light through the mist!
\n \n);\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}"
},
{
"id": "components/poptip/demo/closeinside.tsx",
"title": "从浮层内关闭",
"source": "import { useState } from \"react\";\nimport { Button, Poptip } from \"react-kui\";\n\nexport default function App() {\n const [open, setOpen] = useState(false);\n return (\n setOpen(false)} size=\"small\">\n Close\n \n }\n >\n \n \n );\n}"
},
{
"id": "components/poptip/demo/placement.tsx",
"title": "位置",
"source": "import { Button, Flex, Space, Poptip } from \"react-kui\";\n\nconst tip = \"See the light through the mist!\";\nconst item = (placement: Parameters[0][\"placement\"], label: string) => (\n \n {tip}
\n {tip}
\n \n }\n >\n \n \n);\nexport default function App() {\n return (\n \n \n {item(\"top-left\", \"TL\")}\n {item(\"top\", \"Top\")}\n {item(\"top-right\", \"TR\")}\n \n \n \n {item(\"left-top\", \"LT\")}\n {item(\"left\", \"Left\")}\n {item(\"left-bottom\", \"LB\")}\n \n \n {item(\"right-top\", \"RT\")}\n {item(\"right\", \"Right\")}\n {item(\"right-bottom\", \"RB\")}\n \n \n \n {item(\"bottom-left\", \"BL\")}\n {item(\"bottom\", \"Bottom\")}\n {item(\"bottom-right\", \"BR\")}\n \n \n );\n}"
}
]
},
{
"name": "PoptipPanel",
"import": "import { PoptipPanel } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/poptip",
"props": [
{
"name": "title",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "显示的标题",
"descriptionEn": "Displayed title"
},
{
"name": "content",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "显示的正文内容",
"descriptionEn": "Displayed main content"
},
{
"name": "placement",
"type": "PlacementsType | undefined",
"required": false,
"enumValues": [
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"left-bottom",
"left-top",
"right",
"right-top",
"right-bottom"
],
"boolean": false,
"descriptionZh": "提示框出现的位置，可选值为`top`，`top-left`，`top-right`，`bottom`，`bottom-left`，`bottom-right`，`left`，`left-top`，`left-bottom`，`right`，`right-top`，`right-bottom`",
"descriptionEn": "Position where the tooltip appears"
},
{
"name": "trigger",
"type": "\"hover\" | \"click\" | \"focus\" | undefined",
"required": false,
"enumValues": [
"hover",
"click",
"focus"
],
"boolean": false,
"descriptionZh": "触发方式，可选值为 `hover`（悬停）`click`（点击）",
"descriptionEn": "Trigger method, optional values: `hover` (hover) `click` (click)"
},
{
"name": "destroyOnClose",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "关闭后是否销毁面板内容。默认销毁（重开时重新挂载）；设为 false 可保留面板内已填写的表单状态，代价是每个打开过的实例留一份隐藏 DOM",
"descriptionEn": "Whether to destroy panel content after closing. Destroyed by default (remounted on reopen); set false to keep form state at the cost of one hidden DOM node per opened instance"
},
{
"name": "onOpenChange",
"type": "((open: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "显示状态变化时触发",
"descriptionEn": "Called when visibility is requested to change"
},
{
"name": "panelOnly",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "只渲染浮层本身，不包含触发元素、定位与动画",
"descriptionEn": "Render only the popup itself, without trigger, positioning, or animation"
},
{
"name": "width",
"type": "string | number | undefined",
"required": false,
"boolean": false,
"descriptionZh": "展示的宽度,默认为内容区域的大小",
"descriptionEn": "Display width, defaults to content area size"
},
{
"name": "dark",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "是否使用暗色主题",
"descriptionEn": "Use dark theme"
},
{
"name": "onClose",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "关闭时的回调",
"descriptionEn": "Callback when closed"
},
{
"name": "onShowChange",
"type": "((show: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "已废弃，请使用 `onOpenChange`",
"descriptionEn": "Deprecated; use `onOpenChange` instead"
}
],
"nativeProps": [],
"nativeValueTypes": {},
"events": [
{
"name": "onOpenChange",
"type": "((open: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "显示状态变化时触发",
"descriptionEn": "Called when visibility is requested to change"
},
{
"name": "onClose",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "关闭时的回调",
"descriptionEn": "Callback when closed"
},
{
"name": "onShowChange",
"type": "((show: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "已废弃，请使用 `onOpenChange`",
"descriptionEn": "Deprecated; use `onOpenChange` instead"
}
],
"renderProps": [
"title",
"content"
],
"behavior": {
"rules": []
},
"children": [],
"examples": [
{
"id": "components/poptip/demo/basic.tsx",
"title": "基本用法",
"source": "import { Button, Space, Poptip } from \"react-kui\";\n\nexport default function App() {\n return (\n \n See the light through the mist!}>\n \n \n \n See the light through the mist!
\n See the light through the mist!
\n \n }\n >\n \n \n \n );\n}"
},
{
"id": "components/poptip/demo/trigger.tsx",
"title": "触发模式",
"source": "import { Button, Space, Poptip } from \"react-kui\";\n\nconst content = (\n <>\n See the light through the mist!
\n See the light through the mist!
\n \n);\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}"
},
{
"id": "components/poptip/demo/closeinside.tsx",
"title": "从浮层内关闭",
"source": "import { useState } from \"react\";\nimport { Button, Poptip } from \"react-kui\";\n\nexport default function App() {\n const [open, setOpen] = useState(false);\n return (\n setOpen(false)} size=\"small\">\n Close\n \n }\n >\n \n \n );\n}"
},
{
"id": "components/poptip/demo/placement.tsx",
"title": "位置",
"source": "import { Button, Flex, Space, Poptip } from \"react-kui\";\n\nconst tip = \"See the light through the mist!\";\nconst item = (placement: Parameters[0][\"placement\"], label: string) => (\n \n {tip}
\n {tip}
\n \n }\n >\n \n \n);\nexport default function App() {\n return (\n \n \n {item(\"top-left\", \"TL\")}\n {item(\"top\", \"Top\")}\n {item(\"top-right\", \"TR\")}\n \n \n \n {item(\"left-top\", \"LT\")}\n {item(\"left\", \"Left\")}\n {item(\"left-bottom\", \"LB\")}\n \n \n {item(\"right-top\", \"RT\")}\n {item(\"right\", \"Right\")}\n {item(\"right-bottom\", \"RB\")}\n \n \n \n {item(\"bottom-left\", \"BL\")}\n {item(\"bottom\", \"Bottom\")}\n {item(\"bottom-right\", \"BR\")}\n \n \n );\n}"
}
]
},
{
"name": "Popconfirm",
"import": "import { Popconfirm } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/popconfirm",
"props": [
{
"name": "dark",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"defaultExpression": "false",
"descriptionZh": "是否展示暗色主题",
"descriptionEn": "Whether to display dark theme"
},
{
"name": "open",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "显示状态",
"descriptionEn": "visibility"
},
{
"name": "show",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "已废弃，请使用 `open`",
"descriptionEn": "Deprecated; use `open` instead"
},
{
"name": "title",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "显示的标题",
"descriptionEn": "Displayed title"
},
{
"name": "width",
"type": "string | number | undefined",
"required": false,
"boolean": false,
"descriptionZh": "展示的宽度,默认为内容区域的大小",
"descriptionEn": "Display width, defaults to content area size"
},
{
"name": "okText",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "确定按钮的文字，",
"descriptionEn": "OK button text"
},
{
"name": "cancelText",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "取消按钮的文字，",
"descriptionEn": "Cancel button text"
},
{
"name": "placement",
"type": "PlacementsType | undefined",
"required": false,
"enumValues": [
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"left-bottom",
"left-top",
"right",
"right-top",
"right-bottom"
],
"boolean": false,
"defaultExpression": "\"top\"",
"descriptionZh": "提示框出现的位置，可选值为`top`，`top-left`，`top-right`，`bottom`，`bottom-left`，`bottom-right`，`left`，`left-top`，`left-bottom`，`right`，`right-top`，`right-bottom`",
"descriptionEn": "Position where the tooltip appears, optional values: `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `left`, `left-top`, `left-bottom`, `right`, `right-top`, `right-bottom`"
},
{
"name": "destroyOnClose",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"defaultExpression": "true",
"descriptionZh": "关闭后是否销毁面板内容。默认销毁（重开时重新挂载）；设为 false 可保留面板内已填写的表单状态，代价是每个打开过的实例留一份隐藏 DOM",
"descriptionEn": "Whether to destroy panel content after closing. Destroyed by default (remounted on reopen); set false to keep form state at the cost of one hidden DOM node per opened instance"
},
{
"name": "panelOnly",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"defaultExpression": "false",
"descriptionZh": "只渲染浮层本身，不包含触发元素、定位与动画",
"descriptionEn": "Render only the popup itself, without trigger, positioning, or animation"
},
{
"name": "onCancel",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击取消的回调，",
"descriptionEn": "Callback when cancel is clicked"
},
{
"name": "onOk",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击确定的回调，",
"descriptionEn": "Callback when OK is clicked"
},
{
"name": "onOpenChange",
"type": "((open: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "显示状态变化时触发",
"descriptionEn": "Called when visibility is requested to change"
},
{
"name": "onShowChange",
"type": "((show: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "已废弃，请使用 `onOpenChange`",
"descriptionEn": "Deprecated; use `onOpenChange` instead"
},
{
"name": "children",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "确认气泡的触发内容，不是气泡正文。",
"descriptionEn": "Trigger content for the confirmation popup, not its body."
}
],
"nativeProps": [],
"nativeValueTypes": {},
"events": [
{
"name": "onCancel",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击取消的回调，",
"descriptionEn": "Callback when cancel is clicked"
},
{
"name": "onOk",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击确定的回调，",
"descriptionEn": "Callback when OK is clicked"
},
{
"name": "onOpenChange",
"type": "((open: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "显示状态变化时触发",
"descriptionEn": "Called when visibility is requested to change"
},
{
"name": "onShowChange",
"type": "((show: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "已废弃，请使用 `onOpenChange`",
"descriptionEn": "Deprecated; use `onOpenChange` instead"
}
],
"renderProps": [
"title",
"children"
],
"behavior": {
"rules": []
},
"children": [],
"examples": [
{
"id": "components/popconfirm/demo/basic.tsx",
"title": "基本用法",
"source": "import { message, Popconfirm } from \"react-kui\";\nexport default function App() {\n return (\n message.success(\"Clicked on ok\")}\n onCancel={() => message.info(\"Clicked on cancel\")}\n >\n Delete\n \n );\n}"
},
{
"id": "components/popconfirm/demo/local.tsx",
"title": "国际化",
"source": "import { Button, message, Space, Popconfirm } from \"react-kui\";\nconst ok = () => message.success(\"Clicked on ok\"),\n cancel = () => message.info(\"Clicked on cancel\");\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n );\n}"
},
{
"id": "components/popconfirm/demo/placement.tsx",
"title": "位置",
"source": "import { Button, Flex, Space, Popconfirm } from \"react-kui\";\nconst title = \"Are you sure to delete this task?\";\nconst item = (placement: Parameters[0][\"placement\"], label: string) => (\n \n \n \n);\nexport default function App() {\n return (\n \n \n {item(\"top-left\", \"TL\")}\n {item(\"top\", \"Top\")}\n {item(\"top-right\", \"TR\")}\n \n \n \n {item(\"left-top\", \"LT\")}\n {item(\"left\", \"Left\")}\n {item(\"left-bottom\", \"LB\")}\n \n \n {item(\"right-top\", \"RT\")}\n {item(\"right\", \"Right\")}\n {item(\"right-bottom\", \"RB\")}\n \n \n \n {item(\"bottom-left\", \"BL\")}\n {item(\"bottom\", \"Bottom\")}\n {item(\"bottom-right\", \"BR\")}\n \n \n );\n}"
}
]
},
{
"name": "PopconfirmPanel",
"import": "import { PopconfirmPanel } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/popconfirm",
"props": [
{
"name": "title",
"type": "React.ReactNode",
"required": false,
"boolean": false,
"descriptionZh": "显示的标题",
"descriptionEn": "Displayed title"
},
{
"name": "placement",
"type": "PlacementsType | undefined",
"required": false,
"enumValues": [
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"left-bottom",
"left-top",
"right",
"right-top",
"right-bottom"
],
"boolean": false,
"descriptionZh": "提示框出现的位置，可选值为`top`，`top-left`，`top-right`，`bottom`，`bottom-left`，`bottom-right`，`left`，`left-top`，`left-bottom`，`right`，`right-top`，`right-bottom`",
"descriptionEn": "Position where the tooltip appears, optional values: `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `left`, `left-top`, `left-bottom`, `right`, `right-top`, `right-bottom`"
},
{
"name": "destroyOnClose",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "关闭后是否销毁面板内容。默认销毁（重开时重新挂载）；设为 false 可保留面板内已填写的表单状态，代价是每个打开过的实例留一份隐藏 DOM",
"descriptionEn": "Whether to destroy panel content after closing. Destroyed by default (remounted on reopen); set false to keep form state at the cost of one hidden DOM node per opened instance"
},
{
"name": "onOpenChange",
"type": "((open: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "显示状态变化时触发",
"descriptionEn": "Called when visibility is requested to change"
},
{
"name": "panelOnly",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "只渲染浮层本身，不包含触发元素、定位与动画",
"descriptionEn": "Render only the popup itself, without trigger, positioning, or animation"
},
{
"name": "width",
"type": "string | number | undefined",
"required": false,
"boolean": false,
"descriptionZh": "展示的宽度,默认为内容区域的大小",
"descriptionEn": "Display width, defaults to content area size"
},
{
"name": "dark",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"descriptionZh": "是否展示暗色主题",
"descriptionEn": "Whether to display dark theme"
},
{
"name": "okText",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "确定按钮的文字，",
"descriptionEn": "OK button text"
},
{
"name": "cancelText",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "取消按钮的文字，",
"descriptionEn": "Cancel button text"
},
{
"name": "onOk",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击确定的回调，",
"descriptionEn": "Callback when OK is clicked"
},
{
"name": "onCancel",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击取消的回调，",
"descriptionEn": "Callback when cancel is clicked"
},
{
"name": "onShowChange",
"type": "((show: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "已废弃，请使用 `onOpenChange`",
"descriptionEn": "Deprecated; use `onOpenChange` instead"
}
],
"nativeProps": [],
"nativeValueTypes": {},
"events": [
{
"name": "onOpenChange",
"type": "((open: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "显示状态变化时触发",
"descriptionEn": "Called when visibility is requested to change"
},
{
"name": "onOk",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击确定的回调，",
"descriptionEn": "Callback when OK is clicked"
},
{
"name": "onCancel",
"type": "(() => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "点击取消的回调，",
"descriptionEn": "Callback when cancel is clicked"
},
{
"name": "onShowChange",
"type": "((show: boolean) => void) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "已废弃，请使用 `onOpenChange`",
"descriptionEn": "Deprecated; use `onOpenChange` instead"
}
],
"renderProps": [
"title"
],
"behavior": {
"rules": []
},
"children": [],
"examples": [
{
"id": "components/popconfirm/demo/basic.tsx",
"title": "基本用法",
"source": "import { message, Popconfirm } from \"react-kui\";\nexport default function App() {\n return (\n message.success(\"Clicked on ok\")}\n onCancel={() => message.info(\"Clicked on cancel\")}\n >\n Delete\n \n );\n}"
},
{
"id": "components/popconfirm/demo/local.tsx",
"title": "国际化",
"source": "import { Button, message, Space, Popconfirm } from \"react-kui\";\nconst ok = () => message.success(\"Clicked on ok\"),\n cancel = () => message.info(\"Clicked on cancel\");\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n );\n}"
},
{
"id": "components/popconfirm/demo/placement.tsx",
"title": "位置",
"source": "import { Button, Flex, Space, Popconfirm } from \"react-kui\";\nconst title = \"Are you sure to delete this task?\";\nconst item = (placement: Parameters[0][\"placement\"], label: string) => (\n \n \n \n);\nexport default function App() {\n return (\n \n \n {item(\"top-left\", \"TL\")}\n {item(\"top\", \"Top\")}\n {item(\"top-right\", \"TR\")}\n \n \n \n {item(\"left-top\", \"LT\")}\n {item(\"left\", \"Left\")}\n {item(\"left-bottom\", \"LB\")}\n \n \n {item(\"right-top\", \"RT\")}\n {item(\"right\", \"Right\")}\n {item(\"right-bottom\", \"RB\")}\n \n \n \n {item(\"bottom-left\", \"BL\")}\n {item(\"bottom\", \"Bottom\")}\n {item(\"bottom-right\", \"BR\")}\n \n \n );\n}"
}
]
},
{
"name": "Progress",
"import": "import { Progress } from \"react-kui\"",
"documentation": "https://react.k-ui.cn/components/progress",
"props": [
{
"name": "percent",
"type": "number | undefined",
"required": false,
"boolean": false,
"defaultExpression": "0",
"descriptionZh": "进度百分比",
"descriptionEn": "Progress percentage"
},
{
"name": "strokeWidth",
"type": "number | undefined",
"required": false,
"boolean": false,
"defaultExpression": "6",
"descriptionZh": "圆形进度条线的宽度",
"descriptionEn": "Circular progress bar line width"
},
{
"name": "color",
"type": "string | undefined",
"required": false,
"boolean": false,
"descriptionZh": "进度条颜色",
"descriptionEn": "Progress bar color"
},
{
"name": "format",
"type": "((percent: number) => React.ReactNode) | undefined",
"required": false,
"boolean": false,
"descriptionZh": "自定义进度条文字",
"descriptionEn": "Custom progress bar text"
},
{
"name": "width",
"type": "number | undefined",
"required": false,
"boolean": false,
"descriptionZh": "圆形进度条画布宽度，单位 px",
"descriptionEn": "Circular progress bar canvas width, in px"
},
{
"name": "strokeHeight",
"type": "number | undefined",
"required": false,
"boolean": false,
"descriptionZh": "进度条线的高度",
"descriptionEn": "Progress bar line height"
},
{
"name": "gapDegree",
"type": "number | undefined",
"required": false,
"boolean": false,
"defaultExpression": "75",
"descriptionZh": "仪表盘进度条缺口角度，可取值 0 ~ 295",
"descriptionEn": "Dashboard progress bar gap angle, can be 0 ~ 295"
},
{
"name": "strokeLinecap",
"type": "ProgressStroke | undefined",
"required": false,
"enumValues": [
"round",
"butt",
"square"
],
"boolean": false,
"defaultExpression": "\"round\"",
"descriptionZh": "进度条的样式",
"descriptionEn": "Progress bar style"
},
{
"name": "size",
"type": "SizeType | undefined",
"required": false,
"enumValues": [
"small",
"medium",
"large"
],
"boolean": false,
"descriptionZh": "值为`small`，展示小尺寸",
"descriptionEn": "When value is `small`, displays small size"
},
{
"name": "status",
"type": "ProgressStatus | undefined",
"required": false,
"enumValues": [
"normal",
"active",
"success",
"exception"
],
"boolean": false,
"defaultExpression": "\"normal\"",
"descriptionZh": "进度条状态,提供四种类型: `active`,`exception`,`success`,`normal`",
"descriptionEn": "Progress bar status, provides four types: `active`, `exception`, `success`, `normal`"
},
{
"name": "type",
"type": "ProgressType | undefined",
"required": false,
"enumValues": [
"circle",
"line",
"dashboard"
],
"boolean": false,
"defaultExpression": "\"line\"",
"descriptionZh": "进度条类型,提供三种类型: `line`,`circle`,`dashboard`",
"descriptionEn": "Progress bar type, provides three types: `line`, `circle`, `dashboard`"
},
{
"name": "showInfo",
"type": "boolean | undefined",
"required": false,
"enumValues": [
false,
true
],
"boolean": true,
"defaultExpression": "true",
"descriptionZh": "是否显示进度文字",
"descriptionEn": "Whether to show progress text"
}
],
"nativeProps": [
"onChange",
"suppressContentEditableWarning",
"suppressHydrationWarning",
"accessKey",
"autoCapitalize",
"autoFocus",
"className",
"contentEditable",
"contextMenu",
"dir",
"draggable",
"enterKeyHint",
"hidden",
"id",
"lang",
"nonce",
"slot",
"spellCheck",
"style",
"tabIndex",
"title",
"translate",
"radioGroup",
"role",
"about",
"content",
"datatype",
"inlist",
"prefix",
"property",
"rel",
"resource",
"rev",
"typeof",
"vocab",
"autoCorrect",
"autoSave",
"itemProp",
"itemScope",
"itemType",
"itemID",
"itemRef",
"results",
"security",
"unselectable",
"popover",
"popoverTargetAction",
"popoverTarget",
"inert",
"inputMode",
"is",
"exportparts",
"part",
"aria-activedescendant",
"aria-atomic",
"aria-autocomplete",
"aria-braillelabel",
"aria-brailleroledescription",
"aria-busy",
"aria-checked",
"aria-colcount",
"aria-colindex",
"aria-colindextext",
"aria-colspan",
"aria-controls",
"aria-current",
"aria-describedby",
"aria-description",
"aria-details",
"aria-disabled",
"aria-dropeffect",
"aria-errormessage",
"aria-expanded",
"aria-flowto",
"aria-grabbed",
"aria-haspopup",
"aria-hidden",
"aria-invalid",
"aria-keyshortcuts",
"aria-label",
"aria-labelledby",
"aria-level",
"aria-live",
"aria-modal",
"aria-multiline",
"aria-multiselectable",
"aria-orientation",
"aria-owns",
"aria-placeholder",
"aria-posinset",
"aria-pressed",
"aria-readonly",
"aria-relevant",
"aria-required",
"aria-roledescription",
"aria-rowcount",
"aria-rowindex",
"aria-rowindextext",
"aria-rowspan",
"aria-selected",
"aria-setsize",
"aria-sort",
"aria-valuemax",
"aria-valuemin",
"aria-valuenow",
"aria-valuetext",
"children",
"dangerouslySetInnerHTML",
"onCopy",
"onCopyCapture",
"onCut",
"onCutCapture",
"onPaste",
"onPasteCapture",
"onCompositionEnd",
"onCompositionEndCapture",
"onCompositionStart",
"onCompositionStartCapture",
"onCompositionUpdate",
"onCompositionUpdateCapture",
"onFocus",
"onFocusCapture",
"onBlur",
"onBlurCapture",
"onChangeCapture",
"onBeforeInput",
"onBeforeInputCapture",
"onInput",
"onInputCapture",
"onReset",
"onResetCapture",
"onSubmit",
"onSubmitCapture",
"onInvalid",
"onInvalidCapture",
"onLoad",
"onLoadCapture",
"onError",
"onErrorCapture",
"onKeyDown",
"onKeyDownCapture",
"onKeyPress",
"onKeyPressCapture",
"onKeyUp",
"onKeyUpCapture",
"onAbort",
"onAbortCapture",
"onCanPlay",
"onCanPlayCapture",
"onCanPlayThrough",
"onCanPlayThroughCapture",
"onDurationChange",
"onDurationChangeCapture",
"onEmptied",
"onEmptiedCapture",
"onEncrypted",
"onEncryptedCapture",
"onEnded",
"onEndedCapture",
"onLoadedData",
"onLoadedDataCapture",
"onLoadedMetadata",
"onLoadedMetadataCapture",
"onLoadStart",
"onLoadStartCapture",
"onPause",
"onPauseCapture",
"onPlay",
"onPlayCapture",
"onPlaying",
"onPlayingCapture",
"onProgress",
"onProgressCapture",
"onRateChange",
"onRateChangeCapture",
"onSeeked",
"onSeekedCapture",
"onSeeking",
"onSeekingCapture",
"onStalled",
"onStalledCapture",
"onSuspend",
"onSuspendCapture",
"onTimeUpdate",
"onTimeUpdateCapture",
"onVolumeChange",
"onVolumeChangeCapture",
"onWaiting",
"onWaitingCapture",
"onAuxClick",
"onAuxClickCapture",
"onClick",
"onClickCapture",
"onContextMenu",
"onContextMenuCapture",
"onDoubleClick",
"onDoubleClickCapture",
"onDrag",
"onDragCapture",
"onDragEnd",
"onDragEndCapture",
"onDragEnter",
"onDragEnterCapture",
"onDragExit",
"onDragExitCapture",
"onDragLeave",
"onDragLeaveCapture",
"onDragOver",
"onDragOverCapture",
"onDragStart",
"onDragStartCapture",
"onDrop",
"onDropCapture",
"onMouseDown",
"onMouseDownCapture",
"onMouseEnter",
"onMouseLeave",
"onMouseMove",
"onMouseMoveCapture",
"onMouseOut",
"onMouseOutCapture",
"onMouseOver",
"onMouseOverCapture",
"onMouseUp",
"onMouseUpCapture",
"onSelect",
"onSelectCapture",
"onTouchCancel",
"onTouchCancelCapture",
"onTouchEnd",
"onTouchEndCapture",
"onTouchMove",
"onTouchMoveCapture",
"onTouchStart",
"onTouchStartCapture",
"onPointerDown",
"onPointerDownCapture",
"onPointerMove",
"onPointerMoveCapture",
"onPointerUp",
"onPointerUpCapture",
"onPointerCancel",
"onPointerCancelCapture",
"onPointerEnter",
"onPointerLeave",
"onPointerOver",
"onPointerOverCapture",
"onPointerOut",
"onPointerOutCapture",
"onGotPointerCapture",
"onGotPointerCaptureCapture",
"onLostPointerCapture",
"onLostPointerCaptureCapture",
"onScroll",
"onScrollCapture",
"onScrollEnd",
"onScrollEndCapture",
"onWheel",
"onWheelCapture",
"onAnimationStart",
"onAnimationStartCapture",
"onAnimationEnd",
"onAnimationEndCapture",
"onAnimationIteration",
"onAnimationIterationCapture",
"onToggle",
"onBeforeToggle",
"onTransitionCancel",
"onTransitionCancelCapture",
"onTransitionEnd",
"onTransitionEndCapture",
"onTransitionRun",
"onTransitionRunCapture",
"onTransitionStart",
"onTransitionStartCapture"
],
"nativeValueTypes": {
"suppressContentEditableWarning": "boolean",
"suppressHydrationWarning": "boolean",
"accessKey": "string",
"autoFocus": "boolean",
"className": "string",
"contextMenu": "string",
"dir": "string",
"enterKeyHint": "string",
"hidden": "boolean",
"id": "string",
"lang": "string",
"nonce": "string",
"slot": "string",
"tabIndex": "number",
"title": "string",
"translate": "string",
"radioGroup": "string",
"about": "string",
"content": "string",
"datatype": "string",
"prefix": "string",
"property": "string",
"rel": "string",
"resource": "string",
"rev": "string",
"typeof": "string",
"vocab": "string",
"autoCorrect": "string",
"autoSave": "string",
"itemProp": "string",
"itemScope": "boolean",
"itemType": "string",
"itemID": "string",
"itemRef": "string",
"results": "number",
"security": "string",
"unselectable": "string",
"popover": "string",
"popoverTargetAction": "string",
"popoverTarget": "string",
"inert": "boolean",
"inputMode": "string",
"is": "string",
"exportparts": "string",
"part": "string",
"aria-activedescendant": "string",
"aria-autocomplete": "string",
"aria-braillelabel": "string",
"aria-brailleroledescription": "string",
"aria-colcount": "number",
"aria-colindex": "number",
"aria-colindextext": "string",
"aria-colspan": "number",
"aria-controls": "string",
"aria-describedby": "string",
"aria-description": "string",
"aria-details": "string",
"aria-dropeffect": "string",
"aria-errormessage": "string",
"aria-flowto": "string",
"aria-keyshortcuts": "string",
"aria-label": "string",
"aria-labelledby": "string",
"aria-level": "number",
"aria-live": "string",
"aria-orientation": "string",
"aria-owns": "string",
"aria-placeholder": "string",
"aria-posinset": "number",
"aria-relevant": "string",
"aria-roledescription": "string",
"aria-rowcount": "number",
"aria-rowindex": "number",
"aria-rowindextext": "string",
"aria-rowspan": "number",
"aria-setsize": "number",
"aria-sort": "string",
"aria-valuemax": "number",
"aria-valuemin": "number",
"aria-valuenow": "number",
"aria-valuetext": "string"
},
"events": [],
"renderProps": [
"format"
],
"behavior": {
"rules": []
},
"children": [],
"examples": [
{
"id": "components/progress/demo/basic.tsx",
"title": "进度条",
"source": "import { Progress } from \"react-kui\";\nexport default function App() {\n return (\n <>\n \n \n \n \n \n \n );\n}"
},
{
"id": "components/progress/demo/circle.tsx",
"title": "进度圈",
"source": "import { Progress } from \"react-kui\";\nexport default function App() {\n return (\n <>\n \n \n \n \n \n );\n}"
},
{
"id": "components/progress/demo/dashboard.tsx",
"title": "仪表盘进度条",
"source": "import { useState } from \"react\";\nimport { Segmented, Slider, Progress, type ProgressStroke } from \"react-kui\";\nconst caps = [\n { label: \"Butt\", value: \"butt\" },\n { label: \"Round\", value: \"round\" },\n { label: \"Square\", value: \"square\" },\n];\nexport default function App() {\n const [gap, setGap] = useState(140),\n [cap, setCap] = useState(\"round\");\n return (\n <>\n gapDegree：{gap}\n setGap(v as number)} />\n
\n
\n setCap(v as ProgressStroke)}\n />\n
\n
\n \n \n \n );\n}"
},
{
"id": "components/progress/demo/dynamic.tsx",
"title": "动态展示",
"source": "import { Minus, Plus } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, ButtonGroup, Progress } from \"react-kui\";\nexport default function App() {\n const [percent, setPercent] = useState(30),\n change = (step: number) => setPercent((value) => Math.max(0, Math.min(100, value + step)));\n return (\n <>\n \n \n \n \n \n \n );\n}"
},
{
"id": "components/progress/demo/color.tsx",
"title": "颜色和格式",
"source": "import { Minus, Plus } from \"kui-icons\";\nimport { useState } from \"react\";\nimport { Button, ButtonGroup, Progress } from \"react-kui\";\nconst getColor = (v: number) =>\n v >= 80 ? \"#f79e08\" : v >= 50 ? \"#c7b98d\" : v >= 30 ? \"#bdc78d\" : \"\";\nconst strength = (v: number) => (v < 30 ? \"Empty\" : v < 50 ? \"Weak\" : v < 80 ? \"Normal\" : \"Strong\");\nexport default function App() {\n const [percent, setPercent] = useState(0),\n change = (step: number) => setPercent((v) => Math.max(0, Math.min(100, v + step))),\n color = getColor(percent);\n return (\n <>\n \n